:root{--bg:#1B2A4A;--accent:#D4AF37;--cream:#FAF7F0;--ink:#1B2A4A;}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--cream);min-height:100vh;overflow-x:hidden;transition:background .6s}
.serif{font-family:'Playfair Display',serif}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}
.drift{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.drift span{position:absolute;color:var(--accent);opacity:.18;animation:drift linear infinite}
@keyframes drift{from{transform:translateY(110vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}
.paper{background:var(--cream);color:var(--ink);background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:4px 4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.foil{border:3px solid transparent;background:linear-gradient(var(--cream),var(--cream)) padding-box,linear-gradient(135deg,#f6e27a,var(--accent),#8a6d1d,#f6e27a,var(--accent)) border-box}
.gold-text{background:linear-gradient(135deg,#f6e27a,var(--accent),#8a6d1d);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,#f6e27a,var(--accent) 50%,#a8862a);color:#1b1b1b;font-weight:700;border-radius:999px;padding:.7rem 1.3rem;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:120%}
.btn-ghost{border:1.5px solid var(--accent);color:var(--accent);border-radius:999px;padding:.6rem 1.1rem;font-weight:700}
.envelope{width:min(340px,85vw);height:220px;position:relative;cursor:pointer;perspective:800px}
.env-body{position:absolute;inset:0;background:linear-gradient(160deg,#efe6cf,#d9cba5);border-radius:6px;box-shadow:0 30px 50px rgba(0,0,0,.5)}
.env-flap{position:absolute;top:0;left:0;right:0;height:60%;background:linear-gradient(180deg,#e6d9b6,#cdbb8f);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s ease;z-index:3}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1}
.seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e27a,var(--accent) 50%,#7a5d12);display:flex;align-items:center;justify-content:center;font-size:30px;z-index:4;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:opacity .4s}
.envelope.open .seal{opacity:0}
.tassel{display:inline-block;transform-origin:top center}
.seal:hover .tassel{animation:swing 1s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.flip{background:linear-gradient(180deg,#24365c 50%,#1d2d4d 50%);border:1px solid rgba(212,175,55,.4);border-radius:10px;position:relative}
.flip::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5)}
.note{transition:transform .2s}
.note:hover{transform:rotate(0) scale(1.04)!important}
.masonry{columns:2 160px;column-gap:14px}
.masonry>div{break-inside:avoid;margin-bottom:14px}
.watermark{font-size:clamp(9rem,40vw,16rem);line-height:1;opacity:.13;user-select:none;cursor:pointer}
input,textarea,select{background:rgba(255,255,255,.07);border:1px solid rgba(212,175,55,.35);border-radius:10px;padding:.6rem .8rem;color:inherit;width:100%;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
.paper input,.paper textarea,.paper select{background:#fff;color:var(--ink)}
.cap-rain{position:fixed;top:-50px;font-size:32px;z-index:55;animation:fall linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}