Styling & Matching the Existing Site's Own Look

Chapters 4 and 5 were entirely about function — two working conversion paths, styled with nothing but the browser's own defaults. This chapter makes the page actually look like it belongs on the real site it's meant to join, reusing this site's own already-established design conventions rather than inventing a new look from scratch.

Reusing the Site's Own Established Tool Palette

This project doesn't need to invent a dark theme — one already exists, documented directly in my_tools_rules.md's own rule MT4 for exactly this kind of self-contained interactive page: background #0f1117, card and input surfaces #1a1d27, a secondary nested surface #161b22, borders #30363d, body text #c9d1d9, muted text #8b949e. Reusing it here — rather than picking new hex codes that happen to look similar — means this converter genuinely matches every other real interactive tool already on the site, not just an approximation of the look.

Which Accent Color Actually Belongs Here?

Every chapter of this course's own written material has used Astro's real brand orange, and it's tempting to just carry that straight into the actual tool. But MT4 itself is explicit about this exact decision: "reusing an already-established site accent where a natural fit exists... rather than inventing a new one for every tool by default" — the same rule that had agent-builder.html reuse the Claude Code Agents courses' own coral, since that tool is specifically Claude-Code-related.

Japanese red wins on the real criterion MT4 itself names — a natural fit, not a coin flip — and it has the genuine added benefit of visually tying this tool to the exact pages Chapter 8's own capstone plans to link it from and to.

A Real, Verified Astro-Specific Finding: You Might Not Need Manual Scoping Here At All

my_tools_rules.md's own MT4 also carries a strict, hard-won rule: every CSS selector in a My Tools page must be scoped under that tool's own wrapper class, never left as a bare element selector like input or button — a rule that exists because a real leak bug from exactly that mistake was found and fixed in agent-builder.html. It's worth checking, directly, whether that same risk actually applies to index.astro — rather than assuming the rule transfers unchanged.

Verified directly against Astro's own current documentation: a <style> block written inside a real .astro file is automatically scoped by the Astro compiler itself — every selector, including plain element selectors with no class at all, gets rewritten to carry a unique data-astro-cid-* attribute, both on the CSS side and on the rendered HTML elements themselves. A rule as bare as input { ... } genuinely only ever applies to inputs rendered by that exact component.

Scoping Anyway, On Purpose

Even with that real, verified finding in hand, this chapter still wraps the whole page in one container class — not because today's file needs it, but because Chapter 8's own capstone is about actually mounting this converter onto the live site, and exactly how that happens is still an open question at this point in the course. If that integration ever moves this markup out of a standalone, Astro-compiled page and into the site's own injected-fragment system (the same real mechanism MT4's rule protects), a wrapper class already being in place costs nothing today and removes one entire category of future risk later. Cheap insurance, not a correction of a bug that doesn't exist yet.

The Real Styling

Everything below sits inside one wrapping <div class="romaji-page"> in the page's own body, with the client-side box from Chapter 4 and the server-side box from Chapter 5 each styled as their own labeled card, so the two approaches Chapter 5 compared stay visually distinguishable rather than blurring into one form:

The markup itself, wrapping both Chapter 4's and Chapter 5's own boxes in the new classes — no element ids change, so neither script needs a single line touched:

Resizing the browser across the 600px breakpoint confirms the responsive behavior directly — above it, each card's own hiragana and katakana boxes sit side by side; below it, they stack into a single column, keeping both fully readable on a real phone-width screen without any horizontal scrolling.

Hands-On Exercises