Modernize demo UI styles using optional CSS variables and layout utilities

[pragya0723cph-alt]

Summary

This PR introduces a small set of optional demo UI styles under the existing
Author's custom styles section in main.css.

The goal is to modernize the default demo appearance while keeping HTML5
Boilerplate lightweight, accessible, and easy to customize or remove.

What’s included

• CSS custom properties for colors
• Improved base typography for the demo page
• A responsive layout utility (.container)
• Simple header/footer styling
• A responsive Grid-based feature layout
• Subtle hover effects and improved focus-visible styles for accessibility

What’s NOT included

• No JavaScript changes
• No new dependencies
• No changes to existing base, helper, or print styles
• No enforced design opinions for production use

Why this change

The current demo page is functional but visually dated. These styles:

• Demonstrate modern CSS practices (custom properties, Grid)
• Improve readability and accessibility
• Remain fully optional and safe to remove

Screenshots

Before / After screenshots attached below.