:root{--bg:#fff3f6;--bg2:#ffe0ea;--rose:#ff8fab;--deep:#e0567f;--blush:#ffc8d6;--paper:#fffaf5;--ink:#7a2e4a;--lilac:#b9a3ff;--butter:#ffd166;--muted:#b0708a;--display:"Fredoka",ui-rounded,system-ui,sans-serif;--hand:"Caveat","Segoe Script",cursive;--body:"Fredoka",ui-rounded,system-ui,sans-serif;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:radial-gradient(120% 70% at 50% 0%,var(--bg2),var(--bg) 65%) fixed;background-color:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;overflow-x:hidden;min-height:100vh}#sky{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;width:100%;height:100%}main{position:relative;z-index:1;max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:56px 96px;display:flex;flex-direction:column;gap:96px}section{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--deep);background:#fff;padding:6px 14px;border-radius:999px;box-shadow:0 4px 14px -6px #e0567f55}h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;line-height:1.1;color:var(--ink)}h1{font-size:clamp(2.6rem,11vw,4.6rem)}h2{font-size:clamp(1.8rem,6.5vw,2.6rem)}h3{font-size:1.15rem}.name{color:var(--deep);display:inline-block;white-space:nowrap}.name span{display:inline-block;animation:wave 2.2s ease-in-out infinite}@keyframes wave{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.wiggle{display:inline-block;animation:wig 1.8s ease-in-out infinite;transform-origin:50% 80%}@keyframes wig{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}p.lede{margin:0;max-width:34ch;line-height:1.6;color:var(--muted);font-size:1.05rem}.env{position:relative;width:min(300px,82vw);aspect-ratio:3/2;max-width:100%;cursor:pointer;border:0;background:none;padding:0;margin-top:12px;transition:transform .3s;animation:float 3.2s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px) rotate(1deg)}}.env:hover{animation-play-state:paused;transform:translateY(-6px) rotate(-2deg) scale(1.03)}.env:focus-visible{outline:3px dashed var(--deep);outline-offset:8px;border-radius:12px}.env:disabled{cursor:default;filter:grayscale(.5);opacity:.7;animation:none}.env .back{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffb3c6;border-radius:14px;box-shadow:0 24px 40px -20px #e0567f88}.env .front{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;overflow:hidden;background:linear-gradient(to top right,transparent 49.5%,var(--rose) 50%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49.5%,var(--rose) 50%) right/50% 100% no-repeat}.env .flap{position:absolute;left:0;right:0;top:0;height:60%;transform-origin:top;transition:transform .7s cubic-bezier(.6,0,.3,1);z-index:3}.env .flap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffd0dc;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:14px 14px 0 0}.env .seal{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a9c,#d63e6c);display:grid;place-items:center;color:#fff;font-size:1.6rem;z-index:4;box-shadow:0 4px 10px #d63e6c55;transition:opacity .3s;animation:beat 1.4s ease-in-out infinite}@keyframes beat{0%,to{transform:translate(-50%,-50%) scale(1)}15%{transform:translate(-50%,-50%) scale(1.15)}30%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.1)}}.env .stamp{position:absolute;right:12px;bottom:10px;font-size:1.3rem;z-index:2;transform:rotate(12deg)}.env.open{animation:none}.env.open .flap{transform:rotateX(180deg);z-index:0}.env.open .seal{opacity:0}.hint{font-family:var(--hand);font-size:1.6rem;color:var(--deep);animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-5px)}}.letter{background:var(--paper);color:var(--ink);border-radius:16px;padding:36px 28px;width:100%;text-align:left;font-family:var(--hand);font-size:1.6rem;line-height:1.45;box-shadow:0 30px 50px -28px #e0567f88;position:relative;border:2px solid #ffd6e0;background-image:repeating-linear-gradient(transparent 0 2.3rem,#ffdbe4 2.3rem,#ffdbe4 calc(2.3rem + 1px));background-position:0 1.7rem;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}.letter:before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;transform:translate(-50%) rotate(-3deg);background:repeating-linear-gradient(45deg,#ffc8d6cc 0,#ffc8d6cc 8px,#ffe3eacc 8px,#ffe3eacc 16px);border-radius:3px}.letter p{margin:0 0 .4em;white-space:pre-wrap}.letter .sign{text-align:right;margin-top:.6em;font-weight:700;color:var(--deep)}.caret:after{content:"|";animation:blink 1s steps(1) infinite;color:var(--deep)}@keyframes blink{50%{opacity:0}}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.card{position:relative;width:min(340px,100%);min-height:180px;background:#fff;border:2px solid #ffd6e0;border-radius:24px;padding:30px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px;box-shadow:0 18px 34px -22px #e0567f88}.card .num{font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--lilac);text-transform:uppercase}.card .txt{font-family:var(--display);font-weight:500;font-size:1.4rem;line-height:1.3;color:var(--ink);text-wrap:balance}.card .sticker{position:absolute;top:-18px;right:-10px;font-size:2.2rem;transform:rotate(14deg);filter:drop-shadow(0 4px 4px #e0567f33)}.card.flip{animation:flip .5s ease}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}button.btn{font-family:var(--body);font-weight:600;font-size:1.05rem;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;background:var(--deep);color:#fff;box-shadow:0 6px #b83a62,0 12px 20px -10px #e0567f;transition:transform .15s,box-shadow .15s,background .2s}button.btn:hover{background:#ec6690;transform:translateY(-2px)}button.btn:active{transform:translateY(4px);box-shadow:0 2px #b83a62}button.btn:focus-visible{outline:3px dashed var(--lilac);outline-offset:4px}button.btn:disabled{opacity:.6;cursor:default;transform:none}button.ghost{background:#fff;color:var(--muted);box-shadow:0 6px #f1c6d3}button.ghost:hover{background:#fff6f8}button.small{font-size:.9rem;padding:9px 18px;box-shadow:0 4px #b83a62}button.ghost.small{box-shadow:0 4px #f1c6d3}button.link{border:0;background:none;color:var(--deep);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}.coupons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;width:100%}.coupon{position:relative;overflow:hidden;font-family:var(--body);text-align:left;cursor:pointer;border:2px dashed var(--rose);border-radius:18px;padding:18px 18px 18px 64px;background:#fff;color:var(--ink);font-size:1rem;line-height:1.35;transition:transform .2s}.coupon:hover{transform:rotate(-1.5deg) scale(1.02)}.coupon:focus-visible{outline:3px dashed var(--lilac);outline-offset:3px}.coupon .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1.8rem}.coupon b{display:block;font-weight:600;font-size:1.08rem}.coupon small{color:var(--muted);font-size:.85rem}.coupon .used{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#fff3f6d9;font-family:var(--hand);font-weight:700;font-size:1.9rem;color:var(--deep)}.coupon .used span{border:3px solid var(--deep);border-radius:10px;padding:0 12px;transform:rotate(-10deg);animation:stampIn .35s cubic-bezier(.3,1.6,.5,1)}@keyframes stampIn{0%{transform:rotate(-10deg) scale(2.2);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:1}}.hug{width:140px;height:140px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fff,#ffd6e0);font-size:4rem;box-shadow:0 14px 30px -12px #e0567f99,inset 0 -6px #ffc2d1;transition:transform .15s}.hug:hover{transform:scale(1.05)}.hug:focus-visible{outline:3px dashed var(--lilac);outline-offset:6px}.hug.squish{animation:squish .45s ease}@keyframes squish{0%{transform:scale(1)}30%{transform:scale(1.25,.8)}60%{transform:scale(.9,1.12)}to{transform:scale(1)}}.hugcount{font-family:var(--hand);font-size:1.7rem;color:var(--deep);min-height:1.4em}.meter{width:min(380px,100%);display:flex;flex-direction:column;gap:14px}input[type=range]{width:100%;accent-color:var(--deep);height:28px}.meterlabels{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}.verdict{font-family:var(--hand);font-size:1.8rem;color:var(--deep);min-height:2.2em;line-height:1.1}.ask{position:relative;width:100%;min-height:150px;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}.dodge{transition:transform .25s ease}.yay{font-family:var(--display);font-weight:600;font-size:clamp(2rem,8vw,3rem);color:var(--deep);animation:pop .5s cubic-bezier(.3,1.6,.5,1)}.yay small{display:block;font-family:var(--hand);font-size:.6em;color:var(--lilac);margin-top:6px}footer{text-align:center;font-family:var(--hand);font-size:1.4rem;color:var(--muted)}.fromthem{font-family:var(--hand);font-size:1.6rem;color:var(--deep);line-height:1.2}.muted{color:var(--muted)}.panel{width:100%;background:#fffc;border:2px solid #ffd6e0;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;text-align:left;box-shadow:0 18px 34px -26px #e0567f88}.panel h3{display:flex;align-items:center;gap:8px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.end{justify-content:flex-end}.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;color:var(--muted)}input.inp,textarea.inp{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid #ffd6e0;border-radius:14px;padding:12px 14px;width:100%;outline:none;transition:border-color .2s}input.inp:focus,textarea.inp:focus{border-color:var(--rose)}textarea.inp{min-height:150px;resize:vertical;font-family:var(--hand);font-size:1.4rem;line-height:1.35}.emojis{display:flex;flex-wrap:wrap;gap:6px}.emojis button{font-size:1.3rem;width:40px;height:40px;border-radius:12px;border:2px solid transparent;background:#fff;cursor:pointer}.emojis button[aria-pressed=true]{border-color:var(--deep);background:#fff0f4}details.sent{width:100%;text-align:left}details.sent summary{cursor:pointer;color:var(--muted);font-weight:500;padding:6px 0}.sentlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.sentlist li{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;border:1px solid #ffe0ea}.sentlist li .grow{flex:1;min-width:0}.sentlist li small{display:block;color:var(--muted)}.tag{font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px;background:#fff0f4;color:var(--deep);white-space:nowrap}.tag.ok{background:#efe9ff;color:#7a5cff}.x{border:0;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 6px;border-radius:8px}.x:hover{background:#fff0f4;color:var(--deep)}.err{color:#c0284f;font-size:.92rem;font-weight:500;margin:0}.okmsg{color:#7a5cff;font-size:.92rem;font-weight:500;margin:0}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px;max-width:640px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left,0px));padding-top:max(10px,env(safe-area-inset-top,0px))}.topbar .who{font-size:.85rem;font-weight:500;color:var(--muted);background:#fffc;padding:6px 12px;border-radius:999px}.banner{width:100%;background:#fff;border:2px solid var(--rose);border-radius:20px;padding:16px 18px;text-align:left;display:flex;flex-direction:column;gap:8px;animation:pop .5s cubic-bezier(.3,1.6,.5,1);box-shadow:0 18px 34px -22px #e0567f88}.banner b{font-family:var(--display);font-weight:600;font-size:1.1rem}.banner ul{margin:0;padding-left:20px;line-height:1.6}.toasts{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:20;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100% - 32px));pointer-events:none}.toast{background:var(--deep);color:#fff;font-weight:500;padding:12px 16px;border-radius:16px;box-shadow:0 14px 30px -12px #b83a62;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;z-index:1}.auth{width:min(400px,100%);background:#fffffff0;border:2px solid #ffd6e0;border-radius:28px;padding:30px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 50px -28px #e0567f88;text-align:center}.auth form{display:flex;flex-direction:column;gap:12px;text-align:left}.tabs{display:flex;background:#fff0f4;border-radius:999px;padding:4px}.tabs button{flex:1;border:0;background:none;border-radius:999px;padding:10px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}.tabs button[aria-selected=true]{background:#fff;color:var(--deep);box-shadow:0 4px 10px -6px #e0567f88}.center{min-height:100vh;display:grid;place-items:center;font-family:var(--hand);font-size:2rem;color:var(--deep);padding:24px;text-align:center;position:relative;z-index:1}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}