*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}button{font-family:inherit}:root{--bg1: #f6fbff;--bg2: #eaf6ff;--bg3: #d9efff;--card: rgba(255, 255, 255, .75);--card-strong: rgba(255, 255, 255, .92);--ink: #0f172a;--muted: rgba(15, 23, 42, .65);--blue-1: #dff3ff;--blue-2: #bfe8ff;--blue-3: #79ccff;--blue-4: #2fb2ff;--shadow: 0 22px 60px rgba(15, 23, 42, .12);--shadow-soft: 0 18px 35px rgba(15, 23, 42, .1);--radius: 22px}.page{min-height:100vh;background:radial-gradient(1200px 600px at 20% 10%,var(--bg3) 0%,transparent 60%),radial-gradient(1000px 600px at 80% 20%,#e8f3ff 0%,transparent 55%),linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 45%,#ffffff 100%);color:var(--ink);position:relative;overflow:hidden}.floaters{position:absolute;inset:0;pointer-events:none;z-index:0}.floater{position:absolute;bottom:-40px;border-radius:8px;background:linear-gradient(180deg,#79ccff00,#79ccff59);filter:blur(.2px);animation-name:floatUp;animation-timing-function:ease-in-out;animation-iteration-count:infinite;transform:translateY(0)}.floater:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),transparent 55%);border-radius:inherit;opacity:.5}@keyframes floatUp{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-55vh) rotate(6deg)}to{transform:translateY(-105vh) rotate(-4deg)}}.center{min-height:100vh;display:grid;place-items:center;padding:28px 18px;position:relative;z-index:1}.top{text-align:center;margin-bottom:18px}.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;letter-spacing:.2px;color:#0f172ab3;background:#ffffffb3;border:1px solid rgba(47,178,255,.2);box-shadow:0 10px 25px #0f172a14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.title{margin:12px 0 6px;font-size:clamp(28px,4vw,44px);letter-spacing:-.5px;line-height:1.08}.subtitle{margin:0;color:var(--muted);font-size:14px}.stage{display:grid;place-items:center;width:min(520px,92vw);position:relative}.envelope{width:min(380px,86vw);height:240px;border:0;padding:0;background:transparent;cursor:pointer;position:relative;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .16s ease}.envelope:hover{transform:translateY(-2px) scale(1.01)}.envelope:active{transform:translateY(0) scale(.99)}.envelope:focus-visible{box-shadow:0 0 0 5px #2fb2ff40;border-radius:18px}.env-shadow{position:absolute;left:50%;top:34px;width:92%;height:190px;transform:translate(-50%);background:radial-gradient(closest-side,rgba(15,23,42,.16),transparent 75%);filter:blur(8px);opacity:.6}.env-back{position:absolute;inset:42px 10px 18px;border-radius:18px;background:linear-gradient(180deg,#dff3fff2,#bfe8ffd9);border:1px solid rgba(47,178,255,.2);box-shadow:var(--shadow-soft)}.env-body{position:absolute;inset:62px 10px 18px;border-radius:18px;background:linear-gradient(145deg,#ffffffbf,#bfe8ff8c);border:1px solid rgba(47,178,255,.18);overflow:hidden}.env-body:before,.env-body:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#ffffff59,#79ccff2e);clip-path:polygon(0% 0%,50% 58%,100% 0%,100% 100%,0% 100%);opacity:.85}.env-body:after{background:linear-gradient(145deg,#ffffff1f,#2fb2ff24);clip-path:polygon(0% 0%,50% 64%,100% 0%,100% 100%,0% 100%);opacity:.7}.env-flap{position:absolute;left:10px;right:10px;top:42px;height:120px;border-radius:18px;background:linear-gradient(180deg,#dff3fff2,#79ccff59);border:1px solid rgba(47,178,255,.22);transform-origin:top center;transform:rotateX(0);transition:transform .65s cubic-bezier(.2,.8,.2,1);clip-path:polygon(0% 0%,100% 0%,50% 75%);box-shadow:0 20px 30px #0f172a0f}.stamp{position:absolute;right:24px;top:92px;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;font-size:16px;color:#0f172aa6;background:radial-gradient(circle at 30% 30%,#ffffffe6,#ffffff4d),linear-gradient(180deg,#dff3ffe6,#79ccff8c);border:1px solid rgba(47,178,255,.25);box-shadow:0 10px 25px #0f172a1a;transform:rotate(6deg)}.letter{position:absolute;left:50%;top:64px;width:calc(100% - 64px);max-width:320px;height:180px;transform:translate(-50%);background:var(--card-strong);border:1px solid rgba(47,178,255,.18);border-radius:16px;box-shadow:0 18px 35px #0f172a1f;overflow:hidden;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .75s}.letter-top{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#dff3ffd9,#ffffffbf);border-bottom:1px solid rgba(47,178,255,.14)}.mini-heart{width:10px;height:10px;background:#2fb2ff73;border-radius:3px;transform:rotate(45deg);position:relative;filter:drop-shadow(0 8px 10px rgba(47,178,255,.12))}.mini-heart:before,.mini-heart:after{content:"";position:absolute;width:10px;height:10px;background:inherit;border-radius:50%}.mini-heart:before{left:-5px;top:0}.mini-heart:after{left:0;top:-5px}.letter-lines{display:block;height:10px;margin:16px 16px 0;border-radius:999px;background:linear-gradient(90deg,#0f172a1a,#0f172a0a)}.letter-lines.short{width:70%}.hint{position:absolute;left:50%;bottom:-16px;transform:translate(-50%);padding:8px 12px;border-radius:999px;font-size:12px;color:#0f172aa3;background:#ffffffb3;border:1px solid rgba(47,178,255,.18);box-shadow:0 12px 30px #0f172a1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.envelope.open .env-flap{transform:rotateX(170deg)}.envelope.open .letter{transform:translate(-50%) translateY(-56px)}.burst{position:absolute;left:50%;top:86px;width:1px;height:1px;pointer-events:none}.burst-heart{position:absolute;width:10px;height:10px;background:#2fb2ff8c;border-radius:3px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}.burst-heart:before,.burst-heart:after{content:"";position:absolute;width:10px;height:10px;background:inherit;border-radius:50%}.burst-heart:before{left:-5px;top:0}.burst-heart:after{left:0;top:-5px}.envelope.open .burst-heart{animation:pop .65s ease-out forwards}.envelope.open .burst-heart:nth-child(1){--x: -80px;--y: -40px;animation-delay:0ms}.envelope.open .burst-heart:nth-child(2){--x: -50px;--y: -70px;animation-delay:30ms}.envelope.open .burst-heart:nth-child(3){--x: -20px;--y: -90px;animation-delay:60ms}.envelope.open .burst-heart:nth-child(4){--x: 20px;--y: -92px;animation-delay:45ms}.envelope.open .burst-heart:nth-child(5){--x: 55px;--y: -70px;animation-delay:25ms}.envelope.open .burst-heart:nth-child(6){--x: 80px;--y: -40px;animation-delay:55ms}.envelope.open .burst-heart:nth-child(7){--x: -35px;--y: -55px;animation-delay:80ms}.envelope.open .burst-heart:nth-child(8){--x: 35px;--y: -55px;animation-delay:90ms}.envelope.open .burst-heart:nth-child(9){--x: 0px;--y: -78px;animation-delay:70ms}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.7)}15%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x, 0px)),calc(-50% + var(--y, 0px))) rotate(45deg) scale(1.1)}}.modal{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:14px;pointer-events:none;opacity:0;transform:translateY(8px) scale(.99);transition:opacity .45s ease,transform .45s ease;background:#0914281f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.paper{width:min(560px,92vw);max-height:min(70vh,620px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(180deg,#fffc,#ffffffb3),repeating-linear-gradient(180deg,rgba(47,178,255,.06) 0px,rgba(47,178,255,.06) 1px,transparent 10px,transparent 18px);border:1px solid rgba(47,178,255,.2);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:18px;position:relative}.paper::-webkit-scrollbar{width:0;height:0}.paper:before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);background:linear-gradient(135deg,#2fb2ff38,#ffffff1a,#79ccff2e);filter:blur(12px);opacity:.75;z-index:-1;animation:borderGlow 5s ease-in-out infinite}@keyframes borderGlow{0%,to{opacity:.55;filter:blur(12px)}50%{opacity:.9;filter:blur(14px)}}.paper-header{display:flex;justify-content:space-between;align-items:start;gap:14px;padding:4px 4px 12px;border-bottom:1px dashed rgba(47,178,255,.25)}.paper-kicker{font-size:12px;color:#0f172a99}.paper-heading{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:4px}.close{border:1px solid rgba(47,178,255,.25);background:#fffc;color:#0f172acc;border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer;box-shadow:0 12px 25px #0f172a1a;transition:transform .12s ease,box-shadow .12s ease}.close:hover{transform:translateY(-1px)}.close:active{transform:translateY(0);box-shadow:0 10px 18px #0f172a1a}.paper-body{padding:14px 6px 6px;font-size:15px;line-height:1.7;color:#0f172ad1}.paper-body p{margin:0 0 12px}.signature{margin-top:18px;padding-top:12px;border-top:1px solid rgba(47,178,255,.16)}.sig-line{color:#0f172a9e;font-size:13px}.sig-name{font-size:18px;font-weight:900;letter-spacing:-.2px;margin-top:2px}.ps{margin-top:16px;border-radius:16px;padding:14px;background:linear-gradient(180deg,#dff3ffbf,#ffffffbf);border:1px solid rgba(47,178,255,.16)}.ps-title{font-weight:900;margin-bottom:6px}.ps-text{color:#0f172abd}.sparkle{position:absolute;right:16px;bottom:16px;width:56px;height:56px;border-radius:18px;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.9),transparent 55%),radial-gradient(circle at 60% 60%,rgba(121,204,255,.55),transparent 55%),radial-gradient(circle at 45% 45%,rgba(47,178,255,.25),transparent 60%);filter:blur(.2px);opacity:.65;animation:twinkle 2.4s ease-in-out infinite}@keyframes twinkle{0%,to{transform:rotate(6deg) scale(1);opacity:.55}50%{transform:rotate(-6deg) scale(1.05);opacity:.8}}.footer{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;color:#0f172a99;font-size:12px}.footer-chip{background:#ffffffa6;border:1px solid rgba(47,178,255,.15);padding:6px 10px;border-radius:999px}.footer-dot{opacity:.5}