/* A private little doorstep before the letter. */
html.gate-locked,html.gate-locked body{overflow:hidden}
html.gate-locked .header,html.gate-locked main,html.gate-locked footer{visibility:hidden}
.secret-gate{--gate-ink:#284742;--gate-mint:#4d9583;--gate-lilac:#dcd1e8;position:fixed;inset:0;z-index:999;display:grid;place-items:center;overflow:auto;padding:24px;background:radial-gradient(circle at 11% 13%,#beded2 0 2px,transparent 3px),radial-gradient(circle at 92% 79%,#d99c69 0 2px,transparent 3px),linear-gradient(125deg,#e2eee4 0 48%,#eee5f1 48% 100%);background-size:39px 39px,51px 51px,auto;color:var(--gate-ink)}
.secret-gate[hidden]{display:none!important}
.gate-stage{position:relative;width:min(980px,100%);min-height:610px;display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid #b8c7b9;border-radius:28px 7px 35px 9px;background:#f9f5e9;box-shadow:0 28px 65px #365b5030,10px 12px 0 #587b6d12;overflow:hidden;isolation:isolate}
.gate-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 8px #fff8e8aa}
.gate-stage::after{content:"PRIVATE LITTLE MAIL • 03 / 14 • PRIVATE LITTLE MAIL • 03 / 14";position:absolute;left:0;right:0;bottom:0;padding:10px 22px;border-top:1px dashed #aeb9a7;background:#edf0e3;color:#84927d;font:8px monospace;letter-spacing:3px;text-align:center;white-space:nowrap;overflow:hidden}
.gate-collage{position:relative;min-height:610px;background:linear-gradient(160deg,#d8e9df,#e7deee);overflow:hidden}
.gate-collage::before{content:"✦\A 39";white-space:pre;position:absolute;left:28px;top:27px;color:#528678;font:italic 30px/1.15 Georgia;letter-spacing:3px;z-index:4}
.gate-collage::after{content:"A LITTLE SECRET FOR YOU";position:absolute;left:-46px;bottom:92px;rotate:-90deg;color:#758c80;font:8px monospace;letter-spacing:3px;z-index:4}
.gate-photo-main{position:absolute;width:76%;left:13%;top:80px;margin:0;padding:12px 12px 42px;background:#fffdf6;border:1px solid #d9d7ca;box-shadow:8px 12px 23px #455f5425;rotate:-4deg}
.gate-photo-main::before{content:"";position:absolute;left:32%;top:-17px;width:39%;height:34px;background:#c0cfb6bb;rotate:7deg;clip-path:polygon(2% 4%,100% 0,97% 96%,0 100%)}
.gate-photo-main img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.gate-photo-main figcaption{position:absolute;left:18px;bottom:12px;font:16px var(--serif,serif);color:#64746a}
.gate-sticker{position:absolute;z-index:3;width:100px;height:100px;object-fit:cover;border:7px solid #fffdf6;border-radius:50%;box-shadow:2px 8px 16px #344f442c}
.gate-sticker.wink{right:3%;top:55px;rotate:9deg}.gate-sticker.heart{left:4%;bottom:61px;rotate:-9deg}
.gate-note{position:absolute;z-index:4;right:8%;bottom:64px;padding:15px 21px;background:#f1d69e;color:#725b44;font:18px/1.45 var(--serif,serif);box-shadow:3px 5px 0 #9f7c5615;rotate:5deg}
.gate-panel{position:relative;display:flex;align-items:center;padding:64px 70px 76px;background:radial-gradient(#758d7c13 .75px,transparent .75px);background-size:6px 6px}
.gate-panel::before{content:"";position:absolute;top:25px;right:30px;width:83px;height:83px;border:2px dashed #9b7b64;border-radius:50%;rotate:12deg}
.gate-panel::after{content:"SPECIAL\A DELIVERY\A ♡ 39";white-space:pre;position:absolute;top:42px;right:48px;text-align:center;color:#98735e;font:8px/1.55 monospace;letter-spacing:1px;rotate:12deg}
.gate-card{width:100%;max-width:430px;margin:auto}
.gate-kicker{display:inline-flex;gap:9px;align-items:center;margin:0 0 19px;padding:6px 11px;background:#e1e9d8;border:1px solid #cdd7c4;color:#70836b;font:9px monospace;letter-spacing:2px;rotate:-2deg}
.gate-card h1{margin:0 0 13px;font:700 clamp(31px,4vw,48px)/1.45 var(--serif,serif);letter-spacing:1px}.gate-card h1 span{position:relative;color:var(--gate-mint);white-space:nowrap}.gate-card h1 span::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:2px;height:9px;background:#aacebb7d;rotate:-2deg}
.gate-copy{margin:0 0 29px;color:#738078;font:15px/2 var(--serif,serif)}
.gate-form{position:relative;padding:24px 25px 23px;border:1px solid #ccd4c4;border-radius:8px;background:#fffdf5;box-shadow:5px 6px 0 #b8c9b62e}
.gate-label{display:flex;justify-content:space-between;gap:14px;font-size:11px;color:#718073;letter-spacing:1px}.gate-label small{font:9px monospace;color:#a09383}
.gate-input-wrap{position:relative;margin:14px 0 18px}
.gate-input{width:100%;height:64px;border:1px solid #adbeaa;border-radius:5px;background:#f4f7ec;color:#31584e;font:34px/1 monospace;letter-spacing:17px;text-align:center;padding:0 7px 0 23px;caret-color:#d78b54;box-shadow:inset 0 2px 4px #52694e0a}
.gate-input:focus{outline:3px solid #e0b27f6e;outline-offset:3px;border-color:#709982}
.gate-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px;pointer-events:none;opacity:0}.gate-dots i{width:11px;height:11px;border:1px solid #7b998a;border-radius:50%;background:#fff}.gate-dots i.filled{background:#4b8c7b;box-shadow:0 0 0 4px #cfe0d5}
.gate-actions{display:flex;gap:11px;align-items:stretch}.gate-submit{flex:1;min-height:49px;border:0;border-radius:5px;background:#397b6c;color:#fffdf5;font-weight:650;letter-spacing:1px;box-shadow:3px 4px 0 #245d5040;cursor:pointer}.gate-submit:hover{background:#2f695d;translate:0 -2px}.gate-clear{width:49px;border:1px dashed #a9b6a3;border-radius:5px;background:#f2efe5;color:#718171;cursor:pointer}
.gate-hint{display:flex;align-items:center;gap:8px;margin:16px 2px 0;color:#8b8f7d;font:12px var(--serif,serif)}.gate-hint::before{content:"✧";color:#c77d49;font-size:18px}
.gate-status{min-height:22px;margin:11px 0 -9px;color:#af5f54;font-size:11px}.gate-form.is-wrong{animation:gate-shake .42s}.gate-form.is-correct{border-color:#68a28e;background:#eef6ea}.gate-form.is-correct .gate-status{color:#397b68}
.gate-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.gate-sparkles i{position:absolute;color:#b88658;font-style:normal;animation:gate-twinkle 3.8s ease-in-out infinite}.gate-sparkles i:nth-child(1){left:5%;top:18%}.gate-sparkles i:nth-child(2){right:4%;top:34%;animation-delay:-1s}.gate-sparkles i:nth-child(3){right:10%;bottom:12%;animation-delay:-2s}.gate-sparkles i:nth-child(4){left:47%;bottom:6%;animation-delay:-3s}
.secret-gate.is-leaving{animation:gate-leave .8s cubic-bezier(.45,0,.2,1) both}.secret-gate.is-leaving .gate-stage{animation:gate-open .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes gate-shake{20%{translate:-7px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:5px 0}}
@keyframes gate-twinkle{0%,100%{opacity:.25;scale:.8;rotate:0deg}50%{opacity:.9;scale:1.2;rotate:25deg}}
@keyframes gate-open{to{transform:perspective(900px) rotateX(-7deg) translateY(-35px);opacity:.25}}
@keyframes gate-leave{to{opacity:0;visibility:hidden}}
@media(max-width:760px){.secret-gate{padding:12px}.gate-stage{display:block;min-height:0;border-radius:22px 7px 28px 9px}.gate-collage{min-height:250px}.gate-photo-main{width:47%;left:9%;top:33px;padding:7px 7px 26px}.gate-photo-main figcaption{font-size:11px;bottom:7px;left:10px}.gate-sticker{width:68px;height:68px;border-width:5px}.gate-sticker.wink{right:13%;top:25px}.gate-sticker.heart{left:auto;right:3%;bottom:25px}.gate-note{right:23%;bottom:20px;font-size:12px;padding:9px 13px}.gate-collage::before{left:21px;top:17px;font-size:18px}.gate-panel{padding:31px 24px 58px}.gate-panel::before,.gate-panel::after{display:none}.gate-card h1{font-size:30px}.gate-copy{font-size:13px;margin-bottom:19px}.gate-form{padding:19px}.gate-input{height:57px;font-size:29px}.gate-stage::after{font-size:6px;letter-spacing:2px;padding:8px}.gate-kicker{margin-bottom:12px}}
@media(max-width:390px){.gate-collage{min-height:210px}.gate-photo-main{top:26px}.gate-note{right:18%;bottom:15px}.gate-sticker.heart{bottom:17px}.gate-panel{padding:24px 17px 52px}.gate-card h1{font-size:27px}.gate-copy{line-height:1.7}.gate-form{padding:16px}.gate-label small{display:none}}
@media(prefers-reduced-motion:reduce){.gate-sparkles i,.secret-gate.is-leaving,.secret-gate.is-leaving .gate-stage,.gate-form.is-wrong{animation:none!important}.gate-submit:hover{translate:none}}