Best Way to Build a Responsive 401(k) Calculator in Themler?

I’m working on a responsive retirement calculator and would like some advice on the best way to implement this type of interactive financial tool in a Themler-based theme.

The 401k Calculator includes fields for current age, retirement age, salary, existing 401(k) balance, employee contribution rate, employer match, annual investment return, inflation, plan fees, salary growth, withdrawal rate, and catch-up contributions. It then calculates projected retirement savings, compound growth, employer contributions, estimated fees, inflation-adjusted balance, and potential monthly retirement income.

For a calculator with dynamic results, input validation, charts, mobile-friendly form controls, and real-time JavaScript calculations, which implementation would work best in Themler?

Custom HTML, CSS, and JavaScript inside a Themler section
A WordPress shortcode or custom plugin
An iframe embedding the existing calculator
A separate page template with externally loaded scripts

I would especially like to avoid script conflicts, layout problems on mobile devices, slow page loading, and code being removed when the Themler theme is updated or exported.

Has anyone built a similar mortgage, loan, investment, pension, compound interest, or retirement planning calculator with Themler? Any recommendations on responsive layout, accessibility, JavaScript integration, and preserving the custom code would be appreciated.