:root{--pink1: #ff9acb;--pink2: #ff5fa2;--card: rgba(255, 255, 255, .86);--ink: #231f2a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);overflow:hidden}.page{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.bg{position:absolute;inset:0;background:radial-gradient(1200px 700px at 20% 20%,#fff 0%,transparent 55%),radial-gradient(900px 600px at 80% 30%,#fff 0%,transparent 60%),radial-gradient(800px 800px at 60% 85%,#fff 0%,transparent 55%),linear-gradient(135deg,var(--pink1),var(--pink2))}.cats{position:absolute;inset:0;overflow:hidden;pointer-events:none}.cat{position:absolute;transform:translate(-50%,-50%);animation:floaty linear infinite;will-change:transform}.cat svg{width:100%;height:100%}.cat.flip{transform:translate(-50%,-50%) scaleX(-1)}@keyframes floaty{0%{transform:translate(-50%,-50%) translateY(0) translate(0) rotate(0)}50%{transform:translate(-50%,-50%) translateY(calc(var(--drift) * -1)) translate(var(--drift)) rotate(var(--rot))}to{transform:translate(-50%,-50%) translateY(0) translate(0) rotate(0)}}.card{position:relative;width:min(420px,92vw);background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:22px;border:1px solid rgba(255,255,255,.65);box-shadow:0 18px 55px #0000002e;z-index:2}.enter{animation:popIn .52s cubic-bezier(.2,.9,.2,1) both}@keyframes popIn{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;padding:8px 12px;border-radius:999px;background:#ffffffb8;border:1px solid #ffffffd8}h1{margin:14px 0 8px;font-size:28px;line-height:1.1;letter-spacing:-.02em}.muted{margin:0 0 14px;opacity:.85;line-height:1.45}.form{display:grid;gap:14px;margin-top:8px}.label{display:grid;gap:8px;font-weight:800}.input{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.75);padding:12px 14px;font-size:16px;outline:none;background:#ffffffeb}.input:focus{border-color:#ff4f9c;box-shadow:0 0 0 4px #ff4f9c2e}.passRow{position:relative;display:flex;align-items:center;gap:10px}.iconBtn{flex:0 0 auto;border:1px solid rgba(255,255,255,.8);background:#ffffffb8;border-radius:14px;height:44px;width:54px;cursor:pointer;font-size:18px}.btn{width:100%;border:0;border-radius:14px;padding:12px 14px;font-size:16px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,#ff4f9c,#ff7db8);color:#fff;box-shadow:0 10px 26px #ff4f9c52}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:active{transform:scale(.99)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.8);box-shadow:none}.error{background:#fff;border:1px solid #ffd0e3;border-radius:14px;padding:10px 12px;font-weight:900}.shake{animation:shake .42s ease both}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.hint{margin:0;font-size:13px;opacity:.75;line-height:1.35}.topRow{display:flex;align-items:center;justify-content:space-between;gap:12px}.miniBtn{border:1px solid rgba(255,255,255,.8);background:#ffffffb8;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer}.letter{margin:10px 0 16px;background:#fff9;border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:14px}.letter p{margin:0 0 10px;line-height:1.5;opacity:.92}.sig{margin-top:8px;font-weight:900}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#00000047;z-index:999;animation:fadeIn .18s ease both}.sheet{width:min(560px,94vw);max-height:88dvh;overflow:hidden;background:#ffffffeb;border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:18px;position:relative;box-shadow:0 20px 60px #00000038;animation:popIn .22s cubic-bezier(.2,.9,.2,1) both}.iconClose{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.8);background:#ffffffc7;font-weight:900;cursor:pointer;z-index:50}.envelopeWrap{display:grid;place-items:center;padding:8px 0 12px}.envelope{position:relative;width:min(380px,88vw);height:240px;perspective:900px;transform-style:preserve-3d}.envBack{position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,#fffffff5,#ffffffb8);border:1px solid rgba(255,255,255,.65);box-shadow:0 18px 40px #0000001f;z-index:1}.letterCard{position:absolute;left:50%;bottom:18px;transform:translate(-50%) translateY(120px) scale(.98);width:calc(100% - 34px);height:178px;border-radius:16px;background:#fffffff5;border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 28px #0000001f;overflow:hidden;opacity:0;transition:transform .7s cubic-bezier(.2,.9,.2,1),opacity .25s ease;pointer-events:none;z-index:2}.letterInner{height:100%;padding:10px;display:grid;place-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.letterTap{width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:12px;position:relative}.letterImg{width:100%;aspect-ratio:8.5 / 11;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 10px 22px #0000001a}.letterImg:not([src]),.letterImg[src=""]{background:linear-gradient(180deg,#fffffff2,#ffdcebe6)}.tapHint{position:absolute;left:50%;bottom:10px;transform:translate(-50%);background:#ffffffe0;border:1px solid rgba(255,255,255,.7);padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;box-shadow:0 10px 20px #0000001a}.envPocket{position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,#ff9acb59,#ff5fa238);overflow:hidden;z-index:4}.envPocket:before{content:"";position:absolute;inset:0;border-radius:18px;background:#ffffff29;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-bottom:1px solid rgba(255,255,255,.55)}.envPocket:after{content:"";position:absolute;inset:0;border-radius:18px;background:#ffffff1f;clip-path:polygon(0 0,50% 55%,0 100%)}.envFlap{position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,#ff5fa259,#ff9acb38);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:50% 0%;transform:rotateX(0);transition:transform .7s cubic-bezier(.2,.9,.2,1);border-top:1px solid rgba(255,255,255,.55);backface-visibility:hidden;transform-style:preserve-3d;z-index:5;pointer-events:none}.heartSeal{position:absolute;left:50%;top:116px;transform:translate(-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#ffffffd1;border:1px solid rgba(255,255,255,.78);box-shadow:0 10px 24px #0000001a;font-size:22px;cursor:pointer;transition:transform .25s ease,opacity .25s ease;z-index:6}.heartSeal:active{transform:translate(-50%) scale(.94)}.envelope.closed .letterCard{transform:translate(-50%) translateY(130px) scale(.98);opacity:0}.envelope.opening .envFlap,.envelope.opened .envFlap{transform:rotateX(180deg)}.envelope.opening .letterCard{transform:translate(-50%) translateY(36px) scale(1);opacity:1}.envelope.opened .letterCard{transform:translate(-50%) translateY(-74px) scale(1.03);opacity:1;pointer-events:auto}.envelope.opening .heartSeal,.envelope.opened .heartSeal{opacity:.88;transform:translate(-50%) translateY(-6px) scale(.92)}.envActions{display:grid;gap:10px;margin-top:6px}.zoomOverlay{position:fixed;inset:0;background:#000000a6;z-index:1000;display:grid;place-items:center;padding:16px;animation:fadeIn .18s ease both;touch-action:pan-y;overscroll-behavior:contain}.zoomFrame{width:min(560px,94vw);max-height:86dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:18px;padding:10px;box-shadow:0 25px 80px #00000059;animation:popIn .22s cubic-bezier(.2,.9,.2,1) both;display:block}.zoomImg{width:94vw;max-width:520px;height:auto;border-radius:14px;background:#fff;box-shadow:0 12px 30px #00000040;display:block;margin:0 auto}.zoomClose{position:fixed;top:14px;right:14px;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:#ffffff1a;color:#fff;font-weight:900;cursor:pointer;z-index:1001}.zoomHint{color:#ffffffd9;font-weight:900;margin:10px 0 0;font-size:12px;text-align:center}@media(min-width:768px){h1{font-size:34px}.card{padding:26px}}.section{margin-top:14px;background:#ffffff9e;border:1px solid rgba(255,255,255,.58);border-radius:18px;padding:14px}.sectionTitleRow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}.sectionTitle{font-weight:900;font-size:16px}.sectionSub{font-size:12px;opacity:.75;margin-top:2px}.sectionBtns{display:flex;gap:10px}.photoFrame{width:100%;border-radius:16px;overflow:hidden;background:#fffc;border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 26px #0000001a;touch-action:pan-y}.photoImg{width:100%;height:280px;object-fit:cover;display:block;transition:transform .16s ease;user-select:none;-webkit-user-select:none}.photoCaption{margin-top:10px;font-weight:900;opacity:.9;line-height:1.35}.dots{margin-top:10px;display:flex;justify-content:center;gap:8px}.dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:#ffffff80;cursor:pointer}.dot.on{background:#ff4f9ce6}.reasonCard{width:100%;border-radius:18px;background:#ffffffdb;border:1px solid rgba(255,255,255,.78);padding:18px;box-shadow:0 12px 26px #0000001a}.reasonText{font-weight:900;font-size:18px;line-height:1.25;animation:reasonIn .28s ease both}@keyframes reasonIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.bottomNav{display:flex;justify-content:space-between;gap:12px;background:#ffffff9e;border:1px solid rgba(255,255,255,.62);border-radius:18px;padding:10px}.navBtn{flex:1;border:1px solid rgba(255,255,255,.75);background:#ffffffb3;border-radius:16px;padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:900}.navBtn.active{background:linear-gradient(135deg,#ff4f9c40,#ff7db840);border-color:#ff4f9c59;box-shadow:0 12px 24px #ff4f9c2e}.navIcon{font-size:18px}.navText{font-size:14px}.homeHint{margin-top:14px}.homeChips{display:flex;gap:10px}.chip{flex:1;border-radius:14px;border:1px solid rgba(255,255,255,.75);background:#ffffffb8;padding:10px 12px;font-weight:900;cursor:pointer}