:root{--bg1: #ffd6e0;--bg2: #e4d9ff;--ink: #3b2a33;--accent: #e8577e;--soft: #ffd9e3;--gold: #f4b740;font-family:Quicksand,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;min-height:100dvh;overflow-x:hidden}body{display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(160deg,var(--bg1),#fbe3ef 45%,var(--bg2))}.sky{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.sky:before,.sky:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(40px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}.sky:before{background:#ffb8cc;top:-20vmax;left:-15vmax}.sky:after{background:#cdbcff;bottom:-25vmax;right:-20vmax;animation-delay:-9s}.petal{position:absolute;top:-8%;width:var(--s, 18px);height:var(--s, 18px);opacity:.8;animation:fall var(--d, 14s) linear infinite;animation-delay:var(--delay, 0s)}@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.1)}}@keyframes fall{to{transform:translate(var(--x, 30px),115vh) rotate(360deg)}}.card{position:relative;z-index:1;width:min(100%,440px);display:grid;justify-items:center;gap:16px;text-align:center;padding:28px 22px 26px;border-radius:28px;background:#ffffff8c;border:1px solid rgb(255 255 255 / .8);box-shadow:0 20px 50px #7c466e2e;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.98)}}.mascot-slot .mascot{width:min(44vw,170px)}.script{font-family:Dancing Script,cursive;font-weight:700;font-size:clamp(2.4rem,11vw,3.2rem);line-height:1.1;margin:0;color:var(--accent)}.lead{margin:0;line-height:1.6;font-weight:500;color:#6b4a58}.lead strong{color:var(--accent);font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bubble{position:relative;margin:6px 0 0;padding:18px 18px 12px;border-radius:20px;background:linear-gradient(180deg,#fff,#fff6f9);border:1px solid #ffe1ea;box-shadow:0 8px 20px #e8577e1f;line-height:1.55;color:#4a3540}.bubble:after{content:"Bé Bông";position:absolute;top:-10px;left:14px;padding:1px 9px;border-radius:999px;font-size:.7rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#f58aa8,var(--accent));box-shadow:0 3px 8px #e8577e40}.date-pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 -6px;padding:5px 14px;border-radius:999px;background:#ffffffbf;border:1px solid #ffd3df;color:var(--accent);font-weight:700;font-size:.9rem;letter-spacing:.12em}.date-pill .icon{width:12px;height:12px}.from{margin:0;font-family:Dancing Script,cursive;font-weight:600;font-size:1.15rem;color:#b04a6c}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.unit{position:relative;display:grid;gap:4px;padding:14px 4px 10px;border-radius:20px;background:linear-gradient(180deg,#fff,#fff3f7);border:1px solid #ffe1ea;box-shadow:0 8px 18px #e8577e1f}.unit:before{content:"";position:absolute;left:12%;right:12%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgb(232 87 126 / .12),transparent)}.num{font-size:clamp(1.7rem,9vw,2.5rem);font-weight:700;background:linear-gradient(180deg,#f6789a,#d63f6b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1}.num.tick{animation:flip .35s ease}.label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a07888}.countdown.urgent .num{animation:pulse 1s ease-in-out infinite}@keyframes flip{0%{transform:rotateX(80deg);opacity:.2}to{transform:none;opacity:1}}@keyframes pulse{50%{transform:scale(1.12)}}.tease{font-weight:600;min-height:1.5em}.gate-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;padding:5px;border-radius:999px;background:#fff9;border:1px solid #ffe1ea}.gate-tab{min-height:40px;border:0;border-radius:999px;background:none;font:inherit;font-weight:700;font-size:.92rem;color:#a07888;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}.gate-tab[aria-checked=true]{background:linear-gradient(135deg,#f58aa8,var(--accent));color:#fff;box-shadow:0 4px 12px #e8577e4d}.gate-tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.gate-question.swap{animation:rise .35s both}.badge{padding:6px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.gate-form{display:grid;gap:10px;width:100%;text-align:left}.gate-question{font-weight:700;font-size:1.05rem;line-height:1.45;min-height:3em}.gate-form input{width:100%;min-height:50px;padding:12px 16px;font:inherit;font-size:1.05rem;border:2px solid var(--soft);border-radius:14px;background:#fff;color:var(--ink)}.gate-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #e8577e26}.gate-form input.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.btn{min-height:50px;border:0;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#f06a8f,var(--accent));color:#fff;box-shadow:0 8px 20px #e8577e59}.btn:disabled{opacity:.55;cursor:wait}.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.hints{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%}.hints li{padding:10px 14px;border-radius:14px;background:#fff8e6;border:1px dashed var(--gold);text-align:left;animation:rise .4s both}.hints li{display:flex;gap:8px;align-items:baseline}.hints li .icon{color:#e2a21b;transform:translateY(2px)}.card.is-unlocked{animation:unlock .8s ease forwards}@keyframes unlock{60%{transform:scale(1.04)}to{transform:scale(.96);opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.petal{display:none}}.mascot-slot{display:grid;justify-items:center}.mascot{width:min(42vw,180px);aspect-ratio:200 / 220}.mascot[hidden]{display:none}.mascot svg{width:100%;height:100%;overflow:visible}.mascot .shadow{fill:#000;opacity:.08}.mascot .fluff,.mascot .arm ellipse{fill:#fff;stroke:#f0c7d3;stroke-width:3}.mascot .eyes ellipse,.mascot .eyes circle{fill:var(--ink, #3b2a33)}.mascot .eyes .sparkle,.mascot .eyes .white{fill:#fff}.mascot .eyes path,.mascot .brows path,.mascot .mouth--smile,.mascot .mouth--flat,.mascot .mini-letter path{fill:none;stroke:var(--ink, #3b2a33);stroke-width:3.5;stroke-linecap:round}.mascot .mouth--open,.mascot .mouth--o{fill:#b8405f}.mascot .cheek{fill:#ff9fb6;opacity:.8}.mascot .bag path{fill:var(--accent, #e8577e)}.mascot .bag-letter{fill:#fff;font:700 26px system-ui,sans-serif}.mascot .mini-letter rect{fill:#fffaf0;stroke:var(--gold, #f4b740);stroke-width:2.5}.mascot .mini-letter path{stroke:var(--gold, #f4b740);stroke-width:2.5}.mascot .eyes,.mascot .mouth,.mascot .brows,.mascot .mini-letter{display:none}.mascot--greet .eyes--normal,.mascot--greet .mouth--smile,.mascot--talk .eyes--normal,.mascot--talk .mouth--open,.mascot--serious .eyes--normal,.mascot--serious .brows,.mascot--serious .mouth--flat,.mascot--panic .eyes--wide,.mascot--panic .mouth--o,.mascot--celebrate .eyes--happy,.mascot--celebrate .mouth--open,.mascot--read .eyes--happy,.mascot--read .mouth--smile,.mascot--read .mini-letter{display:inline}.mascot .body{transform-origin:100px 200px;transform-box:view-box}.mascot .arm--right{transform-origin:150px 120px;transform-box:view-box}.mascot .eyes--normal{transform-origin:100px 96px;transform-box:view-box;animation:blink 4s infinite}.mascot--greet .body{animation:bob 2.4s ease-in-out infinite}.mascot--greet .arm--right{animation:wave 1.2s ease-in-out infinite}.mascot--talk .body{animation:bob 1.2s ease-in-out infinite}.mascot--serious .body{transform:rotate(-6deg)}.mascot--panic .body{animation:shake .25s linear infinite}.mascot--celebrate .body{animation:hop .6s ease-in-out infinite}.mascot--read .body{transform:rotate(4deg)}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes hop{50%{transform:translateY(-18px) rotate(3deg)}}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes wave{50%{transform:rotate(-20deg)}}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}.mascot .eyes--sleep path{fill:none;stroke:var(--ink, #3b2a33);stroke-width:3.5;stroke-linecap:round}.mascot .mouth--small{fill:#b8405f}.mascot .zzz{display:none;fill:#8a7bd1;font:700 18px system-ui,sans-serif}.mascot--sleep .eyes--sleep,.mascot--sleep .mouth--small,.mascot--sleep .mini-letter,.mascot--sleep .zzz{display:inline}.mascot--sleep .body{animation:breathe 3.2s ease-in-out infinite}.mascot .zzz text{animation:zfloat 2.4s ease-in-out infinite;opacity:0}.mascot .zzz text:nth-child(2){animation-delay:.8s}.mascot .zzz text:nth-child(3){animation-delay:1.6s}@keyframes breathe{50%{transform:scale(1.03,.97)}}@keyframes zfloat{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}to{opacity:0;transform:translateY(-10px)}}@media (prefers-reduced-motion: reduce){.mascot *{animation:none!important}.mascot .zzz text{opacity:1}}.mascot .eyes--heart path{fill:var(--accent, #e8577e)}.mascot .eyes--wink path,.mascot .mouth--hmm,.mascot .mouth--wobble{fill:none;stroke:var(--ink, #3b2a33);stroke-width:3.5;stroke-linecap:round}.mascot .blush-lines path{fill:none;stroke:#f48aa8;stroke-width:2.5;stroke-linecap:round}.mascot .tears path{fill:#8fd3ff}.mascot .think-mark{fill:#8a7bd1;font:800 28px system-ui,sans-serif}.mascot .love-hearts path{fill:var(--accent, #e8577e)}.mascot .blush-lines,.mascot .tears,.mascot .think-mark,.mascot .love-hearts{display:none}.mascot--love .eyes--heart,.mascot--love .mouth--open,.mascot--love .love-hearts,.mascot--shy .eyes--happy,.mascot--shy .mouth--small,.mascot--shy .blush-lines,.mascot--wink .eyes--wink,.mascot--wink .mouth--smile,.mascot--think .eyes--up,.mascot--think .mouth--hmm,.mascot--think .think-mark,.mascot--touched .eyes--happy,.mascot--touched .mouth--wobble,.mascot--touched .tears{display:inline}.mascot--love .body{animation:bob 1.4s ease-in-out infinite}.mascot .love-hearts path{transform-box:fill-box;animation:zfloat 2s ease-in-out infinite}.mascot .love-hearts path:nth-child(2){animation-delay:.9s}.mascot--shy .body{transform:rotate(-5deg)}.mascot--shy .cheek{transform-box:fill-box;transform-origin:center;transform:scale(1.35)}.mascot--wink .body{transform:rotate(5deg)}.mascot--think .body{transform:rotate(-3deg)}.mascot .think-mark{animation:zfloat 2.4s ease-in-out infinite}.mascot--touched .body{animation:breathe 2.4s ease-in-out infinite}.mascot .tears path{animation:drip 1.6s ease-in infinite}.mascot .tears path:nth-child(2){animation-delay:.5s}@keyframes drip{0%{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}@media (prefers-reduced-motion: reduce){.mascot .love-hearts path,.mascot .think-mark{opacity:1}.mascot .tears path{opacity:1}}.icon{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.15em}.icon svg{display:block;width:100%;height:100%}.welcome-hide{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.9rem;color:#7a6470;cursor:pointer}.welcome-hide input{width:20px;height:20px;margin:0;accent-color:var(--accent)}.welcome-reopen{position:fixed;z-index:40;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgb(255 255 255 / .9);border-radius:50%;background:#ffffffb3;color:var(--accent);cursor:pointer;box-shadow:0 6px 18px #7c466e2e;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.welcome-reopen .icon{width:22px;height:22px}.welcome-reopen:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:16px;background:#3b2a3373;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade-in .25s ease both}.modal{width:min(100%,380px);max-height:calc(100dvh - 32px);overflow-y:auto;display:grid;gap:14px;justify-items:center;text-align:center;padding:24px 20px 20px;border-radius:28px;line-height:1.55;font-family:Quicksand,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:500;color:#4a3540;background:radial-gradient(120% 60% at 50% 0%,#ffe8ef,transparent 70%),#fff;border:1px solid #ffe1ea;box-shadow:0 20px 50px #3b2a334d;animation:pop-in .45s cubic-bezier(.3,1.4,.5,1) both}.modal p{margin:0}.modal-title{margin:0;font-size:1.25rem;font-weight:700;line-height:1.35;color:var(--accent)}.modal-question{font-weight:700;font-size:1.1rem;line-height:1.45}.modal-note{position:relative;width:100%;padding:14px 16px;border-radius:18px;text-align:left;background:repeating-linear-gradient(180deg,transparent 0 25px,rgb(232 87 126 / .08) 25px 26px),#fff8fa;border:1.5px dashed #ffbfd0;color:#5a3f4b;rotate:-1deg;box-shadow:0 6px 14px #e8577e1a}.modal-note p{margin:0}.modal-note-label{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px!important;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}.modal-note-label .icon{width:15px;height:15px}.modal-mascot{position:relative}.modal-hearts .mh{position:absolute;color:#f48fab;animation:modal-float 2.4s ease-in-out infinite}.modal-hearts .mh1{top:8%;left:-18%;width:18px;height:18px}.modal-hearts .mh2{top:26%;right:-16%;width:14px;height:14px;animation-delay:.7s}.modal-hearts .mh3{top:-4%;right:-4%;width:16px;height:16px;color:var(--gold);animation-delay:1.3s}.modal-choices{display:grid;gap:10px;width:100%}.modal-choices--row{grid-template-columns:1.4fr 1fr}.modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}.modal .btn .icon{width:18px;height:18px}.btn--ghost{background:#fff!important;color:var(--accent)!important;border:2px solid #ffc9d8!important;box-shadow:none!important}.btn--messenger{background:linear-gradient(135deg,#00b2ff,#8a5cff 55%,#ff5c9a)!important;color:#fff!important;box-shadow:0 8px 20px #8a5cff4d!important;text-decoration:none}.btn-text{min-height:44px;padding:8px 16px;border:0;background:none;font:inherit;font-weight:600;color:#a07888;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.btn-text:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}@keyframes modal-float{50%{transform:translateY(-6px) scale(1.1);opacity:.7}}.modal-mascot .mascot{width:110px}.modal .btn{width:100%}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.85)}}