*{box-sizing:border-box} :root{--wine:#260d10;--pale:#f4ead7;--gold:#c8a66a} html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% 35%,#552328 0%,#260d10 58%,#160709 100%);color:var(--pale)} body{font-family:Montserrat,sans-serif;overflow-x:hidden}.scene{min-height:100svh;display:grid;place-items:center;padding:28px 16px}.envelope-wrap{width:min(92vw,560px);text-align:center;perspective:1400px}.envelope{position:relative;width:100%;aspect-ratio:1.48;transform-style:preserve-3d;filter:drop-shadow(0 28px 30px #0008)}.envelope-back,.envelope-front{position:absolute;inset:0;border:1px solid #a77e48;background:linear-gradient(145deg,#4a171d,#260d10 65%);border-radius:5px}.envelope-back:before{content:"";position:absolute;inset:12px;border:1px solid #9d794c;opacity:.65}.envelope-front{clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:linear-gradient(150deg,#5a2025,#351115);z-index:4}.envelope-front:after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.7%,#9b7448 50%,transparent 50.3%),linear-gradient(-35deg,transparent 49.7%,#9b7448 50%,transparent 50.3%);opacity:.45}.letter{position:absolute;z-index:2;left:6%;right:6%;top:5%;height:90%;background:var(--pale);color:#4a2923;transition:transform 1.35s cubic-bezier(.2,.75,.2,1),top 1.35s;overflow:auto}.letter-inner{padding:clamp(14px,4vw,30px) 16px 20px;text-align:center}.eyebrow,.details,.footer{font-size:8px;letter-spacing:2px}h1{font-family:"Cormorant Garamond",serif;font-size:clamp(36px,9vw,62px);font-weight:500;margin:9px 0 0;color:#57332b}h1 span{font-style:italic;color:#b18a51}.ornament{color:#b18a51;font-size:21px;margin:5px 0 12px}.ornament span{font-size:11px;padding:0 9px}.couple-portrait{width:min(78%,300px);margin:12px auto 15px;padding:6px;border:1px solid #b18a51;outline:1px solid #d7c39c;outline-offset:3px;background:#eee1c7}.couple-portrait img{display:block;width:100%;height:auto;object-fit:contain}.invite{font-family:"Cormorant Garamond",serif;font-size:clamp(17px,4.4vw,22px);margin:8px auto;max-width:380px}.story,.join{font-family:"Cormorant Garamond",serif;font-size:clamp(13px,3.4vw,16px);line-height:1.35;max-width:390px;margin:7px auto}.rule{width:70px;border-top:1px solid #b18a51;margin:12px auto 8px}.date{font-family:"Cormorant Garamond",serif;font-size:25px;letter-spacing:3px;margin:5px 0}.details{margin:3px 0 5px}.venue{font-family:"Cormorant Garamond",serif;font-size:22px;margin:0}.countdown{font-size:9px;letter-spacing:1px;margin:8px 0;color:#936d43}.footer{margin-top:9px}.seal{position:absolute;z-index:6;left:50%;top:55%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;border:1px solid #e1c58e;background:radial-gradient(circle at 35% 30%,#d5b87e,#8f6738 75%);color:#321317;box-shadow:0 3px 12px #0008;cursor:pointer;font-family:"Cormorant Garamond",serif;font-size:19px}.seal i{font-size:13px}.tap-hint{font-size:10px;letter-spacing:3px;color:#d7bd8b;margin-top:22px}.music-note{position:fixed;bottom:16px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:1px;color:#b99b70}.envelope.open .letter{top:-15%;transform:translateY(-28%) scale(1.05);z-index:5}.envelope.open .envelope-front{transform:rotateX(180deg);transform-origin:top;transition:transform 1s;z-index:1}.envelope.open .seal,.envelope.open~.tap-hint{opacity:0;pointer-events:none;transition:opacity .3s}@media(max-height:700px){.envelope-wrap{width:min(88vw,470px)}.letter-inner{padding-top:10px}.story,.join{line-height:1.15;margin:4px auto}.countdown{margin:4px 0}}