:root{--bg1:#1a1025;--bg2:#2d1b4e;--purple:#b79cf5;--pink:#ff8fc7;--cream:#fff8fb}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{height:100%}body{color:var(--cream);background:radial-gradient(circle at 50% 20%, var(--bg2), var(--bg1) 70%);background-attachment:fixed;font-family:Mali,Fredoka,sans-serif;overflow-x:hidden}.bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.heart{opacity:0;animation:linear infinite floatUp;position:absolute;bottom:-40px}.star{color:var(--purple);animation:ease-in-out infinite twinkle;position:absolute}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.8}to{opacity:0;transform:translateY(-110vh)rotate(25deg)}}@keyframes twinkle{0%,to{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.page{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:72px 20px 32px;display:flex;position:relative}.hero-circle{aspect-ratio:1;width:min(62vw,260px);box-shadow:0 0 40px #ff8fc78c, 0 0 0 4px var(--pink);background:radial-gradient(circle,#3b2467,#1a1025);border-radius:50%;place-items:center;margin-bottom:26px;display:grid;overflow:hidden}.hero-circle img{object-fit:cover;width:100%;height:100%}.hero-circle .mascot{width:82%;height:82%}.title{letter-spacing:.06em;background:linear-gradient(90deg, var(--pink), var(--purple));color:#0000;-webkit-background-clip:text;background-clip:text;font-family:Fredoka,sans-serif;font-size:clamp(2.2rem,9vw,4.2rem);line-height:1.1}.subtitle{color:#e9dcff;margin:12px 0 28px;font-size:clamp(1rem,3.8vw,1.3rem)}.btn{cursor:pointer;color:#1a1025;background:linear-gradient(90deg, var(--pink), var(--purple));border:none;border-radius:999px;align-items:center;gap:8px;padding:14px 32px;font-family:inherit;font-size:1.1rem;font-weight:600;transition:transform .15s;display:inline-flex;box-shadow:0 6px 20px #ff8fc766}.btn:active{transform:scale(.96)}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;background:#0a0514b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{border:2px solid var(--pink);text-align:center;background:#2a1a47;border-radius:24px;width:min(100%,380px);padding:28px 22px;box-shadow:0 0 40px #b79cf566}.password-input{margin:16px 0 8px;position:relative}.modal .password-input input{border:2px solid var(--purple);width:100%;color:var(--cream);text-align:center;background:#1a1025;border-radius:14px;outline:none;padding:14px 48px 14px 16px;font-family:inherit;font-size:1.1rem}.modal .password-input input:focus{border-color:var(--pink)}.password-input__toggle{color:#cbb8ff;cursor:pointer;background:0 0;border:0;place-items:center;padding:6px;display:grid;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.password-input__toggle:hover{color:var(--cream)}.password-input__toggle:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}.hint{color:#cbb8ff;min-height:1.2em;margin-top:15px;font-size:.9rem}.error{color:var(--pink);min-height:1.6em;margin:6px 0 10px;font-size:.95rem}.link-btn{color:#cbb8ff;cursor:pointer;background:0 0;border:none;margin-top:14px;font-family:inherit;font-size:.95rem}.unlock{text-align:center;color:var(--cream);font-size:1.6rem}.unlock svg{color:var(--pink);margin-bottom:8px}.confetti{pointer-events:none;z-index:60;position:fixed;inset:0;overflow:hidden}.confetti span{border-radius:2px;position:absolute;top:0}.nav{z-index:30;justify-content:space-between;display:flex;position:fixed;top:12px;left:12px;right:12px}.nav button{border:2px solid var(--pink);width:44px;height:44px;color:var(--cream);cursor:pointer;background:#2a1a47d9;border-radius:50%;place-items:center;display:grid}.gifts-title{font-size:clamp(1.8rem,7vw,3rem)}.gift-choices{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:clamp(8px,4vw,48px);width:min(100%,1060px);margin-top:4px;display:grid}.gift-choice{min-width:0;color:var(--cream);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:8px;transition:transform .2s,background-color .2s;display:flex}.gift-choice:hover{transform:translateY(-5px)}.gift-choice:focus-visible{outline:2px solid var(--pink);outline-offset:3px}.gift-choice__art{display:block}.gift-choice__image{object-fit:contain;filter:drop-shadow(0 12px 14px #2410313d);width:100%;height:min(58dvh,570px);transition:filter .2s;display:block}.gift-choice:hover .gift-choice__image{filter:drop-shadow(0 16px 18px #24103152)}@media (width<=719px){.gift-choices{grid-template-columns:1fr;gap:4px}.gift-choice__image{height:min(42dvh,350px)}}.flash{z-index:50;pointer-events:none;background:radial-gradient(circle,#fff8fb,#ffd1ea 60%,#b79cf5);position:fixed;inset:0}.universe-page{isolation:isolate;background-color:#10091f;background-image:linear-gradient(#0e052029,#0e052052),url(/images/memories/universe-background-4k.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;overflow:hidden}.universe-effects{z-index:0;pointer-events:none;contain:paint;position:absolute;inset:0;overflow:hidden}.universe-effects:before{content:"";opacity:.8;background:radial-gradient(at 34% 43%,#9336ff3d,#0000 34%),radial-gradient(at 73% 54%,#6c30db33,#0000 38%),radial-gradient(at 52% 82%,#ae4cff24,#0000 30%);position:absolute;inset:-18%}.universe-effects__sparkle{opacity:.55;background:#fff;border-radius:50%;width:3px;height:3px;position:absolute;box-shadow:0 0 5px 2px #cf9fffc7,0 0 14px 4px #904eff6b}.universe-effects__sparkle:before,.universe-effects__sparkle:after{content:"";background:linear-gradient(#0000,#efdaffe6,#0000);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.universe-effects__sparkle:before{width:1px;height:15px}.universe-effects__sparkle:after{width:15px;height:1px}.universe-effects__comet{opacity:.82;background:linear-gradient(90deg,#0000,#c084ff2e 30%,#fff 100%);border-radius:50%;width:clamp(48px,8vw,100px);height:2px;position:absolute;transform:rotate(35deg);box-shadow:0 0 8px 1px #b778ffa3}.universe-effects__comet--one{opacity:.58;width:clamp(72px,10vw,124px);top:calc(27% + 2cm);left:calc(14% - 2cm);transform:rotate(45deg)}.universe-effects__comet--two{width:clamp(48px,6.5vw,82px);top:18%;left:81%}.universe-effects__comet--three{width:clamp(34px,4.5vw,58px);top:64%;left:91%}.universe-title{z-index:1;text-shadow:0 0 18px #c55bff8f;place-items:center;font-size:clamp(1.8rem,4.2vw,2.8rem);display:grid;position:absolute;top:clamp(24px,5vh,60px);left:0;right:0;transform:translateY(36px)}.universe-title span{z-index:1;position:relative}.universe-caption{z-index:1;color:#ead2ff;text-shadow:0 0 12px #c681ffb3;background:linear-gradient(90deg,#0000,#e0b9ffbf) 0/28px 1px no-repeat,linear-gradient(90deg,#e0b9ffbf,#0000) 100%/28px 1px no-repeat;width:max-content;max-width:90vw;padding:0 36px;font-size:clamp(.85rem,1.4vw,1rem);font-style:italic;position:absolute;bottom:clamp(94px,13vh,128px);left:50%;transform:translate(-50%,-24px)}.universe-caption:before,.universe-caption:after{color:#e7c7ff;content:"✦";font-size:.72rem;position:absolute;top:50%;transform:translateY(-50%)}.universe-caption:before{left:20px}.universe-caption:after{right:20px}.universe-map{aspect-ratio:1.35;flex:0 auto;width:min(94vw,960px,97.2dvh);min-height:0;position:relative;overflow:visible;transform:translateY(-72px)}.universe-page .memory-star__glow{opacity:.345;animation:none}.universe-page .memory-star--dim-glow .memory-star__glow{opacity:.207}.universe-page .memory-star--tseen-foo .memory-star__glow{opacity:.149}.universe-map__lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.universe-map__lines line{stroke:#efdfffeb;stroke-width:.55px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000px;opacity:0;filter:drop-shadow(0 0 3px #daacffdb);animation:constellation-line-reveal .72s ease-out var(--line-delay) forwards}.memory-star{z-index:2;aspect-ratio:1;cursor:pointer;opacity:0;width:clamp(34px,5vw,48px);animation:constellation-star-reveal .55s ease-out var(--reveal-delay) forwards;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%)}.memory-star__glow{background:radial-gradient(ellipse at 46% 43%, #fffaff80 0%, var(--star-tint) 14%, transparent 66%);opacity:.42;animation:constellation-pulse 3s ease-in-out var(--glow-delay) infinite;border-radius:46% 54% 51% 49%;transition:opacity .2s,transform .2s;position:absolute;inset:-24% -32%}.memory-star__core{z-index:2;background:radial-gradient(ellipse at 35% 35%, #fff 0 28%, var(--star-tint) 100%);width:7px;height:6px;box-shadow:0 0 3px 1px #fffc, 0 0 7px 2px var(--star-tint);border-radius:43% 57% 49% 51%;transition:transform .2s;position:relative}.memory-star__photo{z-index:2;object-fit:cover;width:13px;height:12px;box-shadow:0 0 8px 3px var(--star-tint);border:1px solid #fff;border-radius:42% 58% 48% 52%;position:relative;transform:rotate(-8deg)}.memory-star--altair .memory-star__core{border-radius:46% 54% 42% 58%;width:11px;height:9px;box-shadow:0 0 4px 2px #ffffffe6,0 0 12px 5px #f4d4ffbf,0 0 22px 8px #ab6aff6b}.memory-star__name{z-index:3;color:#f8f0ff;white-space:nowrap;opacity:.9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#120824c7;border:1px solid #e2cdff29;border-radius:999px;padding:3px 7px;font-size:clamp(.56rem,1.1vw,.68rem);line-height:1.2;transition:opacity .2s,transform .2s;position:absolute;top:calc(100% + 5px);left:50%;transform:translate(-50%);box-shadow:0 2px 10px #08031247}.memory-star--label-top .memory-star__name{top:auto;bottom:calc(100% + 6px)}.memory-star--label-bottom .memory-star__name{top:calc(100% + 6px)}.memory-star--label-left .memory-star__name{top:50%;left:auto;right:calc(100% + 7px);transform:translateY(-50%)}.memory-star--label-right .memory-star__name{top:50%;left:calc(100% + 7px);transform:translateY(-50%)}.memory-star:hover .memory-star__core,.memory-star:focus-visible .memory-star__core{transform:scale(1.35)}.memory-star:hover .memory-star__name,.memory-star:focus-visible .memory-star__name{opacity:1}.memory-star:focus-visible{outline:none}.memory-star:focus-visible .memory-star__glow{transform:scale(1.2)}.universe-footer{z-index:1;align-items:center;gap:10px;display:flex;position:absolute;bottom:clamp(24px,5vh,60px);left:50%;transform:translate(-50%)}.memory-overlay{z-index:45;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080412c7;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.memory-detail{text-align:center;background:linear-gradient(145deg,#3f2360fa,#190d2efa);border:1px solid #e5c5ff73;border-radius:24px;width:min(100%,440px);padding:22px;position:relative;box-shadow:0 0 50px #ae70ff52,0 20px 60px #00000080}.memory-detail__close{z-index:1;color:#fff;cursor:pointer;background:#140a24bf;border:1px solid #ffffff40;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;top:10px;right:10px}.memory-detail__photo{aspect-ratio:4/3;background:radial-gradient(circle,#69439c,#201034);border:2px solid #dab1ffa6;border-radius:18px;place-items:center;width:100%;display:grid;overflow:hidden;box-shadow:0 0 25px #c083ff33}.memory-detail__photo img{object-fit:cover;width:100%;height:100%}.memory-detail__photo .photo-empty{color:#e5c4ff;justify-items:center;gap:8px;font-size:3rem;display:grid}.memory-detail__photo .photo-empty small{font-size:.85rem}.memory-detail__date{color:#e4c2ff;margin-top:18px;font-family:Fredoka,sans-serif;font-size:1.25rem}.memory-detail__caption{color:#fff8fb;margin-top:8px;line-height:1.6}.memory-upload{color:#fff8fb;cursor:pointer;background:#975ccf59;border:1px solid #e5c5ff8c;border-radius:999px;justify-content:center;align-items:center;gap:8px;margin-top:18px;padding:10px 18px;transition:background-color .2s;display:inline-flex}.memory-upload:hover{background:#b173e68c}.memory-upload--remove{color:#ffd9e8;background:#822d5d4d;border-color:#ffbeda7a;margin-left:8px}.memory-upload--remove:hover{background:#9d3b6f8c}.memory-upload--remove:disabled{opacity:.55;cursor:default}.memory-upload input{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.memory-upload:focus-within{outline-offset:3px;outline:2px solid #fff}.memory-upload__error{color:#ffd1e7;margin-top:10px;font-size:.9rem}.universe-back{margin-top:0;padding:10px 22px;font-size:.95rem}.eagle-message__button{color:#e8d2ff;width:46px;height:46px;box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0;place-items:center;padding:2px;transition:background-color .2s,box-shadow .2s,transform .2s;display:grid}.eagle-message__button:hover{filter:drop-shadow(0 0 8px #c49be8b8);background:0 0;transform:translateY(-2px)}.eagle-message__button:focus-visible{outline-offset:3px;outline:2px solid #fff}.eagle-message__button img,.eagle-message__icon img{object-fit:contain;filter:brightness(0)saturate()invert(88%)sepia(13%)saturate(989%)hue-rotate(209deg)brightness(104%)contrast(101%);width:100%;height:100%;display:block}.eagle-message__icon{color:#e8d2ff;background:0 0;border:0;border-radius:0;width:52px;height:52px;margin:0 auto 16px;padding:2px}.eagle-message__text{color:#fff8fb;font-size:1.05rem;line-height:1.9}@keyframes constellation-pulse{0%,to{opacity:.3;transform:scale(.9)}50%{opacity:.58;transform:scale(1.04)}}@keyframes constellation-star-reveal{0%{opacity:0;filter:brightness(.3)}65%{opacity:1;filter:brightness(2.2)}to{opacity:1;filter:brightness()}}@keyframes constellation-line-reveal{0%{stroke-dashoffset:1000px;opacity:1}to{stroke-dashoffset:0;opacity:1}}@media (width<=719px){.universe-page{justify-content:flex-start;padding-top:82px}.universe-title{font-size:clamp(1.4rem,6.4vw,2.2rem)}.universe-map{width:min(94vw,720px,97.2dvh)}.memory-star{width:clamp(32px,8vw,42px)}.memory-star__name{opacity:1;padding:2px 5px;font-size:.48rem}.universe-caption{bottom:102px}.universe-effects__comet--three{top:69%;left:85%}}@media (prefers-reduced-motion:reduce){.memory-star,.universe-map__lines line{animation-duration:.01ms}.memory-star__glow{animation:none}}.envelope-stage{perspective:900px;margin:70px auto 10px}.envelope{cursor:pointer;width:min(84vw,320px);height:210px;position:relative}.env-back{z-index:1;background:#e29ac6;border-radius:10px;position:absolute;inset:0;box-shadow:0 14px 36px #0006}.env-paper{z-index:2;background:#fffaf2;border-radius:6px;place-items:center;height:180px;font-size:2rem;display:grid;position:absolute;top:12px;left:14px;right:14px}.env-front{z-index:3;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:#f6b6da;border-radius:10px;position:absolute;inset:0}.env-flap{z-index:4;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;background:#ffc9e6;height:55%;position:absolute;top:0;left:0;right:0}.envelope.is-open .env-flap{z-index:1}.env-seal{z-index:5;margin-left:-20px;font-size:2.2rem;line-height:1;position:absolute;top:calc(55% - 20px);left:50%}.tap-hint{color:#e9dcff;margin-top:26px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.paper{text-align:left;color:#4a3358;background-color:#fffaf2;background-image:repeating-linear-gradient(#0000,#0000 31px,#ff8fc74d 32px);border-radius:10px;width:min(100%,520px);max-height:calc(100dvh - 130px);padding:28px 24px 30px;position:relative;overflow-y:auto;box-shadow:0 16px 44px #00000080}.paper-deco{text-align:center;letter-spacing:.3em;margin-bottom:6px;font-size:1.4rem}.paper-photo{object-fit:cover;border:3px solid var(--pink);border-radius:50%;width:110px;height:110px;margin:6px auto 10px;display:block}.paper-to{color:#7a3fb0;margin-bottom:8px;font-size:1.25rem;line-height:32px}.paper-body p{white-space:pre-line;margin-bottom:32px;font-size:1.05rem;line-height:32px}.paper-sign{text-align:right;color:#7a3fb0;font-weight:600;line-height:32px}.letter-landing-page{isolation:isolate;overflow:hidden}.letter-landing-page:before,.letter-open-page:before{z-index:-1;content:"";pointer-events:none;background:radial-gradient(at 50% 48%,#a663e729,#0000 58%),linear-gradient(145deg,#ffffff06,#0000 42%,#cf97ff09);border:1px solid #e2beff21;border-radius:40px;position:absolute;inset:8% 12%;box-shadow:inset 0 0 70px #b874ff0f,0 0 55px #9153d314}.letter-title{z-index:1;text-shadow:0 0 22px #d07aff57;position:relative}.letter-intro{color:#f7e7ffd6;letter-spacing:.035em;text-shadow:0 2px 12px #15082780;margin-top:12px;font-size:clamp(.9rem,2.5vw,1.08rem)}.letter-envelope-scene{isolation:isolate;place-items:center;width:min(94vw,620px);margin:8px auto 0;display:grid;position:relative}.letter-envelope-scene__sparkle{z-index:1;color:#f3d9ff;text-shadow:0 0 12px #d193ffe6;pointer-events:none;position:absolute}.letter-envelope-scene__sparkle--one{font-size:1.4rem;top:13%;left:9%}.letter-envelope-scene__sparkle--two{color:#ffc9ea;font-size:1.8rem;top:4%;right:15%}.letter-envelope-scene__sparkle--three{font-size:1rem;bottom:17%;right:5%}.envelope-img-wrap{z-index:1;cursor:pointer;filter:drop-shadow(0 18px 28px #0802166b);width:min(84vw,500px);margin:24px auto 18px;transition:filter .25s;position:relative}.envelope-img-wrap:hover{filter:drop-shadow(0 20px 34px #11042280)drop-shadow(0 0 16px #c889ff33)}.envelope-img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:10px;width:100%;height:auto;display:block}.letter-landing-page .tap-hint{color:#f2e4ff;background:#2714407a;border:1px solid #e4c7ff3d;border-radius:999px;align-items:center;gap:12px;margin-top:18px;padding:10px 18px;animation:none;display:inline-flex;box-shadow:0 8px 26px #0c041733,inset 0 0 18px #cc94ff0f}.letter-landing-page .tap-hint span{color:#e3b7ff;font-size:.75rem}.paper-card{aspect-ratio:2/3;filter:drop-shadow(0 16px 36px #00000080);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;width:min(94vw,480px,66.6667dvh - 93.3333px);position:relative;container-type:inline-size}.letter-open-page{isolation:isolate;justify-content:center;gap:12px;height:100dvh;min-height:0;padding:62px 12px 12px;position:relative;overflow:hidden}.letter-open-page:before{inset:3% 12%}.letter-open-page .paper-card{z-index:1;flex:0 auto;max-height:calc(100dvh - 140px)}.letter-open-page>.btn{z-index:1;position:relative}.letter-language-toggle{z-index:2;background:#fff8fbe0;border:1px solid #7a3fb059;border-radius:999px;gap:2px;padding:2px;display:flex;position:absolute;top:1%;right:1%}.letter-language-toggle button{color:#7a3fb0;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:3px 6px;font-size:clamp(8px,2cqw,9px)}.letter-language-toggle button.is-active{color:#fff8fb;background:#7a3fb0}.letter-language-toggle button:focus-visible{outline-offset:2px;outline:2px solid #ff8fc7}@media (width>=720px){.letter-open-page{justify-content:flex-end;padding:12px 12px clamp(24px,5vh,60px)}}.paper-text{text-align:left;color:#4a3358;scrollbar-width:thin;-webkit-overflow-scrolling:touch;height:53%;font-size:4cqw;line-height:6.1cqw;position:absolute;top:18.4%;left:12.5%;right:10.5%;overflow-y:auto}.paper-text h2{font-size:inherit;line-height:inherit;color:#7a3fb0;margin-bottom:6.1cqw;font-weight:600}.paper-text p{white-space:pre-line;margin:0 0 6.1cqw}.paper-text .sign-line{text-align:right;color:#7a3fb0;margin:0;font-weight:600}.paper-text{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b79cf5 transparent;padding-right:6.9%;right:.1%;overflow-y:auto}.paper-text::-webkit-scrollbar{width:6px}.paper-text::-webkit-scrollbar-thumb{background:#b79cf5;border-radius:6px}.paper-text::-webkit-scrollbar-track{background:0 0}body.home-bg{background-color:#1a1025;background-image:url(/images/letter/home-bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}@media (width>=769px){body.home-bg{background-size:100% 100%}}@media (orientation:portrait){body.home-bg{background-image:url(/images/letter/home-bg-mobile.jpg),url(/images/letter/home-bg.jpg)}}
