:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;overflow:hidden}.beach{position:relative;width:100vw;height:100vh;background:linear-gradient(180deg,#87ceeb,#b0e0ff 40%,#ffe4b5 65%,#ffdab9 72%,#f4c430 72.1%,#e8c547);overflow:hidden}.sun{position:absolute;top:6%;right:15%;width:100px;height:100px;background:radial-gradient(circle,#FFF7AA 30%,#FFD700 60%,transparent 70%);border-radius:50%;animation:pulse-sun 4s ease-in-out infinite}.sun:after{content:"";position:absolute;top:-30px;right:-30px;bottom:-30px;left:-30px;background:radial-gradient(circle,rgba(255,215,0,.3) 30%,transparent 70%);border-radius:50%;animation:glow 3s ease-in-out infinite alternate}@keyframes pulse-sun{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes glow{0%{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.cloud{position:absolute;background:#fff;border-radius:50%;opacity:.9}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{width:120px;height:40px;top:8%;left:-150px;animation:drift 35s linear infinite}.cloud-1:before{width:50px;height:50px;top:-25px;left:20px}.cloud-1:after{width:70px;height:55px;top:-30px;left:45px}.cloud-2{width:90px;height:30px;top:14%;left:-120px;animation:drift 50s linear infinite;animation-delay:-15s;opacity:.7}.cloud-2:before{width:40px;height:40px;top:-20px;left:15px}.cloud-2:after{width:55px;height:45px;top:-25px;left:35px}.cloud-3{width:100px;height:35px;top:5%;left:-130px;animation:drift 42s linear infinite;animation-delay:-8s;opacity:.8}.cloud-3:before{width:45px;height:45px;top:-22px;left:18px}.cloud-3:after{width:60px;height:50px;top:-28px;left:40px}@keyframes drift{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.ocean{position:absolute;bottom:28%;left:0;right:0;height:30%;background:linear-gradient(180deg,#20b2aa,#008b8b 30%,#066)}.wave{position:absolute;width:200%;left:-50%;height:60px}.wave-1{top:-25px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%2320B2AA' d='M0,30 C240,0 480,60 720,30 C960,0 1200,60 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x;background-size:1440px 60px;animation:wave-move 6s linear infinite}.wave-2{top:-15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%2300CED1' d='M0,35 C200,10 400,55 600,30 C800,5 1000,55 1200,30 C1400,5 1440,35 1440,35 L1440,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x;background-size:1440px 60px;animation:wave-move 8s linear infinite reverse;opacity:.6}.wave-3{top:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23008B8B' d='M0,40 C300,15 600,55 900,30 C1200,5 1440,40 1440,40 L1440,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x;background-size:1440px 60px;animation:wave-move 10s linear infinite;opacity:.4}@keyframes wave-move{0%{transform:translate(0)}to{transform:translate(50%)}}.ocean-sparkle{position:absolute;width:100%;height:100%;background:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(2px 2px at 50% 50%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(2px 2px at 75% 20%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(2px 2px at 30% 70%,rgba(255,255,255,.3) 50%,transparent 50%),radial-gradient(2px 2px at 85% 60%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(2px 2px at 10% 80%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(2px 2px at 60% 10%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(2px 2px at 40% 90%,rgba(255,255,255,.3) 50%,transparent 50%);animation:sparkle 3s ease-in-out infinite alternate}@keyframes sparkle{0%{opacity:.3}to{opacity:.8}}.sand{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(180deg,#f4c430,#e8c547 20%,#daa520)}.sand:before{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(180deg,#c8a84e,#daa520)}.sand:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(1px 1px at 10% 20%,rgba(0,0,0,.08) 50%,transparent 50%),radial-gradient(1px 1px at 30% 60%,rgba(0,0,0,.06) 50%,transparent 50%),radial-gradient(1px 1px at 50% 30%,rgba(0,0,0,.07) 50%,transparent 50%),radial-gradient(1px 1px at 70% 80%,rgba(0,0,0,.05) 50%,transparent 50%),radial-gradient(1px 1px at 90% 40%,rgba(0,0,0,.06) 50%,transparent 50%),radial-gradient(1px 1px at 20% 90%,rgba(0,0,0,.04) 50%,transparent 50%),radial-gradient(1px 1px at 60% 10%,rgba(0,0,0,.07) 50%,transparent 50%),radial-gradient(1px 1px at 80% 50%,rgba(0,0,0,.05) 50%,transparent 50%)}.shoreline{position:absolute;bottom:28%;left:0;right:0;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 20'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,10 Q60,0 120,10 T240,10 T360,10 T480,10 T600,10 T720,10 T840,10 T960,10 T1080,10 T1200,10 T1320,10 T1440,10 L1440,20 L0,20 Z'/%3E%3C/svg%3E") repeat-x;background-size:1440px 20px;animation:shoreline-move 4s ease-in-out infinite alternate}@keyframes shoreline-move{0%{transform:translateY(0) scaleY(1)}to{transform:translateY(-8px) scaleY(1.3)}}.palm-tree{position:absolute;bottom:28%}.palm-tree-1{left:8%}.palm-tree-2{right:10%;transform:scaleX(-1);bottom:29%}.trunk{position:absolute;bottom:0;left:50%;width:18px;height:180px;background:linear-gradient(90deg,#8b6914,#a0782c 40%,#8b6914);border-radius:4px;transform:translate(-50%) rotate(-5deg);transform-origin:bottom center}.trunk:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 12px,rgba(0,0,0,.15) 12px,rgba(0,0,0,.15) 14px)}.palm-leaves{position:absolute;bottom:160px;left:50%;transform:translate(-50%)}.leaf{position:absolute;width:120px;height:30px;background:#228b22;border-radius:0 50% 50% 0;transform-origin:0% 50%}.leaf:before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:#00640066;transform:translateY(-50%)}.leaf-1{transform:rotate(-20deg)}.leaf-2{transform:rotate(-50deg)}.leaf-3{transform:rotate(-80deg)}.leaf-4{transform:rotate(10deg) scaleY(-1)}.leaf-5{transform:rotate(40deg) scaleY(-1)}.leaf-6{transform:rotate(-130deg);animation:sway-leaf 3s ease-in-out infinite}.leaf-7{transform:rotate(70deg) scaleY(-1);animation:sway-leaf 3.5s ease-in-out infinite reverse}@keyframes sway-leaf{0%,to{transform:rotate(-130deg)}50%{transform:rotate(-125deg)}}.coconuts{position:absolute;bottom:165px;left:50%;transform:translate(-50%)}.coconut{position:absolute;width:16px;height:14px;background:radial-gradient(ellipse,#6b3a10 40%,#4a2508);border-radius:50%}.coconut-1{left:-10px;top:0}.coconut-2{left:2px;top:-5px}.coconut-3{left:12px;top:2px}.seagull{position:absolute;font-size:0}.seagull:before,.seagull:after{content:"";position:absolute;background:#333;width:20px;height:6px;border-radius:50% 50% 0 0}.seagull:before{transform:rotate(-25deg);transform-origin:right center}.seagull:after{left:18px;transform:rotate(25deg);transform-origin:left center}.seagull-1{top:18%;left:25%;animation:fly1 12s ease-in-out infinite}.seagull-2{top:12%;left:55%;animation:fly2 15s ease-in-out infinite;transform:scale(.7)}.seagull-3{top:22%;left:70%;animation:fly3 10s ease-in-out infinite;transform:scale(.5)}@keyframes fly1{0%,to{transform:translate(0)}25%{transform:translate(40px,-15px)}50%{transform:translate(80px,5px)}75%{transform:translate(40px,-10px)}}@keyframes fly2{0%,to{transform:translate(0) scale(.7)}33%{transform:translate(-30px,-20px) scale(.7)}66%{transform:translate(-60px,10px) scale(.7)}}@keyframes fly3{0%,to{transform:translate(0) scale(.5)}50%{transform:translate(50px,-25px) scale(.5)}}.umbrella{position:absolute;bottom:28%;left:35%}.umbrella-pole{position:absolute;bottom:0;left:50%;width:6px;height:120px;background:linear-gradient(90deg,#888,#bbb,#888);transform:translate(-50%) rotate(8deg);transform-origin:bottom center;border-radius:3px}.umbrella-canopy{position:absolute;bottom:110px;left:50%;width:140px;height:70px;background:conic-gradient(from 180deg,#f44,#f44 30deg,gold 30deg,gold 60deg,#f44 60deg,#f44 90deg,gold 90deg,gold 120deg,#f44 120deg,#f44 150deg,gold 150deg,gold 180deg);border-radius:70px 70px 0 0;transform:translate(-50%)}.towel{position:absolute;bottom:27%;left:30%;width:80px;height:35px;background:repeating-linear-gradient(90deg,#ff6b6b,#ff6b6b 10px,#fff 10px,#fff 20px);border-radius:3px;transform:rotate(-5deg);opacity:.9}.beach-ball{position:absolute;bottom:27.5%;left:48%;width:30px;height:30px;border-radius:50%;background:conic-gradient(#f44,#f44 90deg,gold 90deg,gold 180deg,#4a4 180deg,#4a4 270deg,#48f 270deg,#48f 360deg);animation:ball-bounce 2s ease-in-out infinite}.beach-ball:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:#fff;border-radius:50%}@keyframes ball-bounce{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(20deg)}}.starfish{position:absolute;bottom:26%;left:60%;width:28px;height:28px;background:#e8734a;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:rotate(15deg)}.shell{position:absolute;bottom:25.5%;left:55%;width:18px;height:14px;background:radial-gradient(ellipse,bisque 30%,#deb887);border-radius:50% 50% 0 0;transform:rotate(-10deg)}.shell:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);border-radius:inherit}.boat{position:absolute;top:38%;left:65%;animation:bob 4s ease-in-out infinite}.boat-hull{width:60px;height:20px;background:#8b4513;border-radius:0 0 50% 50%}.boat-sail{position:absolute;bottom:18px;left:22px;width:0;height:0;border-left:0px solid transparent;border-right:22px solid transparent;border-bottom:35px solid #FFFFFF;filter:drop-shadow(1px 0 0 rgba(0,0,0,.1))}.boat-mast{position:absolute;bottom:18px;left:22px;width:2px;height:38px;background:#654321}@keyframes bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}