*{box-sizing:border-box;margin:0}html,body,#app{height:100%}body{font-family:Georgia,Times New Roman,serif;color:#3d3325;overflow:hidden}button{font:inherit;cursor:pointer}.scene{position:relative;height:100%;overflow:hidden;background:linear-gradient(#6fc3e8,#9edaf0 32%,#cfeaf4 46%,#ffe9c4 55%,#ffd9a0 60%)}.sky{position:absolute;top:0;right:0;bottom:0;left:0}.scene-defs{position:absolute}.sun{position:absolute;top:9%;right:14%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fffbe2,#ffefad 70%);box-shadow:0 0 40px 14px #fff4bee6,0 0 110px 45px #ffecaa73}.haze{position:absolute;left:0;right:0;bottom:42%;height:9%;background:linear-gradient(to top,rgba(255,236,200,.65),transparent)}.cloud{position:absolute}.cloud-a{top:7%;left:10%;width:280px;animation:cloud-drift 90s ease-in-out infinite alternate}.cloud-b{top:17%;left:56%;width:200px;opacity:.75;animation:cloud-drift 65s ease-in-out infinite alternate-reverse}@keyframes cloud-drift{0%{transform:translate(-50px)}to{transform:translate(50px)}}.glitter{position:absolute;top:2%;right:7%;width:280px;z-index:3}.glitter ellipse{opacity:.25}.glitter .g1{animation:glitter-pulse 2.6s ease-in-out 0s infinite}.glitter .g2{animation:glitter-pulse 3.4s ease-in-out .7s infinite}.glitter .g3{animation:glitter-pulse 2.2s ease-in-out 1.3s infinite}.glitter .g4{animation:glitter-pulse 3s ease-in-out .4s infinite}.glitter .g5{animation:glitter-pulse 2.8s ease-in-out 1.8s infinite}.glitter .g6{animation:glitter-pulse 3.6s ease-in-out 1.1s infinite}@keyframes glitter-pulse{0%,to{opacity:.15}50%{opacity:.9}}.sea{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(#d8eef6,#a9d9ea 18%,#5fb0d2 60%,#38809f)}.wave{position:absolute;bottom:0;left:0;width:200%}.wave-far{height:100%;animation:wave-slide 15s ease-in-out infinite alternate-reverse}.wave-back{height:86%;animation:wave-slide 11s ease-in-out infinite alternate}.wave-mid{height:70%;animation:wave-slide 8s ease-in-out infinite alternate-reverse}.wave-front{height:54%;animation:wave-slide 6s ease-in-out infinite alternate;z-index:2}@keyframes wave-slide{0%{transform:translate(0)}to{transform:translate(-25%)}}.paper{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 48px));background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.09 0'/></filter><rect width='260' height='260' filter='url(%23g)'/></svg>") repeat,radial-gradient(ellipse 170px 110px at 76% 16%,rgba(150,110,55,.13),transparent 70%),repeating-linear-gradient(transparent 0 30px,#a0825040 30px,#a0825040 31px),#f7eed6;border-radius:6px;box-shadow:0 12px 40px #1e3c5059,inset 0 0 24px #785a2817;padding:28px;z-index:4}.paper-form textarea{display:block;width:100%;height:240px;border:none;background:transparent;resize:none;font:inherit;font-size:1.05rem;line-height:31px;outline:none}.paper-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.counter{font-size:.85rem;opacity:.6}.seal-btn{border:none;border-radius:999px;padding:10px 22px;background:#1c6a93;color:#fff}.seal-btn:disabled{opacity:.4;cursor:default}.compose .bottle-stage{position:absolute;left:50%;top:44%;width:130px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.compose .cork{opacity:0}.compose[data-phase=bottling] .bottle-stage,.compose[data-phase=floating] .bottle-stage,.compose[data-phase=floating] .cork{opacity:1}.compose[data-phase=bottling] .paper-form,.compose[data-phase=floating] .paper-form,.compose[data-phase=done] .paper-form,.compose[data-phase=done] .bottle-stage{display:none}.link-panel{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 48px));background:#fffdf6;border-radius:12px;padding:28px;box-shadow:0 12px 40px #1e3c5059;text-align:center;display:none;z-index:4}.compose[data-phase=done] .link-panel{display:block}.link-row{display:flex;gap:8px;margin:18px 0 10px}.link-input{flex:1;min-width:0;padding:10px;border:1px solid #d8cfb8;border-radius:8px;font-size:.85rem;background:#faf6ea}.copy-btn{border:none;border-radius:8px;padding:10px 16px;background:#1c6a93;color:#fff;white-space:nowrap}.hint{font-size:.85rem;opacity:.6}.receive{--bottle-close: translate(18vw, -28vh) scale(3.2) rotate(0deg)}.receive .bottle-stage{position:absolute;left:34%;bottom:13%;width:90px;border:none;background:none;padding:0;cursor:pointer;z-index:1}.receive:not([data-phase=adrift]) .bottle-stage{z-index:3}.receive .bottle-svg{display:block;width:100%}.bottle-svg{overflow:visible}.bottle-svg .waterline{opacity:0;transition:opacity .5s}.receive[data-phase=adrift] .waterline{opacity:1}.bottle-svg .ripples ellipse,.bottle-svg .flecks circle,.bottle-svg .cork-drops circle,.bottle-svg .splash circle,.bottle-svg .splash ellipse{opacity:0}.receive[data-phase=adrift] .ripples ellipse{transform-box:fill-box;transform-origin:center;animation:ripple-ring 3.9s linear infinite}.receive[data-phase=adrift] .ripples .r2{animation-delay:1.3s}.receive[data-phase=adrift] .ripples .r3{animation-delay:2.6s}@keyframes ripple-ring{0%{opacity:0;transform:scale(.5)}12%{opacity:.8}to{opacity:0;transform:scale(2)}}.receive[data-phase=adrift] .flecks circle{animation:fleck-pulse 3.2s ease-in-out infinite}.receive[data-phase=adrift] .flecks .f2{animation-delay:.9s}.receive[data-phase=adrift] .flecks .f3{animation-delay:1.7s}.receive[data-phase=adrift] .flecks .f4{animation-delay:2.3s}@keyframes fleck-pulse{0%,to{opacity:.25}50%{opacity:.85}}.hint-adrift{position:absolute;left:50%;top:18%;transform:translate(-50%);font-size:1.1rem;font-style:italic;color:#245a78;opacity:.85}.receive:not([data-phase=adrift]) .hint-adrift{display:none}.receive[data-phase=uncork] .bottle-stage,.receive[data-phase=unroll] .bottle-stage,.receive[data-phase=done] .bottle-stage{animation:none;transform:var(--bottle-close);cursor:default}.receive[data-phase=unroll] .cork,.receive[data-phase=done] .cork{opacity:0}.receive[data-phase=unroll] .paper-roll,.receive[data-phase=done] .paper-roll{opacity:0;transition:opacity .3s}.paper-message{visibility:hidden;max-height:60vh;overflow-y:auto}.message-text{white-space:pre-wrap;overflow-wrap:break-word;font-size:1.05rem;line-height:31px}.receive[data-phase=unroll] .paper-message,.receive[data-phase=done] .paper-message{visibility:visible}.paper-lost{background:#efe9da;color:#9a8f7a}.again-btn{position:absolute;left:50%;bottom:7%;transform:translate(-50%);border:none;border-radius:999px;padding:10px 22px;background:#ffffffd9;color:#1c6a93;box-shadow:0 4px 16px #1e3c5040;display:none;z-index:4}.receive[data-phase=done] .again-btn{display:block}.compose[data-phase=rolling] .paper-form{top:calc(44% - 174px);animation:roll-up 2.2s cubic-bezier(.45,.05,.55,.95) forwards;overflow:hidden}.compose[data-phase=rolling] .paper-form:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;border-radius:999px;background:linear-gradient(#f5ecd2,#e0cfa2 55%,#bfa878);box-shadow:0 3px 8px #3c280a59}.compose[data-phase=rolling] .paper-form:before{content:"";position:absolute;left:0;right:0;bottom:24px;height:18px;background:linear-gradient(to top,rgba(110,85,40,.28),transparent);z-index:1}@keyframes roll-up{0%{max-height:348px;border-radius:6px;transform:translate(-50%) scaleX(1) rotate(0)}55%{border-radius:6px;transform:translate(-50%) scaleX(1) rotate(.8deg)}70%{max-height:30px;border-radius:999px;transform:translate(-50%) scaleX(1) rotate(0)}82%{transform:translate(-50%) scaleX(.26) rotate(0)}to{max-height:30px;border-radius:999px;transform:translate(-50%,160px) scaleX(.26) rotate(0)}}.compose[data-phase=bottling] .bottle-stage{animation:bottle-pop .5s ease-out both}@keyframes bottle-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.compose[data-phase=bottling] .cork{animation:cork-in .45s ease-in .55s both}@keyframes cork-in{0%{transform:translateY(-60px);opacity:0}to{transform:translateY(0);opacity:1}}.compose[data-phase=floating] .bottle-stage{animation:bottle-away 3s ease-in-out forwards}@keyframes bottle-away{0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}28%{transform:translate(-50%,14vh) scale(.74) rotate(-26deg);opacity:1}36%{transform:translate(-50%,21vh) scale(.68) rotate(-58deg)}46%{transform:translate(-48%,18.5vh) scale(.68) rotate(-40deg)}58%{transform:translate(-46%,20.5vh) scale(.68) rotate(-54deg)}70%{transform:translate(-42%,19.5vh) scale(.67) rotate(-46deg)}to{transform:translate(30vw,22vh) scale(.5) rotate(-50deg);opacity:0}}.compose[data-phase=floating] .splash .s-foam{transform-box:fill-box;transform-origin:center;animation:splash-foam .9s ease-out 1s both}.compose[data-phase=floating] .splash circle{transform-box:fill-box;transform-origin:center;animation:splash-drop .75s ease-out 1s both}.compose[data-phase=floating] .splash .s1{--dx: -52px;--dy: -66px}.compose[data-phase=floating] .splash .s2{--dx: -26px;--dy: -88px;animation-delay:1.05s}.compose[data-phase=floating] .splash .s3{--dx: 4px;--dy: -78px}.compose[data-phase=floating] .splash .s4{--dx: 30px;--dy: -92px;animation-delay:1.05s}.compose[data-phase=floating] .splash .s5{--dx: 56px;--dy: -62px}.compose[data-phase=floating] .splash .s6{--dx: 0px;--dy: -44px;animation-delay:1.1s}@keyframes splash-drop{0%{opacity:0;transform:translate(0) scale(.5)}18%{opacity:.95}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}@keyframes splash-foam{0%{opacity:0;transform:scaleX(.4)}25%{opacity:.9}to{opacity:0;transform:scaleX(1.8)}}.compose[data-phase=done] .link-panel{animation:rise .5s ease-out}@keyframes rise{0%{transform:translate(-50%,-40%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}.receive[data-phase=adrift] .bottle-stage{animation:bob-drift 3.7s ease-in-out infinite}.receive[data-phase=adrift] .bottle-svg{animation:bob-tilt 5.3s ease-in-out infinite}.receive .bottle-svg{transition:transform .4s ease-out}.receive:not([data-phase=adrift]) .bottle-svg{animation:none}@keyframes bob-drift{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes bob-tilt{0%,to{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}.receive[data-phase=adrift] .glint{animation:glint 2.8s ease-in-out infinite}@keyframes glint{0%,74%,to{opacity:.45}85%{opacity:1}}.receive[data-phase=approach] .bottle-stage{animation:bottle-approach 1.2s ease-in-out forwards}@keyframes bottle-approach{0%{transform:translateY(0) rotate(0) scale(1)}to{transform:var(--bottle-close)}}.receive[data-phase=uncork] .cork-drops circle{transform-box:fill-box;transform-origin:center;animation:splash-drop .45s ease-out .05s both}.receive[data-phase=uncork] .cork-drops .cd1{--dx: -14px;--dy: -26px}.receive[data-phase=uncork] .cork-drops .cd2{--dx: 2px;--dy: -34px;animation-delay:.12s}.receive[data-phase=uncork] .cork-drops .cd3{--dx: 16px;--dy: -24px}.receive[data-phase=uncork] .cork{animation:cork-pop .6s ease-out forwards}@keyframes cork-pop{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(40px,-140px) rotate(50deg);opacity:0}}.receive[data-phase=unroll] .paper-message,.receive[data-phase=done] .paper-message{top:22%;transform:translate(-50%)}.receive[data-phase=unroll] .paper-message{animation:paper-unroll 1.8s cubic-bezier(.5,.05,.45,.95) both;overflow:hidden}.receive[data-phase=unroll] .paper-message:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;border-radius:999px;background:linear-gradient(#f5ecd2,#e0cfa2 55%,#bfa878);box-shadow:0 3px 8px #3c280a59;animation:tube-fade 1.8s both}.receive[data-phase=unroll] .paper-message:before{content:"";position:absolute;left:0;right:0;bottom:24px;height:18px;background:linear-gradient(to top,rgba(110,85,40,.28),transparent);animation:tube-fade 1.8s both;z-index:1}@keyframes paper-unroll{0%{max-height:30px;border-radius:999px;transform:translate(-50%) scaleX(.26)}16%{max-height:34px;border-radius:999px;transform:translate(-50%) scaleX(1)}28%{border-radius:6px}to{max-height:60vh;border-radius:6px;transform:translate(-50%) scaleX(1)}}@keyframes tube-fade{0%,82%{opacity:1}to{opacity:0}}.receive[data-phase=done] .again-btn{animation:fade-in .6s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}