:root{--ink: #3f3f3f;--ink-soft: rgba(63, 63, 63, .25);--paper: #f9f7f4;--teal-1: #16b3a4;--teal-2: #6ac7c0;--red: #f74f5e;--page-radius: 6px;--shadow-card: 2px 4px 7px rgba(0, 0, 0, .15);--shadow-page: 2px 4px 4px rgba(0, 0, 0, .1);--font: "Avenir Next", Avenir, -apple-system, "Segoe UI", Helvetica, sans-serif;--track: -.21px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);color:var(--ink);letter-spacing:var(--track);background:var(--paper) url(../assets/bg-paper-tile.png) top left / 150px 150px repeat;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;touch-action:manipulation;user-select:none;-webkit-user-select:none}button{font-family:inherit;letter-spacing:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}#app{height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.topbar{position:relative;flex:none;height:56px;display:flex;align-items:center;justify-content:center;padding:0 24px;width:calc(var(--card-w, 100%) + 48px);max-width:100%;margin:0 auto}.brand{margin:0;font-size:20px;font-weight:600;color:var(--ink)}.icon-btn{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:34px;height:34px;margin-left:-8px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}.icon-btn:active{background:#3f3f3f14}.counter{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;opacity:0;transition:opacity .3s}.counter.is-visible{opacity:1}.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:2px 24px 10px}.card-box{position:relative;perspective:1800px;perspective-origin:50% 45%}.envelope{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background:var(--paper);border:10px solid #fff;border-radius:var(--page-radius);box-shadow:var(--shadow-card);cursor:pointer;will-change:transform}.stamp{position:absolute;top:4.9%;right:7.3%;width:21.1%;aspect-ratio:1}.stamp-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.stamp-logo{position:absolute;left:10%;top:10%;width:79.1%;height:79.1%;object-fit:cover;border:.3px solid #94d2cd;border-radius:1px}.version-2 .stamp--v2,.version-3 .stamp--v2{top:4.7%;right:5.4%;width:35.5%;aspect-ratio:632 / 400;animation:stamp-drift 3.8s ease-in-out 1.1s infinite;transform-origin:77% 50%}.stamp-v2-logo,.stamp-v2-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.stamp-v2-logo{z-index:0}.stamp-v2-frame{z-index:1}@keyframes stamp-drift{0%,to{transform:rotate(-.35deg) translateY(0)}50%{transform:rotate(.35deg) translateY(-1.5px)}}.from{position:absolute;top:40.4%;left:0;right:0;text-align:center;font-weight:600;color:var(--ink);pointer-events:none}.from-label{font-size:15px;line-height:35px}.from-name{font-size:24px;line-height:35px}.open-btn{position:absolute;top:74%;left:50%;transform:translate(-50%);width:153px;height:44px;border-radius:100px;background:linear-gradient(19.73deg,#16b3a4 42.95%,#6ac7c0);color:#fff;font-size:15px;font-weight:600;box-shadow:0 4px 10px #16b3a447;transition:transform .12s ease,box-shadow .12s ease,opacity .18s ease}.open-btn:active{transform:translate(-50%) scale(.96);box-shadow:0 3px 8px #16b3a44d}.book{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;transform-style:preserve-3d;visibility:hidden;will-change:transform}.leaf{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;transform-style:preserve-3d;will-change:transform}.face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--page-radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:var(--shadow-page)}.face--front{transform:rotateY(0) translateZ(.02px)}.face--back{transform:rotateY(180deg) translateZ(.02px);background:linear-gradient(to right,#0000000b,#0000 14%),#fbfaf7 url(../assets/bg-paper-tile.png) top left / 150px 150px repeat;box-shadow:none}.version-2 .face--back{background:#f5f5f3;box-shadow:inset -1px 0 #3f3f3f0f}.version-3 .face--back{background:#fff;box-shadow:none}.shade{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none}.shade--front{background:linear-gradient(to right,#0000004d,#0000 62%)}.shade--back{background:linear-gradient(to left,#00000038,#0000 58%)}.under-shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;border-radius:var(--page-radius);background:linear-gradient(to right,#00000047,#00000005 55%,#0000 75%);opacity:0;pointer-events:none}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.page-cover .cover-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.hand-hint{position:absolute;right:-2.5%;bottom:-1%;width:14.7%;transform-origin:32% 18%;animation:tap-pulse 1.7s cubic-bezier(.45,0,.3,1) infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));transition:opacity .3s}.hand-hint.is-hidden{opacity:0}.version-2 .book>.hand-hint,.version-3 .book>.hand-hint{z-index:90;pointer-events:none}@keyframes tap-pulse{0%,to{transform:scale(1)}32%{transform:scale(.8)}55%{transform:scale(1.06)}72%{transform:scale(1)}}.page-message img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.page-gift{background:#fff}.gift-card-img{position:absolute;left:9.8%;top:8.2%;width:80.4%;border-radius:13px;box-shadow:2px 4px 8px #00000026;display:block}.gift-amount{position:absolute;top:46.2%;left:0;right:0;text-align:center;color:var(--red);font-weight:700;font-size:40px;line-height:35px}.gift-amount .currency{font-size:26px}.gift-brand{position:absolute;top:58.2%;left:0;right:0;text-align:center;font-size:16px;font-weight:500;line-height:35px}.gift-open{position:absolute;top:78.8%;left:50%;transform:translate(-50%);width:38%;height:9%;border:1.5px solid var(--ink);border-radius:22px;font-size:13px;font-weight:600;background:#fff;transition:transform .12s ease}.gift-open:active{transform:translate(-50%) scale(.95)}.page-reply{background:var(--teal-2);border-radius:10px;display:flex;flex-direction:column;padding:5% 4.6% 4.6%}.face--front:has(.page-reply){border-radius:10px}.reply-title{text-align:center;color:#fff;font-size:22px;font-weight:600;padding:2.2% 0 4.6%;flex:none}.reply-from,.reply-text{font-family:inherit;letter-spacing:inherit;border:none;outline:none;background:#fdfdfc;border-radius:14px;color:var(--ink);font-size:17px;font-weight:500;padding:15px 17px;width:100%;-webkit-user-select:text;user-select:text}.reply-from{flex:none;height:54px}.reply-text{flex:1;min-height:0;resize:none;margin-top:12px;line-height:1.45}.reply-from::placeholder,.reply-text::placeholder{color:#bcbcbc;font-weight:500}.reply-actions{flex:none;display:flex;gap:15px;margin-top:16px}.reply-actions button{flex:1;height:44px;border-radius:22px;font-size:15px;font-weight:600;transition:transform .12s ease,background .15s}.btn-skip{border:1px solid rgba(255,255,255,.95);color:#fff}.btn-skip:active{transform:scale(.96);background:#ffffff1f}.btn-send{background:#fff;color:var(--ink)}.btn-send:active{transform:scale(.96)}.reply-done{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px;background:var(--teal-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;transition:opacity .3s ease}.reply-done.is-visible{opacity:1;pointer-events:auto}.done-text{color:#fff;font-size:20px;font-weight:600}.bottombar{position:relative;flex:none;height:64px;width:calc(var(--card-w, 100%) + 48px);max-width:100%;margin:0 auto}.footer-set{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}.footer-set.is-active{opacity:1;transform:none;pointer-events:auto}.made-with{font-size:13px;font-weight:600}.pill-btn{display:flex;align-items:center;justify-content:center;width:111px;height:40px;border:1px solid var(--ink-soft);border-radius:21px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;transition:transform .12s ease,background .15s}.pill-btn:active{transform:scale(.96);background:#3f3f3f0f}.footer--hint{justify-content:center;gap:7px;font-size:13px;font-weight:600}.hint-chevron{animation:chevron-bob 1.6s ease-in-out infinite}@keyframes chevron-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.ghost-btn{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--ink);padding:8px 4px;transition:transform .12s ease,opacity .15s}.ghost-btn:active{transform:scale(.95);opacity:.7}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000047;opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}.drawer-scrim.is-open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;left:0;bottom:0;width:264px;background:#fff;z-index:91;padding:calc(env(safe-area-inset-top) + 28px) 28px 28px;transform:translate(-102%);transition:transform .3s cubic-bezier(.25,.7,.3,1);box-shadow:4px 0 24px #0000001f;display:flex;flex-direction:column;gap:4px}.drawer.is-open{transform:translate(0)}.drawer-title{font-size:20px;font-weight:600;margin-bottom:18px}.drawer a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:12px 0;border-bottom:1px solid rgba(63,63,63,.08)}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translate(-50%,10px);background:#3f3f3ff2;color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:22px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:95;max-width:80vw;text-align:center}.toast.is-visible{opacity:1;transform:translate(-50%)}.confetti-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:70;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;width:var(--piece-w, 7px);height:var(--piece-h, 11px);border-radius:var(--piece-radius, 2px);background:var(--piece-color, var(--teal-1));box-shadow:0 1px 1px #00000014;will-change:transform,opacity}.version-2 .book{transform-origin:50% 72%}.version-3 .book{transform-origin:50% 70%}.version-2 .open-btn,.version-3 .open-btn{box-shadow:0 6px 18px #16b3a452}.shake{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@media(prefers-reduced-motion:reduce){.hand-hint,.hint-chevron,.version-2 .stamp--v2,.version-3 .stamp--v2{animation:none}.confetti-layer{display:none}}