Responsive Mortgage Calculator using TailwindCSS & Zod

What are you most proud of, and what would you do differently next time?

• It was easier than I thought to format the amount's input without using a third-party library. But it led to accessibility issues mostly on mobile (the input is no longer of type number, but text). Next time I'll probably use a library like Cleave.js so I won't have to deal with all the side effects.
• I'm happy I got the opportunity to experiment with Zod for client-side data validation (even if it was probably overkill here, but it made error handling way easier and much more flexible).
• I tried experimenting with CSS grid for mobile responsiveness.

What challenges did you encounter, and how did you overcome them?

• I struggled so much on changing the color of the radio buttons. It seems that I can't change it directly, since it is browser dependant (?). I had to make it invisible and replace it with 2 divs placed one inside another with absolute positioning, which resulted in slightly different layout with different browsers/screens. Next time I'll probably use an image instead. Any advice is much appreciated.
• I'm still having trouble with the content of my page wrapping along the vertical axis on small width, and overflowing its container (I can't find a way to crop the content when I reduce the width).
• I couldn't expand the background of the result's section to match full remaining height, so it poses an issue on large vertical screens.