feat(web): polish frontend UI for visual excellence and accessibility

[AbdelStark]

• Dark mode: full prefers-color-scheme support across CSS, canvas
  visualizations, and diagrams with carefully tuned token palette
• Accessibility: skip-to-content link, ARIA labels/roles on all
  interactive elements and canvases, focus-visible outlines, proper
  label-for associations, aria-live regions for status updates
• Navigation: active section highlighting via IntersectionObserver,
  mobile hamburger menu with slide-in panel, scroll shadow on nav
• Interactions: toast notifications replace alert() for validation
  errors and status feedback, canvas empty states with placeholder
  messages before training starts, smoother slider with Firefox support
• Visual refinements: hero radial gradient background, logo symbol
  badge, layered shadows (ambient+direct), rounded heatmap cells and
  bar chart bars, comparison card "Recommended" badge, section fade-in
  on scroll, training controls card with background surface
• Motion: prefers-reduced-motion respected, explicit transition
  properties (no transition:all), CSS custom properties for durations
  and easings, compositor-friendly transforms
• Responsive: 480px breakpoint for stacked controls, mobile training
  layout, better section and hero scaling, toast positioning
• Typography: tabular-nums for stat values, font-variant-numeric for
  consistent number rendering in training stats

https://claude.ai/code/session_0161HFdyqs4pRWuC3azwwxMi