:root{--bg1: #ffd6e0;--bg2: #e4d9ff;--ink: #3b2a33;--accent: #e8577e;--soft: #ffd9e3;--gold: #f4b740;font-family: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%;font-size: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.55}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bubble{margin:0;padding:12px 16px;border-radius:16px;background:#fff;box-shadow:0 6px 18px #3b2a3314;line-height:1.5}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.unit{display:grid;gap:4px;padding:12px 4px 10px;border-radius:18px;background:#ffffffbf;box-shadow:inset 0 -3px #e8577e1f}.num{font-size:clamp(1.7rem,9vw,2.5rem);font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1}.num.tick{animation:flip .35s ease}.label{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}.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}.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}.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:before{content:"💡 "}.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}}
