ui: fix color contrast of mock code editor keywords in dark mode

[komalharshita]

Description

The code syntax highlighting in the hero section mock editor has insufficient contrast in dark mode. The keyword elements (like def, with, pass) are colored in a dark shade that blends into the editor container. We should update the CSS syntax classes (hvm-kw, hvm-fn, hvm-op) to use brighter, high-contrast colors.

Current Behavior

Syntax highlighting keywords are difficult to read in the code visualizer.

Proposed Solution

1. Locate the syntax color definitions for class hvm-kw, hvm-fn, and hvm-op in the styles.
2. Update the color variables to high-contrast colors (e.g., bright pink/cyan/yellow) that satisfy WCAG 2.1 AA text contrast rules (ratio >= 4.5:1).

Implementation Guidance

• Modify style variables or color rules in index.html style block or static CSS.

Acceptance Criteria

• Keyword text is clearly visible and readable against the black background.
• Contrast ratio is verified using accessibility audit tools.

Contributor Guidelines

Interested in working on this issue?

1. Comment /assign to request assignment.
2. Wait until the issue shows you as the assignee.
3. Create a new branch for your changes.
4. Submit a Pull Request referencing this issue.

Please do not begin working on an issue already assigned to another contributor unless a maintainer confirms it is available.

[pisum-sativum]

/assign

[github-actions]

Hey @pisum-sativum, this issue is already assigned to @komalharshita. Please find another open issue!

[pisum-sativum]

@komalharshita I want to work on this project as a part of Gssoc 2026 kindly assign me this issue.