*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Inter,system-ui,sans-serif;overflow:hidden;background:#2b3a4a;-webkit-font-smoothing:antialiased}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none;cursor:pointer;--p: 0;--pdeg: 0;--snow: 1;--rain: 0;--bloom: 0;--wind: 1;--horizon: 46vh;--sun-x: 78vw;--sun-y: 74vh}@keyframes appear{0%{opacity:0}to{opacity:1}}.sky{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sky-spring{opacity:var(--p)}.sun{position:absolute;left:var(--sun-x);top:var(--sun-y);translate:-50% -50%;width:calc(58px + var(--p) * 34px);height:calc(58px + var(--p) * 34px);border-radius:50%;background:radial-gradient(circle at 40% 36%,#fffdf0,#ffe27a 52%,#ffb545);box-shadow:0 0 calc(14px + var(--p) * 46px) calc(4px + var(--p) * 16px) rgba(255,214,110,calc(.25 + var(--p) * .5)),0 0 calc(40px + var(--p) * 120px) calc(10px + var(--p) * 40px) rgba(255,205,90,calc(.08 + var(--p) * .22));opacity:calc(.45 + var(--p) * .55);pointer-events:none;z-index:2}.snowfall,.rainfall{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.snowfall{opacity:var(--snow)}.rainfall{opacity:var(--rain)}.flake{position:absolute;top:0;border-radius:50%;background:#fff;opacity:.9;animation:flake-fall linear infinite}@keyframes flake-fall{0%{transform:translateY(-12vh)}to{transform:translate(var(--drift),112vh)}}.drop{position:absolute;top:0;width:1.6px;height:16px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(226,240,250,.75));animation:drop-fall linear infinite}@keyframes drop-fall{0%{transform:translateY(-14vh) rotate(9deg)}to{transform:translate(4vw,112vh) rotate(9deg)}}.bird{position:absolute;left:-10vw;z-index:5;pointer-events:none;opacity:calc((var(--bloom) - .45) * 3);animation:fly-across linear infinite}.bird svg{display:block;animation:flap .9s ease-in-out infinite alternate}@keyframes fly-across{0%{transform:translate(0)}to{transform:translate(122vw)}}@keyframes flap{0%{transform:scaleY(1)}to{transform:scaleY(.55)}}.bfly{position:absolute;left:-8vw;z-index:6;pointer-events:none;opacity:calc((var(--bloom) - .6) * 3);animation:fly-across linear infinite}.bfly span{display:inline-block;font-size:19px;animation:bfly-bob 2.6s ease-in-out infinite alternate}@keyframes bfly-bob{0%{transform:translateY(-2.5vh) rotate(-8deg)}to{transform:translateY(2.5vh) rotate(10deg)}}.ground{position:absolute;left:-12vw;right:-12vw;top:var(--horizon);bottom:-4vh;border-radius:50% 50% 0 0/9vh 9vh 0 0;pointer-events:none;z-index:8}.ground-winter{background:linear-gradient(180deg,#eef5fa,#d5e2ec 45%,#b9cad8)}.ground-spring{background:linear-gradient(180deg,#74c25a,#55a344 45%,#35762c);opacity:var(--bloom)}.world{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9}.obj{--w: calc(var(--a) - var(--pdeg));--t: clamp(0, calc(var(--w) / 90), 1);--n: calc(1 - var(--t));--nn: calc(var(--n) * var(--n));--in: clamp(0, calc((94 - var(--w)) / 14), 1);--gone: clamp(0, calc((0 - var(--w)) / 16), 1);position:absolute;left:calc(50% + var(--lane) * (15% + var(--nn) * 52%));top:calc(var(--horizon) + 2vh + var(--nn) * 50vh + var(--gone) * 16vh);translate:-50% -100%;scale:calc(.18 + var(--nn) * 1.16);opacity:calc(var(--in) * (1 - var(--gone)));transform-origin:50% 100%}.tree svg,.flower svg{display:block;width:100%;height:auto}.tree svg{transform-origin:50% 100%;animation:tree-sway 6s ease-in-out infinite}@keyframes tree-sway{0%,to{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}.flower svg{transform-origin:50% 100%;animation:sway ease-in-out infinite}@keyframes sway{0%,to{transform:rotate(-2.4deg)}50%{transform:rotate(2.8deg)}}.drift{height:16px;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,#fff,#dde9f1)}.her{position:absolute;left:50%;top:88vh;translate:-50% -100%;width:clamp(110px,30vw,168px);z-index:var(--zher, 300);pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}.her svg{display:block;width:100%;height:auto;overflow:visible}.contact{position:absolute;bottom:-4px;left:50%;translate:-50% 0;width:56%;height:12px;border-radius:50%;background:radial-gradient(ellipse,rgba(20,30,45,.38) 0%,transparent 70%);z-index:-1}.contact-toto{width:74%;height:9px;bottom:-2px}.her-bob,.her-hair,.leg,.arm,.toto-walk{transform-box:view-box}.her-bob{transform-origin:50px 150px}.walking .her-bob{animation:bob .32s ease-in-out infinite alternate}@keyframes bob{0%{translate:0 0}to{translate:0 -2.5px}}.leg-l{transform-origin:43px 112px}.leg-r{transform-origin:57px 112px}.walking .leg-l{animation:stride .64s linear infinite}.walking .leg-r{animation:stride .64s linear infinite -.32s}@keyframes stride{0%{translate:0 -1px}40%{translate:0 2.5px}60%{translate:0 -5px}to{translate:0 -1px}}.arm-l{transform-origin:34px 62px;rotate:5deg}.arm-r{transform-origin:66px 62px;rotate:-5deg}.walking .arm-l{animation:swing .64s ease-in-out infinite -.32s}.walking .arm-r{animation:swing .64s ease-in-out infinite}@keyframes swing{0%,to{rotate:9deg}50%{rotate:-9deg}}.her-hair{transform-origin:50px 34px;rotate:calc(var(--wind) * -14deg);animation:hair-drift 5s ease-in-out infinite alternate}@keyframes hair-drift{0%{translate:0 0}to{translate:1.5px 0}}.toto{position:absolute;left:33%;top:87vh;translate:-50% -100%;width:clamp(52px,15vw,80px);z-index:1000;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}.toto svg{display:block;width:100%;height:auto}.toto-walk{opacity:calc((.96 - var(--p)) * 12.5)}.toto-sit{opacity:calc((var(--p) - .88) * 12.5)}.walking .toto-walk{animation:toto-bob .32s ease-in-out infinite alternate}.toto-say{position:absolute;bottom:calc(100% + 4px);left:50%;translate:-50% 0;background:#fffffff2;color:#24405c;font-size:.72rem;font-weight:600;white-space:nowrap;padding:5px 10px;border-radius:12px;box-shadow:0 2px 8px #0000004d;animation:say-pop 2.3s ease-out both;pointer-events:none}.toto-say:after{content:"";position:absolute;top:100%;left:50%;translate:-50% 0;border:5px solid transparent;border-top-color:#fffffff2}@keyframes say-pop{0%{opacity:0;transform:translateY(6px) scale(.7)}10%{opacity:1;transform:translateY(0) scale(1.05)}16%{transform:scale(1)}84%{opacity:1}to{opacity:0;transform:translateY(-6px)}}@keyframes toto-bob{0%{translate:0 0}to{translate:0 -1.6px}}.page-header{position:absolute;top:3.5vh;left:0;right:0;text-align:center;z-index:30;pointer-events:none}.page-header h1{font-family:Cormorant Garamond,Georgia,serif;font-weight:600;font-size:clamp(1.3rem,4.2vw,2.4rem);letter-spacing:.03em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.45);opacity:calc(1 - var(--p) * .8)}.hint{margin-top:4px;font-size:.8rem;letter-spacing:.09em;color:#ffffffd9;text-shadow:0 1px 8px rgba(0,0,0,.5);animation:hint-pulse 2.4s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.5}50%{opacity:1}}.message{position:absolute;left:0;right:0;top:37%;translate:0 -50%;padding:0 30px;text-align:center;z-index:30;pointer-events:none}.message p{font-family:Cormorant Garamond,Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.3rem,5.8vw,2.1rem);line-height:1.45;color:#fff;text-shadow:0 1px 3px rgba(23,42,66,.55),0 2px 12px rgba(23,42,66,.6),0 0 34px rgba(255,186,74,.75);animation:line-in 1.1s ease-out both}@keyframes line-in{0%{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}.again{position:fixed;right:12px;bottom:12px;z-index:40;font-family:Inter,system-ui,sans-serif;font-size:.78rem;font-weight:600;color:#24405c;background:#ffffffe6;border:none;border-radius:999px;padding:10px 16px;cursor:pointer;box-shadow:0 3px 14px #0000004d;animation:appear .8s .6s both}.again:active{transform:scale(.96)}.back-link{position:fixed;top:12px;left:12px;z-index:40;width:38px;height:38px;display:grid;place-items:center;font-family:Inter,system-ui,sans-serif;font-size:1.15rem;font-weight:600;color:#fff;text-decoration:none;background:#141e2d66;border:1px solid rgba(255,255,255,.3);border-radius:50%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}.back-link:hover{background:#fff3}.page-footer{position:fixed;left:14px;bottom:12px;z-index:40;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#ffffff8c}@media(min-width:700px){.her{width:160px}.toto{left:40%;width:76px}.message{top:35%}}