*{box-sizing:border-box;margin:0;padding:0;}body{font-family:Arial,sans-serif;background-color:#ffe6f2;min-height:100vh;display:flex;flex-direction:column;}.love-calculator{background-color:white;padding:2rem;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.1);text-align:center;max-width:800px;width:90%;margin:20px auto;flex-grow:1;position:relative;z-index:1;}h1{color:#ff4d88;margin-bottom:1rem;font-size:2.2rem;}.input-group{display:flex;gap:1rem;margin:2rem 0;flex-direction:row;}input{flex:1;padding:.8rem;border:2px solid #ffb3d9;border-radius:5px;font-size:1rem;text-align:center;width:100%;}button{background-color:#00d084;color:white;border:none;padding:1rem 2rem;border-radius:5px;cursor:pointer;font-size:1rem;transition:all .3s ease;margin-bottom:2rem;width:auto;display:inline-block;}button:hover{background-color:#0693e3;transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.15);}.result{margin-top:3rem;padding-top:2rem;display:none;}.result.active{display:block;animation:fadeIn .5s;}.percentage{font-size:3rem;color:#ff4d88;font-weight:bold;margin-bottom:1.5rem;}.progress-bar{background-color:#ffe6f2;height:10px;border-radius:5px;overflow:hidden;margin:0 auto;max-width:400px;}.progress{background-color:#ff4d88;height:100%;width:0;transition:width 1s ease-in-out;}.status{margin-top:1.5rem;font-size:1.2rem;color:#333;padding:.5rem 0;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@media (max-width: 768px){.love-calculator{padding:1.5rem;margin:15px auto;}h1{font-size:1.8rem;}.input-group{flex-direction:column;}button{width:100%;padding:1rem;}.percentage{font-size:2.5rem;}.progress-bar{max-width:300px;}}@media (max-width: 480px){.love-calculator{padding:1rem;}h1{font-size:1.6rem;}input{padding:.7rem;font-size:.9rem;}.percentage{font-size:2.2rem;}.status{font-size:1rem;}}