: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:linear-gradient(to left,#2d2d2d1c,#2d2d2d0b 4%,#2d2d2d00 16%),linear-gradient(to top,#2d2d2d06,#2d2d2d00 10%),#f5f5f3;box-shadow:inset -1px 0 #3f3f3f12,inset 0 -1px #3f3f3f06}.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}.card-box>.hand-hint{z-index:100;pointer-events:none;will-change:transform,opacity}@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-4 .envelope-fragment{z-index:60;pointer-events:none;cursor:default;box-shadow:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}.version-4 .envelope-fragment--left{transform-origin:48% 50%;-webkit-clip-path:polygon(0 0,53% 0,48% 14%,55% 26%,49% 39%,54% 52%,47% 65%,53% 78%,49% 90%,54% 100%,0 100%);clip-path:polygon(0 0,53% 0,48% 14%,55% 26%,49% 39%,54% 52%,47% 65%,53% 78%,49% 90%,54% 100%,0 100%)}.version-4 .envelope-fragment--right{transform-origin:52% 50%;-webkit-clip-path:polygon(53% 0,100% 0,100% 100%,54% 100%,49% 90%,53% 78%,47% 65%,54% 52%,49% 39%,55% 26%,48% 14%);clip-path:polygon(53% 0,100% 0,100% 100%,54% 100%,49% 90%,53% 78%,47% 65%,54% 52%,49% 39%,55% 26%,48% 14%)}.tear-flash{position:absolute;z-index:65;left:50%;top:-2%;width:12%;height:104%;pointer-events:none;background:linear-gradient(90deg,#fff0,#fff 42%,#fff 58%,#fff0);-webkit-clip-path:polygon(42% 0,68% 0,38% 14%,72% 26%,40% 39%,70% 52%,35% 65%,68% 78%,38% 90%,70% 100%,43% 100%,20% 90%,52% 78%,17% 65%,48% 52%,19% 39%,51% 26%,20% 14%);clip-path:polygon(42% 0,68% 0,38% 14%,72% 26%,40% 39%,70% 52%,35% 65%,68% 78%,38% 90%,70% 100%,43% 100%,20% 90%,52% 78%,17% 65%,48% 52%,19% 39%,51% 26%,20% 14%);filter:drop-shadow(0 0 7px rgba(255,255,255,.9));will-change:transform,opacity}.paper-shard{border:1px solid rgba(63,63,63,.07);box-shadow:0 2px 4px #3f3f3f1f}.launch-streak{position:absolute;width:var(--streak-w, 3px);height:var(--streak-h, 100px);border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--streak-color),rgba(255,255,255,0));transform-origin:50% 0;will-change:transform,opacity}.launch-ring{position:absolute;width:72%;aspect-ratio:1;border:2px solid rgba(22,179,164,.28);border-radius:50%;box-shadow:0 0 18px #6ac7c01f;will-change:transform,opacity}.version-2 .card-box{z-index:20}.version-2 .confetti-layer{z-index:10}.version-2 .book{transform-origin:50% 72%}.version-3 .book{transform-origin:50% 70%}.version-4 .book{transform-origin:50% 55%}.version-5 .card-box{z-index:20}.version-5 .confetti-layer{z-index:10}.version-5 .envelope{transform-origin:50% 68%}.version-5 .book{transform-origin:44% 82%}.shatter-tile{position:absolute;z-index:60;overflow:hidden;pointer-events:none;font-style:normal;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}.shatter-skin{position:absolute;display:block;background:var(--paper);border:10px solid #fff;border-radius:var(--page-radius)}.burst-flash{position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;z-index:64;pointer-events:none;background:radial-gradient(circle at 50% 46%,#fffffff2,#ffffff9e 30%,#fff0 66%);will-change:transform,opacity}.burst-ring{position:absolute;left:50%;top:46%;width:52%;aspect-ratio:1;z-index:63;pointer-events:none;border:2px solid rgba(255,255,255,.88);border-radius:50%;box-shadow:0 0 26px #16b3a457,inset 0 0 16px #ffffff73;will-change:transform,opacity}.version-6 .book{transform-origin:50% 86%}.version-7 .envelope{perspective:900px;perspective-origin:50% 0%}.version-7 .topbar{z-index:90}.version-7 .env-mouth{position:absolute;left:0;right:0;top:-1px;height:5%;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,#322e2857,#322e2800)}.version-7 .env-flap{position:absolute;left:0;right:0;top:0;height:38%;z-index:2;pointer-events:none;transform-origin:50% 0;background:linear-gradient(to bottom,#3f3f3f00 78%,#3f3f3f0e),linear-gradient(to bottom,#f4f0e9,#f9f7f4 58%,#fbf9f6);-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%);will-change:transform}.version-7 .from{z-index:3}.version-7 .stamp{z-index:4}.version-7 .open-btn{z-index:5}.env-glow{position:absolute;left:-20%;right:-20%;top:-28%;height:76%;z-index:36;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 64%,#ffffffeb,#ffeec480 26%,#6ac7c042 46%,#fff0 72%);will-change:opacity,transform}.card-sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:44%;z-index:52;pointer-events:none;opacity:0;background:linear-gradient(104deg,#fff0,#ffffff6b 44%,#ffffffd1,#ffffff61 60%,#fff0);will-change:transform,opacity}.sparkle{position:absolute;width:var(--sparkle-size, 12px);aspect-ratio:1;background:var(--sparkle-color, #fff);-webkit-clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 5px rgba(255,236,190,.85));will-change:transform,opacity}.shock-ring{position:absolute;aspect-ratio:1;border:2px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;box-shadow:0 0 22px #16b3a461;will-change:transform,opacity}.version-7 .book{transform-origin:50% 88%}.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,.shatter-tile,.burst-flash,.burst-ring,.env-glow,.card-sheen,.sparkle,.shock-ring{display:none}}