html.gate-locked{overflow:hidden}html.gate-locked body>header,html.gate-locked body>main,html.gate-locked body>footer{visibility:hidden}#entry-gate{position:fixed;inset:0;z-index:9999;background:radial-gradient(ellipse at 30% 20%,#e4eade,#f7f3ec 65%);display:grid;place-items:center;padding:24px;color:#34493e}#entry-gate[hidden]{display:none}.gate-letter{width:min(560px,100%);text-align:center;background:#fffdf8;padding:32px 20px 22px;border:1px solid #dfdfd2;border-radius:12px;box-shadow:0 24px 80px #34493e18}.gate-letter small{letter-spacing:.2em;color:#7e8d7e;font-size:10px}.gate-letter h1{font-size:clamp(25px,6vw,36px);margin:14px 0}.gate-letter p{font-size:13px;color:#778176}.gate-field{height:260px;position:relative;margin:22px 0;background:linear-gradient(155deg,#f0ecdf 49.5%,#e8e4d6 50%,#f4f0e6 50.5%);border:1px solid #e3dece;border-radius:8px;overflow:hidden}.gate-target{position:absolute;width:82px;height:96px;border:2px dashed #8a9c88;border-radius:8px;transform:translate(-50%,-50%);display:grid;place-items:center;font-size:12px;color:#75886f}.gate-stamp{position:absolute;left:18%;top:72%;width:64px;height:78px;transform:translate(-50%,-50%) rotate(-8deg);background:#698574;color:#fffdf3;border:5px dotted #f4f0e6;box-shadow:0 5px 10px #314a3920;cursor:grab;touch-action:none;user-select:none;font-size:25px;border-radius:2px}.gate-stamp:focus-visible{outline:3px solid #d0a76e;outline-offset:5px}.gate-stamp:active{cursor:grabbing}.gate-letter.is-opening{animation:gate-open .6s ease forwards}#gate-message{min-height:24px}#gate-retry{font-size:12px;background:none;border:0;text-decoration:underline;color:#607660;cursor:pointer}.gate-help{font-size:11px!important}#album-lock{white-space:nowrap}@keyframes gate-open{to{opacity:0;transform:translateY(-20px) scale(1.035)}}@media(prefers-reduced-motion:reduce){.gate-letter.is-opening{animation:none;opacity:0}}@media(max-width:480px){.gate-letter{padding:26px 12px 16px}.gate-field{height:230px}.gate-target{width:68px;height:84px}.gate-stamp{width:56px;height:68px}}
/* Quiet envelope entrance; drop destination appears only while interacting. */
#entry-gate{padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow:auto;background:radial-gradient(ellipse at 15% 10%,#e5eadd 0,transparent 55%),#f5f2eb}
.gate-letter{box-sizing:border-box;width:min(640px,100%);padding:52px 44px 30px;border:0;border-radius:4px;background:#fffdf9;box-shadow:0 28px 90px #3645370d,0 2px 8px #36453708}
.gate-letter small{font-size:10px;letter-spacing:.32em}.gate-letter h1{font-weight:500;letter-spacing:.06em;font-size:clamp(26px,4.5vw,36px);line-height:1.5;margin:22px 0 8px}.gate-letter p{letter-spacing:.06em;font-size:12px;color:#92988b;line-height:1.8}
.gate-field{height:auto;aspect-ratio:1.75;margin:40px 0 12px;border-radius:3px;border:1px solid #e5e0d2;background:linear-gradient(145deg,transparent 49.5%,#dbd6c64d 50%,transparent 50.5%),linear-gradient(215deg,#eee9dd 49.5%,#e2dccb 50%,#f1ecdf 50.5%);box-shadow:0 10px 24px #6459440a}
.gate-target{width:78px;height:90px;border:0;background:radial-gradient(ellipse,#a3b49b33,transparent 70%);opacity:0;transition:opacity .25s ease}.is-interacting .gate-target{opacity:1}
.gate-stamp{background:#748773;border-color:#f1ecdf;width:62px;height:76px;box-shadow:0 7px 16px #36453720;transition:box-shadow .2s ease}.gate-stamp:active{box-shadow:0 12px 22px #36453730}
#gate-message:empty{display:none}#gate-message{margin:14px 0 0;color:#9a6452;font-size:12px}#gate-retry[hidden]{display:none}
@media(max-width:600px){.gate-letter{padding:36px 22px 26px}.gate-field{margin-top:30px;aspect-ratio:1.35}.gate-letter h1{font-size:27px}.gate-stamp{width:56px;height:68px}.gate-target{width:64px;height:78px}header{flex-wrap:wrap;gap:12px}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}#album-lock{font-size:11px;padding-inline:10px}}
@media(max-width:360px){#entry-gate{padding:14px}.gate-letter{padding:30px 16px 22px}.gate-letter h1{font-size:24px}.gate-field{aspect-ratio:1.2}}
@media(max-height:540px) and (min-width:601px){.gate-letter{padding:20px 32px 16px;max-width:500px}.gate-letter h1{font-size:26px;margin:8px 0}.gate-field{margin-top:16px;max-height:200px}}
/* Postal keepsakes: decorative elements do not intercept drag gestures. */
.gate-letter{position:relative}.gate-letter:before{content:'';position:absolute;left:calc(50% - 42px);top:-12px;width:84px;height:25px;background:#d7dfc985;transform:rotate(-4deg);box-shadow:inset 0 0 0 1px #c9d3bd44;pointer-events:none}
.gate-target{width:82px;height:82px;box-sizing:border-box;border:3px double #74816c88;border-radius:50%;opacity:.82;background:none;display:flex;flex-direction:column;justify-content:center;gap:3px;transform:translate(-50%,-50%) rotate(-12deg);color:#6f7d65;pointer-events:none;z-index:2}.gate-target:after{content:'';position:absolute;left:92%;top:28%;width:42px;height:28px;background:repeating-linear-gradient(0deg,transparent 0 6px,#7b876e66 6px 7px);transform:rotate(-4deg)}.gate-target span{font-size:6px;letter-spacing:1px}.gate-target b{font-weight:400;font-size:24px;line-height:1}.gate-target small{font-size:5px;letter-spacing:1px}.is-interacting .gate-target{opacity:1;box-shadow:0 0 24px #a3b49b44}
.gate-stamp{z-index:5}.gate-address,.gate-airmail,.gate-keepsake,.gate-flower,.gate-faux-seal{position:absolute;pointer-events:none;user-select:none}.gate-address{left:13%;top:15%;width:37%;text-align:left;color:#8a8b7d}.gate-address span{font-size:7px;letter-spacing:1.2px}.gate-address i{display:block;border-bottom:1px solid #96968244;width:100%;margin-top:12px}.gate-address i:nth-of-type(2){width:72%}.gate-address em{display:block;font-family:Georgia,serif;font-size:13px;margin-top:12px;color:#8c907b}.gate-airmail{right:8%;bottom:12%;font-size:7px;letter-spacing:1.2px;border:1px solid #8394a377;color:#7e8d9a;padding:5px 8px;transform:rotate(-5deg)}.gate-keepsake{left:42%;bottom:9%;width:88px;padding:10px 5px;background:#ece4c8b3;color:#929076;font:italic 12px/1.5 Georgia,serif;transform:rotate(8deg);box-shadow:1px 3px 6px #655b4010}.gate-flower{left:5%;top:40%;font-size:30px;color:#a29b7b77;transform:rotate(-20deg)}.gate-faux-seal{right:8%;bottom:31%;width:62px;height:28px;border:1px solid #ad968759;color:#a58d7c88;font-size:6px;letter-spacing:1px;line-height:1.7;transform:rotate(9deg);display:grid;align-content:center}
@media(max-width:600px){.gate-target{width:68px;height:68px}.gate-target:after{width:24px}.gate-target span{font-size:5px;letter-spacing:.4px}.gate-target small{font-size:4px;letter-spacing:.5px}.gate-target b{font-size:21px}.gate-keepsake{width:68px;font-size:10px;left:40%}.gate-address{left:10%;width:40%;top:12%}.gate-address span{font-size:6px;letter-spacing:.5px}.gate-address em{font-size:11px}.gate-airmail{font-size:5px;right:6%;padding:4px 5px}.gate-faux-seal{right:6%;width:52px}.gate-flower{font-size:24px}}

/* Keep the postmark flat in every interaction state. */
.gate-target,.is-interacting .gate-target{box-shadow:none;background:none;transition:none;opacity:.82;filter:none}

/* Postmark is present from the first frame; interaction never changes its appearance. */
#gate-target,#gate-field.is-interacting #gate-target{opacity:1;visibility:visible;animation:none;transition:none;box-shadow:none;background:none;filter:none}