@import "https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fredoka:wght@400;500;600&display=swap";html,body{background:linear-gradient(#fce6d3,#f6cba9);width:100%;height:100%;margin:0;padding:0;overflow:hidden}body.garden{background:linear-gradient(#b9b3e8 0%,#e4bfdc 45%,#f6d0c4 100%)}#scene-container{position:fixed;inset:0}#title{text-align:center;color:#d9577b;text-shadow:0 2px #fff,0 4px 14px #ffffffe6;pointer-events:none;width:90%;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:clamp(22px,5vw,40px);font-weight:600;transition:opacity .35s;position:fixed;top:4vh;left:50%;transform:translate(-50%)}#instruction{color:#c4677f;white-space:nowrap;pointer-events:none;background:#ffffffd9;border-radius:999px;padding:10px 24px;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:clamp(15px,3.8vw,20px);font-weight:500;transition:opacity .35s;animation:2s ease-in-out infinite pulse;position:fixed;bottom:56px;left:50%;transform:translate(-50%);box-shadow:0 6px 16px #c8786440}#instruction.clickable{pointer-events:auto;cursor:pointer;z-index:5}#hint{color:#965a50bf;white-space:nowrap;pointer-events:none;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:13px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}#title.fade,#instruction.fade{opacity:0}@keyframes pulse{0%,to{scale:1}50%{scale:1.05}}#fade{z-index:20;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff6f8,#ffd3e0);transition:opacity .7s;position:fixed;inset:0}#fade.on{opacity:1}#bubble{z-index:5;cursor:pointer;opacity:0;pointer-events:none;width:min(88%,420px);margin:0 auto;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1);position:fixed;top:6vh;left:0;right:0;transform:translateY(20px)scale(.6)}#bubble.show{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.bubble-inner{box-sizing:border-box;text-align:center;background:#fffffff2;border-radius:30px;padding:20px 24px 14px;animation:3s ease-in-out infinite bob;position:relative;box-shadow:0 14px 34px #be64784d,0 0 0 5px #ffbed299}.bubble-inner:after{content:"";background:#fffffff2;border-radius:0 0 8px;width:26px;height:26px;position:absolute;bottom:-14px;left:50%;transform:translate(-50%)rotate(45deg)}#bubble-text{z-index:1;color:#d9577b;margin:0 0 8px;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:clamp(20px,5.2vw,28px);font-weight:600;line-height:1.3;position:relative}.bubble-inner .tap{z-index:1;color:#c9a0ac;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:13px;position:relative}@keyframes bob{0%,to{transform:translateY(0)rotate(-.6deg)}50%{transform:translateY(-9px)rotate(.6deg)}}#letter-overlay{z-index:10;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#fce6eb8c;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}#letter-overlay.show{opacity:1;pointer-events:auto}.paper{box-sizing:border-box;text-align:center;background-color:#fffaf3;background-image:repeating-linear-gradient(#0000 0 33px,#ffb3c759 33px 34px);border-radius:24px;width:min(92%,480px);max-height:86vh;padding:38px 28px 26px;transition:transform .9s cubic-bezier(.34,1.56,.64,1);position:relative;overflow-y:auto;transform:translateY(80px)scale(.85)rotate(-3deg);box-shadow:0 20px 50px #be645a4d,0 0 0 6px #ffffffb3}#letter-overlay.show .paper{transform:translateY(0)scale(1)rotate(0)}.tape{background:#ff9fb8bf;border-radius:4px;width:90px;height:26px;position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(-3deg)}.paper h2{color:#d9577b;margin:0 0 14px;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:clamp(22px,5.6vw,28px);font-weight:600}.paper p{color:#6b4a50;opacity:0;margin:0 0 14px;font-family:Caveat,Segoe Print,cursive;font-size:clamp(20px,4.9vw,23px);font-weight:500;line-height:1.35;transform:translateY(10px)}#letter-overlay.show .paper p{animation:.8s forwards lineIn}#letter-overlay.show .paper p:first-of-type{animation-delay:.6s}#letter-overlay.show .paper p:nth-of-type(2){animation-delay:1.3s}#letter-overlay.show .paper p:nth-of-type(3){animation-delay:2s}#letter-overlay.show .paper p:nth-of-type(4){animation-delay:2.7s}#letter-overlay.show .paper p:nth-of-type(5){animation-delay:3.4s}@keyframes lineIn{to{opacity:1;transform:translateY(0)}}.paper .sign{color:#d9577b;font-size:clamp(24px,6vw,28px);font-weight:700}#close-letter{color:#fff;cursor:pointer;background:#ff9fb8;border:none;border-radius:999px;margin-top:6px;padding:10px 28px;font-family:Fredoka,Trebuchet MS,sans-serif;font-size:17px;font-weight:500;transition:transform .15s;box-shadow:0 5px 12px #d9577b59}#close-letter:hover{transform:scale(1.06)}#close-letter:active{transform:scale(.95)}