Exercise 2: Confirming Scoped Styles Don't Leak — Possible Solution
====================================================================

---
// src/components/SidebarNav.astro
---

<nav class="breadcrumb">
  <a href="/">Home</a>
  <a href="/settings">Settings</a>
</nav>

<style>
  .breadcrumb {
    flex-direction: column;
    background: #161b22;
  }
</style>

CONFIRMATION
------------------------------
Even though SidebarNav.astro reuses the exact same class name,
.breadcrumb, as PageLayout's own breadcrumb nav, Astro's automatic
scoping adds a unique attribute to each component's own elements at
build time - SidebarNav's own .breadcrumb rule (column layout, dark
surface background) never applies to PageLayout's breadcrumb, and
PageLayout's own rules (flex row, hover color) never apply to
SidebarNav either.

WHY THIS WORKS AS AN ANSWER
------------------------------
It correctly reuses the identical class name deliberately, to
demonstrate that Astro's own automatic scoping - not naming
discipline - is what prevents the two components' own rules from
colliding.