*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Inter,system-ui,sans-serif;overflow:hidden;background:#101a2e;-webkit-font-smoothing:antialiased}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,#0d1729,#16233c 26%,#2a2b4c 44%,#4a3352 51%,#7a4b5e 57%,#2a2338 58.2%)}.stars{position:absolute;top:0;right:0;bottom:48vh;left:0;z-index:1;pointer-events:none}.stars span{position:absolute;border-radius:50%;background:#e7eeff;animation:twinkle 4s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.12}50%{opacity:.75}}.blocks{position:absolute;left:0;right:0;top:26vh;height:26vh;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:2.5vw;pointer-events:none}.block{background:repeating-linear-gradient(90deg,#131c30 0 7px,transparent 7px 13px),repeating-linear-gradient(0deg,#131c30 0,#131c30 9px,#ffc6808c 9px,#ffc6808c 14px);border-radius:2px 2px 0 0;box-shadow:0 0 22px #0a101e99}.b1{width:26vw;height:19vh}.b2{width:32vw;height:25vh}.b3{width:22vw;height:15vh}.ground{position:absolute;left:0;right:0;top:52vh;bottom:0;z-index:2;background:linear-gradient(180deg,#2b2440,#1a1628 60%,#12101f)}.path{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#4a4363,#332c48 40%,#262137);clip-path:polygon(47% 0,53% 0,97% 100%,3% 100%)}.lamp{position:absolute;left:12vw;top:30vh;z-index:3;pointer-events:none}.lamp-pole{position:absolute;left:0;top:0;width:3px;height:26vh;background:linear-gradient(180deg,#4a4560,#221f31);border-radius:2px}.lamp-glow{position:absolute;left:-13vh;top:-13vh;width:26vh;height:26vh;border-radius:50%;background:radial-gradient(circle,rgba(255,205,140,.4) 0%,rgba(255,190,120,.13) 42%,transparent 70%)}.fog{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(122,132,178,.22) 26%,rgba(132,127,168,.58) 50%,rgba(96,86,122,.34) 66%,transparent 88%);opacity:.85;transition:opacity var(--walk, 5.2s) ease-out}.phase-walk .fog,.phase-arrived .fog,.phase-taken .fog,.phase-open .fog{opacity:.1}.petals{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.petals span{position:absolute;top:-6vh;opacity:0;animation:petal-fall linear infinite}@keyframes petal-fall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:.75}75%{opacity:.6}to{opacity:0;transform:translateY(112vh) rotate(220deg)}}.him-wrap{position:absolute;left:50%;bottom:15vh;z-index:10;height:58vh;aspect-ratio:120 / 190;transform-origin:50% 100%;transform:translate(-50%) translateY(var(--y, 0)) scale(var(--s, 1));transition:transform var(--walk, 5.2s) cubic-bezier(.38,.06,.62,.92)}.phase-far .him-wrap{--s: .085;--y: -30vh}.skipped .him-wrap,.skipped .fog,.skipped .bouquet-offer{--walk: .8s}.him-wrap svg{width:100%;height:100%;overflow:visible}.contact{position:absolute;left:50%;bottom:-.5%;translate:-50% 0;width:40%;height:3%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%)}.him-walking{animation:bob .58s ease-in-out infinite;transform-box:view-box;transform-origin:60px 190px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.leg{transform-box:view-box}.leg-l{transform-origin:52px 120px}.leg-r{transform-origin:68px 120px}.him-walking .leg-l{animation:step-a .58s ease-in-out infinite}.him-walking .leg-r{animation:step-b .58s ease-in-out infinite}@keyframes step-a{0%,to{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}@keyframes step-b{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.blush{opacity:0;transition:opacity .5s ease-out}.blush-on{opacity:.34}.arms-up{opacity:0}.arms-down{opacity:1}.arms-up,.arms-down{transition:opacity .45s ease}.phase-arrived .arms-up{opacity:1}.phase-arrived .arms-down{opacity:0}.bouquet-offer{position:absolute;left:50%;top:36%;width:48%;z-index:3;transform-origin:50% 85%;transform:translate(-50%) translate(-36%,-10%) scale(.5) rotate(-18deg);transition:transform var(--walk, 5.2s) cubic-bezier(.38,.06,.62,.92)}.bouquet-offer svg{width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}.phase-arrived .bouquet-offer{transform:translate(-50%);transition:transform .85s cubic-bezier(.2,.9,.3,1.08) .15s}.phase-arrived .bouquet-offer svg{animation:offer-pulse 2.4s ease-in-out 1s infinite}@keyframes offer-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.phase-taken .bouquet-offer,.phase-open .bouquet-offer{transform:translate(-50%) translateY(26%) scale(2.5);opacity:0;transition:transform .55s ease-in,opacity .5s ease-in .08s}.bloom{animation:bloom-breathe 5s ease-in-out infinite}@keyframes bloom-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.toto-wrap{position:fixed;left:4vw;bottom:-3vh;z-index:36;width:20vh;animation:toto-settle 1s ease-out both}@keyframes toto-settle{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.toto-wrap svg{width:100%;height:auto;filter:drop-shadow(0 -4px 16px rgba(0,0,0,.4))}.ear{transform-box:view-box;animation:ear-twitch 5.5s ease-in-out infinite}.ear-l{transform-origin:30px 20px}.ear-r{transform-origin:50px 20px}@keyframes ear-twitch{0%,84%,to{transform:rotate(0)}88%{transform:rotate(-9deg)}93%{transform:rotate(4deg)}}.toto-tail{transform-box:view-box;transform-origin:24px 60px;animation:tail-flick 3.4s ease-in-out infinite}@keyframes tail-flick{0%,70%,to{transform:rotate(0)}80%{transform:rotate(-13deg)}90%{transform:rotate(6deg)}}.says{position:absolute;left:50%;translate:-50% 0;width:max-content;max-width:min(62vw,280px);text-align:center;font-size:.8rem;padding:7px 13px;border-radius:14px;background:#fffcfaf0;color:#4a3a55;box-shadow:0 4px 14px #0000004d;animation:say-in .35s ease-out both;pointer-events:none}.says-him{top:-5%}.says-toto{top:-14%;left:0;translate:0 0;font-size:.74rem;background:#fffcfaeb}@keyframes say-in{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}.held{position:fixed;left:50%;bottom:-15vh;z-index:34;width:min(86vw,360px);opacity:0;pointer-events:none;transform:translate(-50%) translateY(62vh) rotate(-8deg);transition:transform .75s cubic-bezier(.2,.9,.3,1.05),opacity .35s}.phase-taken .held,.phase-open .held{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0) rotate(-5deg);transition-delay:.28s}.held svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 -6px 22px rgba(0,0,0,.45))}.env-tuck{position:absolute;left:58%;top:44%;width:34%;aspect-ratio:4 / 3;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:4px;background:linear-gradient(180deg,#fdf8ee,#eddcc0);box-shadow:0 4px 12px #0006;rotate:11deg;animation:env-nudge 2.8s ease-in-out infinite}.env-flap{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#f3e6cd,#e3cfa8);clip-path:polygon(0 0,100% 0,50% 62%);border-radius:4px 4px 0 0}.env-heart{position:absolute;left:50%;top:54%;translate:-50% -50%;font-size:.9rem}@keyframes env-nudge{0%,88%,to{transform:scale(1)}94%{transform:scale(1.08)}}.letter-card{position:fixed;left:50%;top:50%;z-index:60;width:min(88vw,400px);max-height:84vh;overflow-y:auto;padding:24px 22px 14px;border-radius:12px;background:linear-gradient(180deg,#fdfaf3,#f4ecdd);box-shadow:0 20px 46px #0000008c;opacity:0;pointer-events:none;transform:translate(-50%,-50%) translateY(34vh) scale(.6) rotate(-4deg);transition:transform .6s cubic-bezier(.2,.9,.3,1.04),opacity .35s}.phase-open .letter-card{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.verse{font-family:Caveat,cursive;font-size:clamp(17px,4.9vw,21px);font-weight:500;line-height:1.32;text-align:center;color:#503a6e;opacity:0}.phase-open .verse,.phase-open .salut{animation:line-in .5s both}.stanza-gap{height:12px;flex:0 0 12px}.salut{font-family:Caveat,cursive;font-size:clamp(16px,4.4vw,19px);font-weight:600;color:#6b4fa0;margin-top:14px;text-align:right;opacity:0}@keyframes line-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.letter-close{display:block;margin:16px auto 2px;padding:11px 20px;min-height:44px;font:400 .78rem Inter,sans-serif;letter-spacing:.06em;color:#6b4fa0;background:#6b4fa017;border:1px solid rgba(107,79,160,.22);border-radius:999px;cursor:pointer}.hint{position:fixed;left:50%;translate:-50% 0;z-index:50;padding:8px 15px;border-radius:999px;font-size:.78rem;letter-spacing:.05em;color:#fff4fae6;background:#18122880;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .5s ease}.hint-walk,.hint-take,.hint-open{top:4vh}.phase-walk .hint-walk,.phase-arrived .hint-take,.phase-taken .hint-open{opacity:1;animation:hint-pulse 2.8s ease-in-out infinite}.phase-taken .hint-open{transition-delay:1.1s}@keyframes hint-pulse{0%,to{opacity:.62}50%{opacity:1}}.page-footer{position:fixed;left:14px;bottom:12px;z-index:70;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#ffffff59;pointer-events:none}@media(min-width:760px){.him-wrap{height:64vh;bottom:12vh}.blocks{gap:1.5vw}.b1{width:15vw}.b2{width:18vw}.b3{width:12vw}.held{width:min(46vw,400px);bottom:-12vh}.toto-wrap{width:22vh;left:8vw;bottom:-3vh}.says{font-size:.92rem}.hint{font-size:.86rem}}@media(prefers-reduced-motion:reduce){.stars span,.petals span,.bloom,.toto-tail,.ear,.env-tuck,.phase-arrived .bouquet-offer svg,.him-walking,.him-walking .leg-l,.him-walking .leg-r,.phase-walk .hint-walk,.phase-arrived .hint-take,.phase-taken .hint-open{animation:none}.petals{display:none}}