:root{--ink:#5a2840;--rose:#d9617f;--blush:#fbd3dc;--cream:#fff6ee;--lav:#e6dafa;--gold:#c79a55;--peach:#ffd8c5}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 Nunito,system-ui,sans-serif;color:var(--ink);background:linear-gradient(160deg,#fff0f3,var(--cream) 45%,#f2e9fc);min-height:100vh;overflow-x:hidden}
#bg,#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}#bg{z-index:0}#fx{z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 20s ease-in-out infinite alternate}
.b1{width:55vmax;height:55vmax;background:var(--blush);top:-18vmax;left:-14vmax}.b2{width:50vmax;height:50vmax;background:var(--lav);right:-16vmax;bottom:-12vmax}.b3{width:30vmax;height:30vmax;background:var(--peach);top:40%;left:35%;opacity:.35}
@keyframes drift{to{transform:translate(6vw,8vh) scale(1.15)}}
.f{position:absolute;top:-40px;opacity:.85;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),115vh) rotate(360deg)}}
main{position:relative;z-index:2;max-width:980px;margin:auto;padding:0 18px 90px}
section{padding:54px 0}.center{text-align:center}.small{font-size:.85rem;opacity:.75}.hand{font-family:Caveat,cursive;font-size:1.7rem;margin:.2em 0}.big{font-size:2rem}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.15;margin:.2em 0 .5em}h1{font-size:clamp(2.4rem,9vw,4.6rem)}h2{font-size:clamp(1.7rem,6vw,2.5rem);text-align:center}h3{font-size:1.2rem}
.hero,.lock{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0}
.lockico{font-size:5.5rem;filter:drop-shadow(0 10px 25px #d9617f66);animation:bob 3s ease-in-out infinite}.lockico.pop{animation:pop .9s}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes pop{40%{transform:scale(1.6) rotate(-8deg)}}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(440px,100%);margin:22px 0}
.cd div{background:#fffd;border:1px solid #fff;border-radius:18px;padding:12px 4px;box-shadow:0 8px 28px #d9617f26}.cd b{display:block;font:600 2rem Fraunces,serif;color:var(--rose)}.cd span{font-size:.75rem}
.card{background:#fffc;backdrop-filter:blur(6px);border:1px solid #fff;border-radius:26px;box-shadow:0 14px 44px #d9617f2e;padding:26px;max-width:640px;margin:0 auto}
.btn{font:700 1rem Nunito,sans-serif;color:#fff;background:linear-gradient(135deg,#e8809b,var(--rose));border:0;border-radius:999px;padding:13px 26px;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 8px 22px #d9617f55;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}.btn.ghost{background:#fff;color:var(--rose);box-shadow:0 4px 14px #d9617f33}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}
.env{position:relative;display:block;width:min(300px,86%);height:190px;margin:22px auto 6px;border:0;border-radius:12px;background:linear-gradient(#f6bccb,#efa3b8);box-shadow:0 14px 34px #d9617f55;cursor:pointer;perspective:600px}
.env .flap{position:absolute;inset:0 0 auto;height:105px;background:#ec93ab;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s;border-radius:12px 12px 0 0}.env.open .flap{transform:rotateX(180deg);background:#f7c9d5}
.seal{position:absolute;left:50%;top:78px;transform:translateX(-50%);font-size:2rem;transition:opacity .4s}.env.open .seal{opacity:0}
.letter{margin-top:26px;font-size:1.08rem;background:#fffdf7 repeating-linear-gradient(transparent 0 31px,#f3dfe4 31px 32px);animation:rise .9s both}.letter p{margin:0 0 1em}.sign{white-space:pre-line;text-align:right}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.gal{column-count:2;column-gap:16px}@media(min-width:760px){.gal{column-count:3}}
.pol{display:block;width:100%;break-inside:avoid;margin:0 0 20px;padding:10px 10px 12px;background:#fff;border:0;border-radius:6px;box-shadow:0 10px 28px #5a284038;cursor:zoom-in;transform:rotate(var(--r));transition:transform .3s;text-align:center;font:inherit;color:var(--ink)}
.pol:hover{transform:rotate(0) scale(1.03)}.pol img{width:100%;height:auto;display:block;border-radius:3px;background:var(--blush);min-height:80px}.pol span{display:block;font:600 1.2rem Caveat,cursive;margin-top:8px;line-height:1.2}
.lb{position:fixed;inset:0;z-index:50;background:#2a0f1ae6;display:flex;align-items:center;justify-content:center;padding:14px}.lb figure{margin:0;text-align:center;color:#fff;max-width:min(92vw,900px)}.lb img{max-width:100%;max-height:78vh;border-radius:8px}.lb figcaption{font:1.5rem Caveat,cursive;margin-top:8px}
.lb button{position:absolute;background:#fff3;color:#fff;border:0;border-radius:50%;width:46px;height:46px;font-size:1.6rem;cursor:pointer}.lb .x{top:14px;right:14px}.lb .pv{left:10px}.lb .nx{right:10px}
.cake{width:min(300px,78vw);overflow:visible}.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flick .25s ease-in-out infinite alternate;transition:opacity .5s,transform .5s}@keyframes flick{to{transform:scale(1.08,.92) rotate(3deg)}}
.cake.off .fl{opacity:0;transform:scale(.2);animation:none}.sm{opacity:0}.cake.off .sm{animation:smoke 2.4s ease-out}@keyframes smoke{from{opacity:.7;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}
.tl{list-style:none;margin:0 auto;padding:0 0 0 22px;max-width:640px;border-left:3px dotted var(--rose)}.tl li{position:relative;background:#fffc;border-radius:18px;padding:14px 18px;margin:0 0 18px;box-shadow:0 8px 24px #d9617f26}.tl li::before{content:"💗";position:absolute;left:-36px;top:12px;font-size:1.1rem}.tl b{color:var(--rose);font-size:.9rem}.tl p{margin:0}
.rs{font:italic 500 1.35rem Fraunces,serif;min-height:4.8em;display:flex;align-items:center;justify-content:center}
.opt{display:block;width:100%;margin:8px 0;padding:12px;border:2px solid var(--blush);background:#fff;border-radius:14px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}.opt:hover:not(:disabled){border-color:var(--rose)}.opt.good{background:#d9f5df;border-color:#6cc383}.opt.bad{background:#ffe0e0;border-color:#e68a8a}
.two{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:flex-start}.two .card{width:min(300px,100%);text-align:center}.emoji{font-size:4rem;background:none;border:0;cursor:pointer;animation:bob 3s ease-in-out infinite}.emoji.on{animation:pop .8s}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}html{scroll-behavior:auto}}