*{margin:0;padding:0;box-sizing:border-box}.container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f4e8e1;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.envelope-wrapper{position:relative;cursor:pointer;margin-top:100px}.envelope{position:relative;width:480px;height:320px;background-color:#e0d0c1;box-shadow:0 15px 35px #00000026;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.envelope .flap{position:absolute;top:0;left:0;border-left:240px solid transparent;border-right:240px solid transparent;border-top:170px solid #d4c2b0;transform-origin:top;transition:transform .5s ease-in-out,z-index .5s;z-index:3}.envelope .pocket{position:absolute;bottom:0;left:0;border-left:240px solid #e8dad0;border-right:240px solid #e8dad0;border-bottom:160px solid #decbc0;border-top:160px solid transparent;border-bottom-left-radius:12px;border-bottom-right-radius:12px;z-index:2}.letter{position:absolute;bottom:15px;left:20px;width:440px;height:280px;background:#fff;border-radius:10px;padding:24px;box-sizing:border-box;box-shadow:0 4px 12px #0000001a;transition:transform .6s cubic-bezier(.4,0,.2,1),height .6s ease,z-index .6s;z-index:1;overflow-y:auto;cursor:default}.letter::-webkit-scrollbar{width:6px}.letter::-webkit-scrollbar-thumb{background:#e0d0c1;border-radius:4px}.letter::-webkit-scrollbar-thumb:hover{background:#c5b2a0}.letter-content{color:#333;text-align:center;font-size:1.05rem;line-height:1.6}.letter-content h2{color:#e65c00;margin-top:0;margin-bottom:16px;font-size:1.5rem}.letter-content p{margin-bottom:14px}.signature{margin-top:20px;font-weight:600}.envelope-wrapper.open .flap{transform:rotateX(180deg);z-index:0}.envelope-wrapper.open .letter{transform:translateY(-200px);height:380px;z-index:4}.hint{margin-top:40px;color:#777;font-size:.95rem;-webkit-user-select:none;user-select:none}