:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}.ocean{position:relative;width:100%;height:100vh;background:linear-gradient(180deg,#001a33,#036 40%,#004080,#0059b3);overflow:hidden}.title{position:absolute;top:2rem;left:50%;transform:translate(-50%);font-size:2.5rem;font-weight:800;letter-spacing:.1em;color:#ffffff26;text-transform:uppercase;z-index:10;pointer-events:none;animation:titlePulse 3s ease-in-out infinite}@keyframes titlePulse{0%,to{opacity:.15;letter-spacing:.1em}50%{opacity:.3;letter-spacing:.15em}}.bubble{position:absolute;bottom:-20px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff6,#ffffff0d);border:1px solid rgba(255,255,255,.2);animation:bubbleRise linear infinite;pointer-events:none}@keyframes bubbleRise{0%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-50vh) scale(1.1);opacity:.5}to{transform:translateY(-110vh) scale(.8);opacity:0}}.seaweed{position:absolute;bottom:0;width:20px;height:120px;background:linear-gradient(to top,#1a5c2a,#2d8a4e);border-radius:40% 60% 0 0;transform-origin:bottom center;animation:sway 2.5s ease-in-out infinite alternate}.seaweed:before,.seaweed:after{content:"";position:absolute;bottom:0;width:16px;border-radius:40% 60% 0 0;background:linear-gradient(to top,#1a5c2a,#2d8a4e);transform-origin:bottom center}.seaweed:before{left:-12px;height:90px;animation:sway 3s ease-in-out infinite alternate-reverse}.seaweed:after{right:-12px;height:100px;animation:sway 2.8s ease-in-out infinite alternate;animation-delay:.3s}@keyframes sway{0%{transform:rotate(-8deg)}to{transform:rotate(8deg)}}.fish{position:absolute;left:-100px;animation:swim linear infinite;z-index:5}@keyframes swim{0%{left:-12%;transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(-3deg)}50%{left:112%;transform:translateY(10px) rotate(2deg)}50.01%{left:-12%}75%{transform:translateY(15px) rotate(-2deg)}to{left:112%;transform:translateY(0) rotate(0)}}.fish-body{position:relative;width:70px;height:36px;border-radius:50% 50% 50% 40%;animation:wiggle .4s ease-in-out infinite alternate}@keyframes wiggle{0%{transform:rotate(-4deg) translateY(-2px)}to{transform:rotate(4deg) translateY(2px)}}.eye{position:absolute;top:8px;left:14px;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:inset 3px 0 #111;z-index:2}.eye:after{content:"";position:absolute;top:2px;left:4px;width:3px;height:3px;background:#fff;border-radius:50%}.mouth{position:absolute;top:18px;left:-2px;width:8px;height:4px;background:#0000004d;border-radius:50%;animation:mouthOpen .8s ease-in-out infinite}@keyframes mouthOpen{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.tail{position:absolute;top:2px;right:-18px;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:22px solid;animation:tailWag .3s ease-in-out infinite alternate;transform-origin:left center}@keyframes tailWag{0%{transform:rotate(-15deg)}to{transform:rotate(15deg)}}.fin-top{position:absolute;top:-12px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid;animation:finFlap .5s ease-in-out infinite alternate;transform-origin:bottom center}@keyframes finFlap{0%{transform:rotate(-10deg) scaleY(.8)}to{transform:rotate(10deg) scaleY(1.1)}}.fin-bottom{position:absolute;bottom:-8px;left:25px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid;animation:finFlap .4s ease-in-out infinite alternate-reverse}.fin-pectoral{position:absolute;bottom:-4px;left:16px;width:14px;height:8px;border-radius:0 0 50% 50%;animation:pectoralFlap .35s ease-in-out infinite alternate;transform-origin:top center}@keyframes pectoralFlap{0%{transform:rotate(-20deg)}to{transform:rotate(20deg)}}.stripe{position:absolute;top:4px;width:4px;height:28px;background:#fff3;border-radius:2px}.stripe-1{left:24px}.stripe-2{left:36px;height:24px;top:6px}.floor{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to top,#2a1a0a,#3d2b1a 40%,transparent)}.floor:before{content:"";position:absolute;bottom:0;left:0;right:0;height:20px;background:repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(139,90,43,.3) 40px,rgba(139,90,43,.3) 45px)}.ocean:before{content:"";position:absolute;top:-20%;left:20%;width:60%;height:120%;background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 70%);transform:skew(-15deg);pointer-events:none;animation:lightShift 8s ease-in-out infinite alternate}.ocean:after{content:"";position:absolute;top:-20%;right:15%;width:40%;height:120%;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 60%);transform:skew(10deg);pointer-events:none;animation:lightShift 10s ease-in-out infinite alternate-reverse}@keyframes lightShift{0%{opacity:.5}to{opacity:1}}