*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:#241436;font-family:Cormorant Garamond,EB Garamond,Georgia,serif;overflow:hidden;-webkit-font-smoothing:antialiased}a{color:#e9c6dd;text-decoration:none}.scene{position:fixed;inset:0;overflow:hidden}.sky{position:absolute;inset:0}.sky-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}.stars{position:absolute;inset:0;pointer-events:none}.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--tw, 4s) ease-in-out infinite}.celestial{position:absolute;inset:0;pointer-events:none}.sun{position:absolute;transform:translate(-50%,-50%);width:clamp(70px,9vw,130px);height:clamp(70px,9vw,130px);border-radius:50%;background:radial-gradient(circle at 50% 50%,#fffdf4,#fff0c4 40%,#ffd98a,#ffd67800);box-shadow:0 0 90px 40px #ffe09666;transition:top 2s linear,left 2s linear,opacity 2s linear}.moon{position:absolute;transform:translate(-50%,-50%);width:clamp(80px,10vw,150px);height:clamp(80px,10vw,150px);transition:top 2s linear,left 2s linear,opacity 2s linear}.garden-svg{position:absolute;inset:0;width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 42%,#0000 55%,#180a2266)}.sway{animation:sway var(--sw, 7s) ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}.bloom-in{animation:bloomIn 2s cubic-bezier(.16,1,.3,1) both}@keyframes sway{0%{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}@keyframes twinkle{0%,to{opacity:.15}50%{opacity:.95}}@keyframes bloomIn{0%{opacity:0;transform:scale(.2) translateY(20px)}to{opacity:1;transform:none}}.particle-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.petal{position:absolute;top:-6vh;will-change:transform,opacity;border-radius:150% 8%;animation:petalFall var(--pd, 16s) linear infinite}@keyframes petalFall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}10%{opacity:.85}88%{opacity:.85}to{transform:translate3d(var(--drift,60px),116vh,0) rotate(400deg);opacity:0}}.firefly{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#fff6c8,#ffdf8a 40%,#ffd16e00 72%);animation:firefly var(--ff, 6s) ease-in-out infinite}@keyframes firefly{0%,to{opacity:.12;transform:translate(0)}50%{opacity:.95;transform:translate(var(--fx,12px),var(--fy,-16px))}}.drop{position:absolute;top:-8vh;width:1.5px;height:22px;background:linear-gradient(#c8dcff00,#c8dcff80);animation:drop var(--rd, 1s) linear infinite}@keyframes drop{to{transform:translateY(120vh)}}.snow{position:absolute;top:-6vh;border-radius:50%;background:#ffffffe6;animation:snowFall var(--sd, 9s) linear infinite}@keyframes snowFall{0%{transform:translateY(-6vh);opacity:0}10%{opacity:.9}90%{opacity:.9}to{transform:translate(var(--sdx,40px),112vh);opacity:0}}.cloud-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.cloud{position:absolute;left:-20%;width:220px;height:70px;animation:cloudDrift linear infinite;filter:blur(6px);will-change:transform}.cloud span{position:absolute;border-radius:50%}.cloud span:nth-child(1){width:120px;height:120px;left:10px;top:-30px}.cloud span:nth-child(2){width:90px;height:90px;left:90px;top:-10px}.cloud span:nth-child(3){width:150px;height:90px;left:40px;top:5px}@keyframes cloudDrift{0%{transform:translate(0)}to{transform:translate(140vw)}}.fog{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#dcdce600 20%,#dcdee8b3);backdrop-filter:blur(1px)}.creature-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.creature{position:absolute;left:-6%;will-change:transform;animation:creatureCross linear infinite}@keyframes creatureCross{0%{transform:translate(0)}to{transform:translate(114vw)}}.creature-bob{animation:bob ease-in-out infinite alternate}@keyframes bob{0%{transform:translateY(calc(var(--bob) * -1))}to{transform:translateY(var(--bob))}}.creature-flap .wingset{transform-box:fill-box;transform-origin:center}.creature-flap.butterfly .wl,.creature-flap.moth .wl{transform-box:fill-box;transform-origin:right center;animation:flapL .18s ease-in-out infinite alternate}.creature-flap.butterfly .wr,.creature-flap.moth .wr{transform-box:fill-box;transform-origin:left center;animation:flapR .18s ease-in-out infinite alternate}.creature-flap.moth .wl,.creature-flap.moth .wr{animation-duration:.22s}.creature-flap.bee .wl,.creature-flap.bee .wr{transform-box:fill-box;transform-origin:center;animation:buzz .06s linear infinite}@keyframes flapL{0%{transform:scaleX(1)}to{transform:scaleX(.35)}}@keyframes flapR{0%{transform:scaleX(1)}to{transform:scaleX(.35)}}@keyframes buzz{0%{transform:scaleY(1)}to{transform:scaleY(.6)}}.gold-glow{animation:goldPulse 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes goldPulse{0%,to{opacity:.5;transform:scale(.92)}50%{opacity:.95;transform:scale(1.08)}}.gold-spark{transform-box:fill-box;transform-origin:center;animation:sparkle 2.2s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}.wonder-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.shooting{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff0,#fffffff2);filter:drop-shadow(0 0 6px rgba(255,255,255,.8));animation:shoot linear infinite;opacity:0}@keyframes shoot{0%,90%{transform:translate(0) rotate(var(--a,20deg));opacity:0}91%{opacity:0}93%{opacity:1}to{transform:translate(38vw,20vh);opacity:0}}.firefly-name{position:absolute;left:0;right:0;top:16%;text-align:center;pointer-events:none;animation:nameGlow 30s ease-in-out infinite;opacity:0}.fn-word{display:inline-block;position:relative;font-size:clamp(40px,8vw,96px);font-weight:300;color:#fff3c4;letter-spacing:.04em;text-shadow:0 0 18px rgba(255,224,140,.9),0 0 40px rgba(255,210,110,.6)}.fn-dot{position:absolute;bottom:10%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff6c8,#ffd16e00);animation:firefly 5s ease-in-out infinite}@keyframes nameGlow{0%,74%{opacity:0}82%{opacity:.95}92%{opacity:.95}to{opacity:0}}.msg{position:absolute;left:0;right:0;top:27%;transform:translateY(-50%);text-align:center;padding:0 8vw;pointer-events:none;color:#fbf3f0;z-index:6}.msg .over{font-size:clamp(12px,1.5vw,16px);letter-spacing:.42em;text-transform:uppercase;color:#f0d7e6;opacity:.92;text-shadow:0 1px 14px rgba(60,20,60,.5);animation:fadeUp 1.6s ease .3s both}.msg .name{font-size:clamp(52px,11vw,132px);font-weight:300;line-height:.98;margin:.12em 0;color:#fff;text-shadow:0 2px 40px rgba(90,30,90,.5);animation:fadeUp 1.8s cubic-bezier(.16,1,.3,1) .6s both}.msg .line{font-size:clamp(18px,2.4vw,28px);font-weight:300;font-style:italic;line-height:1.5;max-width:22em;margin:0 auto;color:#f7e8f0;text-shadow:0 1px 18px rgba(60,20,60,.5);animation:fadeUp 1.8s ease 1s both}.msg .sig{display:block;font-style:normal;font-size:clamp(13px,1.5vw,18px);letter-spacing:.18em;margin-top:1.4em;color:#eecfe0;opacity:.9;text-shadow:0 1px 3px rgba(30,10,30,.85),0 2px 20px rgba(30,10,30,.7)}.msg .aside{display:block;font-style:italic;font-size:clamp(13px,1.4vw,17px);margin-top:1em;color:#f0dbe8;opacity:.82}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}.note-pop{position:absolute;z-index:12;max-width:min(320px,80vw);transform:translate(-50%,-110%);padding:16px 20px;border-radius:18px;text-align:center;background:#2a19409e;backdrop-filter:blur(14px) saturate(1.1);border:1px solid rgba(240,215,230,.3);box-shadow:0 18px 50px #12082080;color:#fbf3f0;font-size:clamp(16px,2vw,20px);font-style:italic;line-height:1.5;animation:notePop .5s cubic-bezier(.16,1,.3,1) both}@keyframes notePop{0%{opacity:0;transform:translate(-50%,-95%) scale(.9)}to{opacity:1;transform:translate(-50%,-110%) scale(1)}}.gate{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px}.gate.closing{animation:gateOut 1s ease forwards}@keyframes gateOut{to{opacity:0;transform:scale(1.05);filter:blur(9px)}}.gate-card{width:min(430px,93vw);padding:clamp(30px,5vw,50px);border-radius:26px;background:#2a19406b;backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(240,215,230,.26);box-shadow:0 24px 80px #1208208c;text-align:center;color:#fbf3f0;animation:fadeUp 1.2s ease .3s both}.gate-card.shake{animation:shake .5s}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-8px)}40%,60%{transform:translate(8px)}}.gate-emblem{margin:0 auto 16px;width:60px;height:60px;opacity:.9}.gate-title{font-size:clamp(26px,4.5vw,40px);font-weight:400;line-height:1.05;margin:0 0 .3em}.gate-sub{font-size:clamp(15px,2.1vw,18px);font-style:italic;line-height:1.55;color:#f0d7e6;opacity:.92;margin:0 0 24px}.gate-input{width:100%;background:#ffffff17;border:1px solid rgba(240,215,230,.32);border-radius:999px;padding:14px 22px;color:#fff;font-family:inherit;font-size:20px;text-align:center;outline:none;letter-spacing:.06em;transition:border-color .3s ease,box-shadow .3s ease}.gate-input::placeholder{color:#f0d7e680;font-style:italic}.gate-input:focus{border-color:#c9a8e0e6;box-shadow:0 0 0 4px #9b6dd638}.gate-err{height:0;overflow:hidden;opacity:0;color:#ffc4dd;font-style:italic;font-size:15px;transition:opacity .3s ease,margin .3s ease}.gate-err.show{height:auto;opacity:1;margin-top:12px}.gate-btn{margin-top:18px;width:100%;padding:14px;border:none;border-radius:999px;background:linear-gradient(135deg,#9b6dd6,#c56bb0);color:#fff;font-family:inherit;font-size:19px;letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 26px #783c966b;transition:transform .15s ease,box-shadow .3s ease}.gate-btn:hover{transform:translateY(-1px);box-shadow:0 12px 32px #783c9685}.gate-hintbtn{margin-top:16px;background:none;border:none;color:#e9c6dd;font-family:inherit;font-size:14px;letter-spacing:.09em;cursor:pointer;opacity:.8}.gate-hint{max-height:0;overflow:hidden;opacity:0;font-style:italic;font-size:15px;color:#f0d7e6;margin:0;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}.gate-hint.show{max-height:70px;opacity:.9;margin-top:12px}.gate-note{margin:22px 0 0;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#e9c6dd;opacity:.55}.hud{position:absolute;z-index:8;bottom:16px;right:18px;display:flex;gap:10px;align-items:center}.hud button{background:#2a194066;border:1px solid rgba(240,215,230,.25);color:#f0dbe8;border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:16px;backdrop-filter:blur(8px);transition:background .2s ease,transform .15s ease}.hud button:hover{background:#3c265a99;transform:translateY(-1px)}.stamp{position:absolute;z-index:8;bottom:18px;left:20px;color:#eccfe0;opacity:.55;font-size:13px;letter-spacing:.12em}.reveal{position:absolute;inset:0;background:#160c26;pointer-events:none;z-index:30;animation:reveal 2.4s ease .1s both}@keyframes reveal{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.sway,.star,.petal,.firefly,.drop,.snow{animation:none!important}}
