@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=DM+Serif+Display:ital@0;1&family=Nunito:wght@400;600;700&display=swap');
*{box-sizing:border-box}:root{--yellow:#f6d76a;--cream:#fff8e3;--night:#14130e}body{background:#14130e;color:var(--cream);font-family:Nunito,system-ui,sans-serif;margin:0;min-width:320px;overflow:hidden}button{font:inherit}#experience{height:100svh;overflow:hidden;position:relative}
#galaxyCanvas{cursor:grab;height:100%;inset:0;position:absolute;touch-action:none;width:100%;z-index:0}#galaxyCanvas:active{cursor:grabbing}.galaxy-title{text-shadow:0 2px 13px #090a06}.flower-field{pointer-events:none;z-index:2}.scene-flower{filter:drop-shadow(0 0 5px rgba(255,220,96,.35));pointer-events:auto}.drag-tip{background:rgba(18,17,10,.34);border:1px solid rgba(255,235,156,.2);border-radius:99px;bottom:4.3rem;color:rgba(255,244,198,.8);font-size:.7rem;left:50%;letter-spacing:.04em;padding:.38rem .7rem;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .6s ease;z-index:3}.galaxy.dragged .drag-tip{opacity:0}
.intro{align-items:center;background:radial-gradient(circle at 50% 54%,#5b4d1e 0%,#302a15 30%,#181610 67%,#100f0c 100%);display:flex;flex-direction:column;height:100%;justify-content:center;overflow:hidden;position:absolute;inset:0;text-align:center;z-index:3;transition:opacity .5s ease,transform .7s ease}.intro.leaving{opacity:0;transform:scale(1.8)}.intro::after{background:radial-gradient(ellipse,transparent 37%,rgba(7,7,5,.52) 100%);content:'';inset:0;pointer-events:none;position:absolute}.intro-stars,#starField{inset:0;overflow:hidden;pointer-events:none;position:absolute}.intro-star,.star{background:#fff4bd;border-radius:99px;box-shadow:0 0 7px #f8dd75;height:var(--s);left:var(--x);opacity:var(--o);position:absolute;top:var(--y);width:var(--s)}.overline{color:#f4d777;font-size:clamp(.66rem,1.3vw,.86rem);font-weight:700;letter-spacing:.22em;margin:0 0 1rem;text-transform:uppercase;z-index:1}.intro h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(2.1rem,5vw,4.4rem);font-weight:400;line-height:1;margin:0;text-shadow:0 2px 18px #0e0d08;z-index:1}.intro-flower{background:none;border:0;cursor:pointer;height:220px;margin:1.2rem 0 .3rem;position:relative;width:220px;z-index:1}.intro-flower:hover{transform:scale(1.06)}.intro-flower:focus-visible{outline:2px solid #fff4bb;outline-offset:9px;border-radius:50%}.intro-glow{background:radial-gradient(circle,rgba(255,233,117,.57),rgba(255,215,64,.12) 49%,transparent 70%);inset:-45px;position:absolute}.intro-petal{background:linear-gradient(135deg,#fff4a7,#f8d752 55%,#e4ab2d);border-radius:87% 15% 83% 18%;box-shadow:inset 4px 4px 8px #fff6bd,0 3px 12px rgba(0,0,0,.23);height:100px;left:82px;position:absolute;top:61px;transform-origin:28px 50px;width:57px}.p1{transform:rotate(0deg) translateY(-43px)}.p2{transform:rotate(45deg) translateY(-43px)}.p3{transform:rotate(90deg) translateY(-43px)}.p4{transform:rotate(135deg) translateY(-43px)}.p5{transform:rotate(180deg) translateY(-43px)}.p6{transform:rotate(225deg) translateY(-43px)}.p7{transform:rotate(270deg) translateY(-43px)}.p8{transform:rotate(315deg) translateY(-43px)}.intro-center{background:radial-gradient(circle at 35% 27%,#ffeb75,#bd741c 60%,#69360d);border:5px dotted #e5a932;border-radius:50%;box-shadow:0 2px 8px #76400e;height:67px;left:76px;position:absolute;top:76px;width:67px;z-index:1}.touch{color:#f2e2a4;font-size:.82rem;font-weight:700;letter-spacing:.08em;margin:0;z-index:1}
.galaxy{background:radial-gradient(ellipse at 50% 51%,#50471c 0%,#242414 28%,#14140f 67%,#090a08 100%);height:100%;opacity:0;overflow:hidden;pointer-events:none;position:absolute;inset:0;transform:scale(2.4);transition:opacity .55s ease,transform 1.7s cubic-bezier(.17,.78,.21,1)}.galaxy.active{opacity:1;pointer-events:auto;transform:scale(1)}.mist{border-radius:50%;filter:blur(42px);opacity:.28;position:absolute}.mist-one{background:#c4a22d;height:40vw;left:-13vw;top:-16vw;width:48vw}.mist-two{background:#887926;bottom:-22vw;height:48vw;right:-15vw;width:50vw}.mist-three{background:#a56d20;height:25vw;left:38%;top:34%;width:25vw}.star{animation:twinkle var(--d) ease-in-out infinite alternate}.galaxy-core{background:radial-gradient(ellipse,rgba(255,253,202,.94) 0%,rgba(255,230,100,.42) 17%,rgba(243,204,55,.18) 33%,transparent 68%);border-radius:50%;box-shadow:0 0 35px 10px rgba(255,219,81,.38);height:clamp(95px,15vw,190px);left:50%;position:absolute;top:51%;transform:translate(-50%,-50%) rotate(-9deg);width:clamp(220px,38vw,560px)}.galaxy-title{left:50%;pointer-events:none;position:absolute;text-align:center;top:clamp(1.25rem,4vh,3rem);transform:translateX(-50%);width:90%;z-index:2}.galaxy-title p{color:#f3d570;font-family:Caveat,cursive;font-size:clamp(1.3rem,3vw,2rem);margin:0}.galaxy-title h2{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(1.55rem,3.3vw,3rem);font-weight:400;line-height:1;margin:.05rem 0 .5rem}.galaxy-title span{color:#eee1ae;font-size:clamp(.72rem,1.4vw,.9rem)}.flower-field{inset:0;position:absolute}.scene-flower{align-items:center;background:transparent;border:0;color:#fff7cf;cursor:pointer;display:flex;flex-direction:column;left:var(--x);padding:0;position:absolute;top:var(--y);transform:translate(-50%,-50%) scale(var(--scale));transition:filter .25s ease,transform .25s ease;z-index:1}.scene-flower:hover,.scene-flower:focus-visible{filter:brightness(1.18) drop-shadow(0 0 12px #ffe883);transform:translate(-50%,-50%) scale(calc(var(--scale) * 1.16));outline:0}.small-bloom{height:50px;position:relative;width:50px}.small-bloom i{background:linear-gradient(135deg,#fff3a4,#edc044 60%,#ca8927);border-radius:80% 15% 80% 15%;height:31px;left:18px;position:absolute;top:10px;transform-origin:7px 15px;width:15px}.small-bloom i:nth-child(1){transform:rotate(0deg) translateY(-13px)}.small-bloom i:nth-child(2){transform:rotate(45deg) translateY(-13px)}.small-bloom i:nth-child(3){transform:rotate(90deg) translateY(-13px)}.small-bloom i:nth-child(4){transform:rotate(135deg) translateY(-13px)}.small-bloom i:nth-child(5){transform:rotate(180deg) translateY(-13px)}.small-bloom i:nth-child(6){transform:rotate(225deg) translateY(-13px)}.small-bloom i:nth-child(7){transform:rotate(270deg) translateY(-13px)}.small-bloom i:nth-child(8){transform:rotate(315deg) translateY(-13px)}.small-bloom b{background:#6e4515;border:2px dotted #dc9c25;border-radius:50%;height:19px;left:16px;position:absolute;top:16px;width:19px;z-index:1}.flower-label{font-size:clamp(.61rem,1vw,.82rem);font-weight:700;margin-top:2px;max-width:105px;text-shadow:0 2px 5px #14130b;white-space:nowrap}.back-button{background:rgba(255,245,185,.09);border:1px solid rgba(255,239,164,.34);border-radius:99px;bottom:1.25rem;color:#fff2bd;cursor:pointer;font-size:.75rem;left:50%;padding:.45rem .85rem;position:absolute;transform:translateX(-50%);z-index:3}.back-button:hover{background:rgba(255,245,185,.2)}
.modal{display:grid;inset:0;opacity:0;place-items:center;pointer-events:none;position:fixed;transition:opacity .28s ease;z-index:10}.modal.open{opacity:1;pointer-events:auto}.modal-backdrop{background:rgba(11,11,7,.66);border:0;cursor:pointer;inset:0;position:absolute}.letter{background:linear-gradient(135deg,#fff7d8,#fffdf2 46%,#f7e1a1);border:5px solid #e5bf52;border-radius:25px;box-shadow:0 25px 70px rgba(0,0,0,.55),inset 0 0 0 3px #fff8dc;color:#5a4320;max-height:86svh;max-width:min(90vw,460px);overflow:auto;padding:clamp(2.6rem,6vw,4rem) clamp(1.5rem,6vw,3.3rem) 2rem;position:relative;text-align:center;transform:scale(.82) translateY(15px);transition:transform .35s cubic-bezier(.2,.9,.25,1);width:100%}.modal.open .letter{transform:scale(1) translateY(0)}.close-button{background:#e4ba3f;border:0;border-radius:50%;color:#fffbed;cursor:pointer;font-size:1.45rem;height:30px;line-height:1;position:absolute;right:14px;top:14px;width:30px}.letter-flowers{color:#dfad2d;display:flex;font-size:1.8rem;gap:1rem;justify-content:center}.letter-flowers span:nth-child(2){transform:translateY(-8px) scale(1.25)}.letter-kicker{color:#b1842d;font-size:.68rem;font-weight:700;letter-spacing:.13em;margin:1.1rem 0 .25rem;text-transform:uppercase}.letter h3{color:#59431f;font-family:Caveat,cursive;font-size:clamp(2.3rem,8vw,3.7rem);font-weight:600;line-height:.9;margin:.1rem 0 1.2rem}.letter #modalText{font-size:clamp(1rem,2vw,1.15rem);line-height:1.65;margin:0}.letter-line{background:#d7ad45;height:1px;margin:1.4rem auto .8rem;width:52%}.letter-signature{color:#9a742d;font-family:Caveat,cursive;font-size:1.35rem;margin:0}@keyframes twinkle{to{opacity:.2;transform:scale(.55)}}@media(max-width:600px){.scene-flower{--scale:calc(var(--scale) * .82)}.flower-label{font-size:.56rem}.galaxy-title{top:1.3rem}.letter{border-radius:20px}}@media(prefers-reduced-motion:reduce){*,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}