@import url("https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Comic+Neue:wght@400;700&display=swap");*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Neue,cursive;background:linear-gradient(135deg,#87ceeb,#4682b4 50%,#191970);min-height:100vh;color:#333}.ocean-background{background-image:radial-gradient(circle at 20% 50%,hsla(0,0%,100%,.1) 1px,transparent 0),radial-gradient(circle at 60% 30%,hsla(0,0%,100%,.1) 1px,transparent 0),radial-gradient(circle at 80% 70%,hsla(0,0%,100%,.1) 1px,transparent 0);min-height:100vh;position:relative}.ocean-background:before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='20' cy='20' r='2' fill='rgba(255,255,255,0.1)'/><circle cx='70' cy='40' r='1.5' fill='rgba(255,255,255,0.1)'/><circle cx='50' cy='70' r='1' fill='rgba(255,255,255,0.1)'/><circle cx='80' cy='80' r='2.5' fill='rgba(255,255,255,0.1)'/></svg>");background-size:300px 300px;animation:float 20s ease-in-out infinite}.ocean-background:after,.ocean-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.ocean-background:after{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'><path d='M20 400 Q15 350 25 300 Q10 250 30 200 Q20 150 25 100 Q15 50 20 0' stroke='%23228B22' stroke-width='8' fill='none' opacity='0.3'/><path d='M60 400 Q70 350 55 300 Q75 250 50 200 Q65 150 60 100 Q70 50 65 0' stroke='%2332CD32' stroke-width='6' fill='none' opacity='0.2'/><path d='M180 400 Q175 350 185 300 Q170 250 190 200 Q180 150 185 100 Q175 50 180 0' stroke='%23228B22' stroke-width='8' fill='none' opacity='0.3'/><path d='M140 400 Q150 350 135 300 Q155 250 130 200 Q145 150 140 100 Q150 50 145 0' stroke='%2332CD32' stroke-width='6' fill='none' opacity='0.2'/></svg>");background-size:200px 100%;background-repeat:repeat-x;animation:sway 15s ease-in-out infinite;z-index:0}@keyframes sway{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(10px) rotate(1deg)}50%{transform:translateX(-5px) rotate(-.5deg)}75%{transform:translateX(8px) rotate(.8deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.main-container{max-width:1200px;margin:0 auto;padding:20px;position:relative;z-index:1}.header{text-align:center;margin-bottom:40px;background:hsla(0,0%,100%,.95);padding:30px;border-radius:25px;box-shadow:0 10px 30px rgba(0,0,0,.2);border:4px solid gold}.logo-container{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:15px}.logo-image{width:150px;height:150px;object-fit:contain;border-radius:20px;border:4px solid gold;box-shadow:0 8px 25px rgba(0,0,0,.2);animation:bobFloat 3s ease-in-out infinite}@keyframes bobFloat{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}.logo-text{font-family:Arial,sans-serif;font-size:3.5rem;font-weight:700;color:gold;transform:rotate(-2deg);text-align:center;letter-spacing:2px}.subtitle{font-size:1.4rem;color:#4682b4;font-weight:700;margin-bottom:10px}.converter-container{background:hsla(0,0%,100%,.95);border-radius:25px;padding:40px;box-shadow:0 15px 40px rgba(0,0,0,.2);border:3px solid #ff69b4;margin-bottom:30px}.converter-form h2{font-family:Arial,sans-serif;font-size:2.2rem;font-weight:700;color:gold;text-align:center;margin-bottom:30px;letter-spacing:1px}.conversion-selectors{display:grid;grid-template-columns:1fr 1fr;grid-gap:25px;gap:25px;margin-bottom:25px}.selector-group{display:flex;flex-direction:column;gap:8px}.selector-group label{font-weight:700;color:#4682b4;font-size:1.1rem}.base-selector{padding:12px 15px;border:3px solid #87ceeb;border-radius:15px;font-size:1rem;font-family:Comic Neue,cursive;background:#fff;color:#333;cursor:pointer;transition:all .3s ease}.base-selector:focus,.base-selector:hover{border-color:#ff69b4;box-shadow:0 5px 15px rgba(255,105,180,.3);outline:none}.input-group{margin-bottom:25px}.input-group label{display:block;font-weight:700;color:#4682b4;margin-bottom:8px;font-size:1.1rem}.number-input{width:100%;padding:15px 20px;border:3px solid #87ceeb;border-radius:15px;font-size:1.2rem;font-family:Comic Neue,cursive;background:#fff;color:#333;transition:all .3s ease}.number-input:focus,.number-input:hover{border-color:#ff69b4;box-shadow:0 5px 15px rgba(255,105,180,.3);outline:none}.convert-button{width:100%;padding:15px 25px;background-image:url(https://cdn.builder.io/api/v1/image/assets%2Fa00f1fb349b44274aaa923bfdb0d8b71%2F010cc697868049a6887a08b9543c9e11?format=webp&width=800);background-size:cover;background-position:50%;background-repeat:no-repeat;border:4px solid #fff;border-radius:20px;font-size:1.3rem;font-weight:700;font-family:Arial,sans-serif;color:#fff;cursor:pointer;transition:all .3s ease;text-shadow:2px 2px 6px rgba(0,0,0,.7);box-shadow:0 8px 20px rgba(255,107,157,.4),inset 0 2px 8px hsla(0,0%,100%,.2);position:relative;overflow:hidden}.convert-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);transition:all .6s ease}.convert-button:active{transform:translateY(-2px) scale(1.01)}.character-response{margin-top:30px}.character-container{display:flex;align-items:flex-start;gap:20px;justify-content:center;flex-wrap:wrap}.character-avatar{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.3);box-shadow:0 10px 25px rgba(0,0,0,.3);border:4px solid #fff;font-size:.9rem;text-align:center;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.speech-bubble{background:#fff;border:3px solid #333;border-radius:20px;padding:20px 25px;position:relative;max-width:400px;box-shadow:0 8px 20px rgba(0,0,0,.2);font-size:1.2rem;font-weight:700;color:#333;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.speech-bubble p{margin:0;line-height:1.4}.speech-arrow{left:-15px;top:50%;transform:translateY(-50%);border-top:15px solid transparent;border-bottom:15px solid transparent;border-right:15px solid #333}.speech-arrow,.speech-arrow:after{position:absolute;width:0;height:0}.speech-arrow:after{content:"";left:3px;top:-12px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:12px solid #fff}.popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.popup-content{position:relative;background:#fff;border-radius:25px;padding:30px;max-width:90vw;max-height:90vh;border:4px solid gold;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .5s ease-out}.popup-close{position:absolute;top:15px;right:20px;background:#ff6b35;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 15px rgba(255,107,53,.4)}.popup-close:hover{transform:scale(1.1);background:#e55a2b}.popup-character{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}.popup-character-image{width:200px;height:200px;object-fit:contain;border-radius:20px;border:4px solid gold;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:bounce 2s ease-in-out infinite}.popup-speech-bubble{background:#fff;border:4px solid #333;border-radius:25px;padding:25px 30px;position:relative;max-width:400px;min-width:250px;box-shadow:0 10px 25px rgba(0,0,0,.2);animation:slideIn .5s ease-out .2s both}.popup-speech-bubble p{margin:0;font-size:1.3rem;font-weight:700;color:#333;line-height:1.4;font-family:Comic Neue,cursive}.popup-speech-arrow{position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-right:20px solid #333}.popup-speech-arrow:after{content:"";position:absolute;left:4px;top:-16px;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid #fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideIn{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@media (max-width:768px){.logo-image{width:120px;height:120px}.logo-text{font-size:2.5rem}.logo-container{gap:15px}.subtitle{font-size:1.1rem}.conversion-selectors{grid-template-columns:1fr;gap:15px}.character-container{flex-direction:column;align-items:center}.speech-bubble{max-width:300px;font-size:1rem}.speech-arrow{left:50%;top:-15px;transform:translateX(-50%);border:15px solid transparent;border-top:none;border-bottom:15px solid #333}.speech-arrow:after{left:-12px;top:3px;border:12px solid transparent;border-top:none;border-bottom:12px solid #fff}.popup-content{padding:20px;margin:20px}.popup-character{flex-direction:column;gap:20px}.popup-character-image{width:150px;height:150px}.popup-speech-bubble{max-width:280px;min-width:200px;padding:20px}.popup-speech-bubble p{font-size:1.1rem}.popup-speech-arrow{left:50%;top:-20px;transform:translateX(-50%);border:20px solid transparent;border-top:none;border-bottom:20px solid #333}.popup-speech-arrow:after{left:-16px;top:4px;border:16px solid transparent;border-top:none;border-bottom:16px solid #fff}}