Romaji to Kana Converter: Astro — Chapter 6, Exercise 1
=====================================================================

TASK
Add the CSS and markup exactly as this chapter describes, then open
browser devtools and inspect a real <input> element on the page.
Confirm it actually carries a data-astro-cid-* attribute, and confirm
the matching CSS rule in the Styles panel targets that exact
attribute rather than a bare "input" selector.

SOLUTION

With the chapter's own <style> block and markup in place, opening
devtools' Elements panel and selecting the #romaji-input element
shows it rendered with an extra attribute that wasn't written in the
source markup at all, something like:

  <input id="romaji-input" type="text" placeholder="e.g. konnichiwa"
         autocomplete="off" data-astro-cid-xxxxxxxx>

(the specific hash after data-astro-cid- varies per project/build --
what matters is that some such attribute is present at all, added
automatically by Astro's own compiler).

Switching to the Styles panel for that same element shows the real
compiled CSS rule, not the plain input[type="text"] written in the
source .astro file:

  .romaji-page input[type="text"][data-astro-cid-xxxxxxxx] { ... }

The exact same hash appears in both the element's own attribute and
the compiled selector, confirming they're genuinely tied together --
Astro rewrote the plain source selector into one that can only ever
match elements carrying its own component's specific identifier.

WHY THIS WORKS AS AN ANSWER
----------------------------
It confirms the chapter's own claim by direct inspection rather than
trusting the written documentation alone -- finding the real
data-astro-cid attribute on the actual rendered element, and
confirming the compiled CSS selector targets that same attribute
rather than remaining the bare selector written in the source file.