diff --git a/.claude/skills/a11y-audit.md b/.claude/commands/a11y-audit.md
similarity index 100%
rename from .claude/skills/a11y-audit.md
rename to .claude/commands/a11y-audit.md
diff --git a/.claude/commands/add-solution.md b/.claude/commands/add-solution.md
new file mode 100644
index 000000000..f0f669d9d
--- /dev/null
+++ b/.claude/commands/add-solution.md
@@ -0,0 +1,216 @@
+---
+name: add-solution
+description: >
+  Generate a structured TypeScript solution file for a challenge.
+  Accepts any input format: markdown, YAML, HTML, or plain text.
+  Downloads and converts images to WebP. Produces a file at
+  src/data/solutions/<adventure-id>/<level-id>.ts that matches
+  the Solution type in src/data/solutions/types.ts.
+---
+
+# Add Solution Command
+
+Generate a structured TypeScript solution walkthrough for an OffOn challenge.
+
+## What this command does
+
+1. Gathers inputs, inferring what it can from the content before asking.
+2. Parses the solution input (any format) into structured steps.
+3. Downloads any referenced images and converts them to WebP using `cwebp`.
+4. Writes `src/data/solutions/<adventure-id>/<level-id>.ts` with the structured content.
+5. Runs the generator to update `src/data/solutions/index.ts` and all region patches.
+6. Runs the build to verify the output compiles.
+
+---
+
+## Step 0: Gather inputs
+
+If the user already provided solution content (pasted HTML, markdown, plain text, or a file path), treat that as the content — do not ask for it again.
+
+For each remaining input, **first try to infer it from the content** before asking. If a value can be inferred with confidence, show it to the user for confirmation rather than asking a blank question.
+
+| Input | Required | How to infer |
+| --- | --- | --- |
+| Adventure ID | Yes | Look for the challenge or adventure name in the content (title, headings, kicker). Convert to kebab-case. |
+| Level ID | Yes | Look for difficulty words in the content (`beginner`, `intermediate`, `expert`). |
+| Contributor name | No | Look for an author credit in the content. If not found, ask: "Who wrote this walkthrough? (leave blank to omit)" |
+
+If adventure ID or level ID cannot be inferred confidently, ask for them directly.
+
+Confirm all inferred values with the user before proceeding. A single confirmation message is better than multiple rounds of questions.
+
+---
+
+## Step 1: Locate the adventure
+
+Find the adventure in `src/data/adventures/index.ts` or the generated files to confirm the IDs are valid:
+
+```bash
+grep -r "id: \"<adventure-id>\"" src/data/adventures/
+```
+
+Also confirm the level exists within that adventure. If either ID does not match, stop and report it.
+
+---
+
+## Step 2: Parse the input into structured steps
+
+Read the input regardless of format (markdown, YAML, HTML, plain text). Extract:
+
+- **`title`** — solution title, e.g. "Intermediate Solution: Governing the Provinces". Never include difficulty emoji. No em dashes.
+- **`contributor`** — `{ name: string }` if a contributor was provided. Omit the field entirely if unknown.
+- **`spoilerWarning`** — one sentence. Plain text, no markdown.
+- **`intro`** — one or two sentences. Plain text, no markdown.
+- **`context`** (optional) — a setup section that explains the tooling or architecture the reader needs to understand before the steps. Title should reflect the specific challenge, not a generic phrase. Use "Understanding the Setup" only if nothing more specific fits.
+- **`steps`** — one per numbered objective. Each step:
+  - `id` — kebab-case, no numbers (e.g. `census-scope`, `isolated-namespaces`)
+  - `title` — title case, no leading emoji
+  - `intro` — one to two sentences, plain text
+  - `body` — array of `SolutionBlock` (see below). Code patches go here as `code` blocks.
+  - `takeaways` — plain-text strings, sentence case. Preserve all takeaways from the source. Omit only if a step has no non-obvious insight to share.
+  - `furtherReading` — array of `{ title, url }`. These are aggregated into the sidebar across all steps; do not duplicate a URL across multiple steps.
+- **`completeSolution`** (optional) — final corrected config or runbook shown as a summary at the end.
+- **`outro`** — narrative closing. End with a sentence that follows the adventure's story world, then invite the reader to see how others solved it. Do not use "Got there by a different route?" or similar generic phrases.
+
+### SolutionBlock types
+
+```typescript
+| { type: "text"; html: string }        // HTML paragraph or list
+| { type: "code"; language: string; title?: string; code: string }
+| { type: "image"; src: string; alt: string; caption?: string }
+| { type: "callout"; variant: "tip" | "warning" | "info"; html: string }
+```
+
+**Text blocks:** Write minimal HTML. Use `<p>`, `<ul>`, `<li>`, `<strong>`, `<code>`, and `<a href="...">` only. No `<h1>`–`<h6>` inside text blocks. No em dashes.
+
+**Callout guidance:**
+
+- `tip` — shortcuts, optional improvements
+- `warning` — footguns, things that silently go wrong
+- `info` — neutral context that does not fit in the main prose
+
+---
+
+## Step 3: Process images
+
+For every image referenced in the input:
+
+1. **Identify the image URL or local path.**
+
+2. **Download it** to `/tmp/<filename>` using `curl`:
+
+   ```bash
+   curl -sL "<url>" -o /tmp/<filename>
+   ```
+
+3. **Convert to WebP** using `cwebp` at quality 85:
+
+   ```bash
+   /opt/homebrew/bin/cwebp -q 85 /tmp/<filename> -o "public/solutions/<adventure-id>/<level-basename>.webp"
+   ```
+
+   Naming convention: `<level-id>-<descriptive-slug>.webp`. Example: `beginner-no-apps.webp`.
+
+4. **Write alt text:** describe what is shown (not what it means), one sentence under 100 characters, no em dashes, no "image of" or "screenshot of" filler.
+
+5. **Set `src`** in the TypeScript file to `/solutions/<adventure-id>/<filename>.webp`.
+
+If `cwebp` is not available, report the path to the user and skip conversion.
+
+---
+
+## Step 4: Write the TypeScript file
+
+Create `src/data/solutions/<adventure-id>/<level-id>.ts`:
+
+```typescript
+import type { Solution } from "@/data/solutions/types";
+
+export const solution: Solution = {
+  adventureId: "<adventure-id>",
+  levelId: "<level-id>",
+  title: "<Title>",
+  // contributor: { name: "<Name>" },   // include if known; omit entirely if not
+  spoilerWarning: "<one sentence>",
+  intro: "<one or two sentences>",
+  // context: {                          // include only when needed
+  //   title: "<Specific Title>",
+  //   body: [ /* SolutionBlock[] */ ],
+  // },
+  steps: [
+    {
+      id: "<kebab-id>",
+      title: "<Title Case>",
+      intro: "<plain text>",
+      body: [ /* SolutionBlock[] */ ],
+      takeaways: [ /* plain-text strings */ ],
+      furtherReading: [ /* { title, url }[] */ ],
+    },
+    // ... more steps
+  ],
+  // completeSolution: {                 // include when there is a single corrected artefact
+  //   title: "Complete <Thing>",
+  //   description: "<one sentence>",
+  //   language: "<yaml|bash|typescript|...>",
+  //   code: `<the full corrected code>`,
+  // },
+  outro: {
+    heading: "<Story-world heading>",
+    html: "<p><Narrative close following the adventure story.></p><p><Invite to see how others solved it.></p>",
+  },
+};
+```
+
+Rules:
+
+- Use template literals for multi-line `code` values.
+- No `@ts-ignore`, no `any`.
+- Code block content goes in the `code` field as raw text, never in HTML text blocks.
+- No em dashes in any string value.
+- Optional fields (`contributor`, `context`, `completeSolution`) must be omitted entirely when not used, not set to `null` or `undefined`.
+
+---
+
+## Step 5: Run the generator and verify
+
+```bash
+node scripts/generate-solutions.mjs
+npm run build
+npm run lint
+```
+
+If lint or build fail, fix the issues before reporting done.
+
+---
+
+## Step 6: Verify the output
+
+Check the built HTML contains the solution title:
+
+```bash
+grep -c "<solution-title-fragment>" dist/client/adventures/<adventure-id>/levels/<level-id>/solution/index.html
+```
+
+Use a unique word from the solution title as the fragment. If a contributor was provided, also confirm their name appears:
+
+```bash
+grep -c "<contributor-name>" dist/client/adventures/<adventure-id>/levels/<level-id>/solution/index.html
+```
+
+Report success with the path if both pass.
+
+---
+
+## Rules
+
+- Never hardcode the community URL. Use the `COMMUNITY_URL` constant.
+- Never add `any` types.
+- No em dashes anywhere — in alt text, takeaways, prose, or heading strings.
+- Code block content goes in the `code` field as raw text, never in `text` HTML blocks.
+- Images must be WebP and stored in `public/solutions/<adventure-id>/`.
+- Alt text must be specific and informative, not generic.
+- Titles use Title Case. Takeaways and body prose use sentence case.
+- **Contributor:** include `contributor: { name }` when the walkthrough author is known. Omit the field if unknown. Never fabricate a name.
+- **Outro:** always include one. End with a narrative sentence that follows the adventure's story world (characters, setting, mission), then a sentence inviting the reader to see how others solved it. The "Browse the discussion" link in the component handles the CTA itself.
+- **Takeaways:** preserve all takeaways from the source. Omit only if a step has no non-obvious insight. Do not cap or trim them.
+- **Context section:** include only when the reader needs background on the tooling or architecture before they can understand the steps. If steps are self-contained, omit it.
diff --git a/.claude/skills/keyboard.md b/.claude/commands/keyboard.md
similarity index 100%
rename from .claude/skills/keyboard.md
rename to .claude/commands/keyboard.md
diff --git a/.claude/skills/navigation.md b/.claude/commands/navigation.md
similarity index 100%
rename from .claude/skills/navigation.md
rename to .claude/commands/navigation.md
diff --git a/.claude/skills/progressive-enhancement.md b/.claude/commands/progressive-enhancement.md
similarity index 100%
rename from .claude/skills/progressive-enhancement.md
rename to .claude/commands/progressive-enhancement.md
diff --git a/.claude/skills/user-personalization.md b/.claude/commands/user-personalization.md
similarity index 100%
rename from .claude/skills/user-personalization.md
rename to .claude/commands/user-personalization.md
diff --git a/ADVENTURES.md b/ADVENTURES.md
index 0caa12d7a..44005e19f 100644
--- a/ADVENTURES.md
+++ b/ADVENTURES.md
@@ -8,7 +8,7 @@ Adventures live in a separate repo ([open-source-challenges](https://github.com/
 
 ## How the Content Pipeline Works
 
-```
+```text
 off-on-dev/open-source-challenges          offon.dev website repo
   adventures/<id>/docs/
     index.yaml          ──── Sync Adventure workflow ────►  src/data/adventures/<slug>/adventure.yaml
@@ -29,7 +29,7 @@ The generated TypeScript files are committed so the dev server works without run
 Go to **Actions → Sync Adventure from Challenges Repo → Run workflow**.
 
 | Input | Required | Description |
-|---|---|---|
+| --- | --- | --- |
 | `adventure_url` | Yes | GitHub URL of the adventure folder — any branch works. Main: `https://github.com/off-on-dev/open-source-challenges/tree/main/adventures/05-lex-imperfecta`. PR branch: `https://github.com/off-on-dev/open-source-challenges/tree/feat/my-branch/adventures/05-lex-imperfecta`. |
 | `levels` | No | Comma-separated level IDs to make live now (e.g. `beginner` or `beginner,intermediate`). Levels that exist in the challenges repo but are not listed here appear as "Coming Soon" placeholders. Leave blank to make all levels live. |
 
@@ -76,7 +76,7 @@ This field also survives future re-syncs once set.
 
 Change `rewards.deadline:` from `TODO` to either an ISO 8601 datetime or the human-readable format used in the challenges repo:
 
-```
+```yaml
 # ISO 8601 (preferred for direct edits)
 rewards.deadline: "2026-07-01T23:59:00+01:00"
 
@@ -95,7 +95,7 @@ Each level's `topics:` list defaults to all adventure tags. Refine it to the sub
 Once you have created the Discourse thread for a level, use the **Add Discussion URL to Level** workflow (Actions tab → Add Discussion URL to Level → Run workflow).
 
 | Input | Description |
-|---|---|
+| --- | --- |
 | `adventure_id` | Adventure slug, e.g. `lex-imperfecta` |
 | `level_id` | `beginner`, `intermediate`, or `expert` |
 | `discussion_url` | Full Discourse thread URL, e.g. `https://community.offon.dev/t/slug/1419` |
@@ -127,7 +127,7 @@ Run this after `community_category_id` is set. It adds the adventure to the lead
 
 **In generate mode** (the default, including the sync workflow): if a value is wrong but an unambiguous match can be found by slug and difficulty, the YAML is patched in place and a warning is printed:
 
-```
+```text
 Warning: <slug> levels[0]: devcontainer auto-corrected "<wrong>" → "<correct>" — update adventure.yaml in the challenges repo
 ```
 
@@ -137,6 +137,16 @@ If you see this warning, also fix the `devcontainer:` value upstream in the chal
 
 If `gh` is unavailable or unauthenticated, the check is skipped with a warning and generation proceeds.
 
+### Run the a11y audit
+
+After the build passes, run the accessibility audit against any new or changed pages:
+
+```sh
+/a11y-audit
+```
+
+Target any new adventure or level detail pages. All severity-weighted findings must be resolved before merging.
+
 ### Final checks
 
 ```sh
@@ -163,7 +173,7 @@ If the challenges repo is updated while your PR is still open, or you want to pr
 ### What is preserved on re-sync
 
 | Field | Preserved | Notes |
-|---|---|---|
+| --- | --- | --- |
 | `contributor:` (adventure) | Always | Survives every re-sync once set |
 | `community_category_id:` (adventure) | Always | Survives every re-sync once set; position is kept directly after `slug` |
 | `month:` (adventure) | Always | Survives every re-sync once set |
@@ -188,14 +198,65 @@ When a new level is ready in the challenges repo after the first adventure PR ha
 
 ---
 
+## Adding a Solution Walkthrough
+
+Solution walkthroughs live in `src/data/solutions/<adventure-id>/<level-id>.ts` and are committed to the repo.
+
+### Use the `/add-solution` skill
+
+The fastest way to add a solution is with the Claude Code skill:
+
+```sh
+/add-solution
+```
+
+Paste or attach the walkthrough content in any format — markdown, YAML, HTML, or plain text. The skill infers the adventure ID, level ID, and contributor name from the content where possible, confirms them with you, and then:
+
+1. Parses the input into structured steps (`SolutionBlock[]` arrays with text, code, image, and callout blocks).
+2. Downloads any referenced images and converts them to WebP at quality 85 using `cwebp`. Images are saved to `public/solutions/<adventure-id>/`.
+3. Writes `src/data/solutions/<adventure-id>/<level-id>.ts` with the full typed `Solution` object.
+4. Runs `node scripts/generate-solutions.mjs` to rebuild the barrel index and patch region markers.
+5. Runs `npm run build` and `npm run lint` to verify the output compiles cleanly.
+6. Run `/a11y-audit` against the new solution page to catch any accessibility issues before merging.
+
+### What the generator updates
+
+`scripts/generate-solutions.mjs` scans every `.ts` file in `src/data/solutions/<adventure-id>/` (excluding `index.ts` and `types.ts`) and rebuilds four files automatically:
+
+| File | What gets patched |
+| --- | --- |
+| `src/data/solutions/index.ts` | Full barrel re-generated: one import per solution file, exported as `SOLUTIONS: Solution[]`. Never edit by hand. |
+| `react-router.config.ts` | `GENERATED:solutions` region: one prerender entry per solution route (`/adventures/<id>/levels/<level>/solution`). |
+| `src/test/seo.test.ts` | `GENERATED:solutions` region: one route entry per solution. |
+| `src/test/prerender.test.ts` | `GENERATED:solutions` region: one `{ file, check }` entry per solution asserting the built HTML contains `"Solution:"`. |
+| `e2e/smoke.spec.ts` | `GENERATED:solutions` region: one `{ path, title }` smoke-test entry per solution. |
+
+You do not need to touch any of these files manually when adding a solution.
+
+### Deadline gating
+
+Solutions are not visible on the site until the challenge deadline has passed. The solution page checks `level.deadline` (falling back to `adventure.rewards.deadline`) and renders a locked state with the deadline date until that moment arrives. Once the deadline passes, the page shows the full walkthrough automatically with no code change needed.
+
+This means you can add a solution file to the repo at any point during the challenge period and it will not spoil anything for active participants.
+
+### Output location
+
+```text
+src/data/solutions/<adventure-id>/<level-id>.ts   ← authored TypeScript (commit this)
+public/solutions/<adventure-id>/<level-id>-*.webp ← converted images (commit these)
+src/data/solutions/index.ts                       ← auto-generated barrel (commit this)
+```
+
+---
+
 ## Workflows at a Glance
 
 | Workflow | Trigger | Purpose |
-|---|---|---|
+| --- | --- | --- |
 | `sync-adventure.yml` | Manual (`workflow_dispatch`) | Sync adventure content from the challenges repo and open or update a PR |
 | `add-discussion-url.yml` | Manual (`workflow_dispatch`) | Set a Discourse thread URL for a level after it has been merged, and open a PR with updated YAML and initial posts |
 | `validate-adventures.yml` | PR (when adventure files change) | Validate YAML schema, check generated files are up-to-date, verify route/sitemap/prerender consistency |
-| `deploy.yml` | Push to `main` | Build and deploy to GitHub Pages at https://offon.dev |
+| `deploy.yml` | Push to `main` | Build and deploy to GitHub Pages at [offon.dev](https://offon.dev) |
 | `preview.yml` | Open PR | Deploy a PR preview at `/pr-preview/pr-<n>/` |
 | `refresh-community-data.yml` | Hourly + manual | Refresh discussion posts, leaderboard data, and community leaders from Discourse |
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 8cef61473..358594583 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,21 +4,22 @@ Guidance for AI coding agents working in this repository.
 
 ---
 
-## Project Skills
+## Project Commands
 
-Project-level Claude Code skills live in `.claude/skills/`. Invoke them with `/skill-name` in Claude Code. These are committed to the repo and available to all contributors.
+Project-level Claude Code commands live in `.claude/commands/`. Invoke them with `/command-name` in Claude Code. These are committed to the repo and available to all contributors.
 
-| Skill | When to use |
+| Command | When to use |
 |---|---|
-| `/a11y-audit` | On-demand accessibility audit using the Red Team / Blue Team persona pipeline. Run against a component or page to get a severity-weighted report. Invokes sub-skills below as needed. |
-| &nbsp;&nbsp;`/keyboard` | Sub-skill: writing or reviewing any interactive element — buttons, modals, dropdowns, tabs, custom widgets. |
-| &nbsp;&nbsp;`/navigation` | Sub-skill: working on nav components — primary nav, skip links, breadcrumbs, pagination, mobile menus. |
-| &nbsp;&nbsp;`/progressive-enhancement` | Sub-skill: building any new feature or reviewing architecture. Ensures core content works without JS. |
-| &nbsp;&nbsp;`/user-personalization` | Sub-skill: working on theme toggle, consent state, or any user preference persistence. |
+| `/a11y-audit` | On-demand accessibility audit using the Red Team / Blue Team persona pipeline. Run against a component or page to get a severity-weighted report. Invokes sub-commands below as needed. |
+| &nbsp;&nbsp;`/keyboard` | Sub-command: writing or reviewing any interactive element — buttons, modals, dropdowns, tabs, custom widgets. |
+| &nbsp;&nbsp;`/navigation` | Sub-command: working on nav components — primary nav, skip links, breadcrumbs, pagination, mobile menus. |
+| &nbsp;&nbsp;`/progressive-enhancement` | Sub-command: building any new feature or reviewing architecture. Ensures core content works without JS. |
+| &nbsp;&nbsp;`/user-personalization` | Sub-command: working on theme toggle, consent state, or any user preference persistence. |
+| `/add-solution` | Generate a structured TypeScript solution file from any input format (md, YAML, HTML, plain text). Downloads and converts images to WebP. |
 
-The `spec-first-coding` skill is installed globally (`~/.claude/skills/`) and is not in this repo. It enforces W3C spec citations before generating any accessibility-related code.
+The `spec-first-coding` command is installed globally (`~/.claude/skills/`) and is not in this repo. It enforces W3C spec citations before generating any accessibility-related code.
 
-Use `/a11y-audit` for all accessibility audits in this repo. The four sub-skills can also be invoked directly when working in their specific domain.
+Use `/a11y-audit` for all accessibility audits in this repo. The four sub-commands can also be invoked directly when working in their specific domain.
 
 ---
 
diff --git a/README.md b/README.md
index 52a5788db..6b4d3891d 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,7 @@ Adventures are authored as YAML at `src/data/adventures/<id>/adventure.yaml` and
 | `/adventures` | `Adventures.tsx` | Adventure landing hub (links to /challenges) |
 | `/adventures/:id` | `AdventureDetail.tsx` | Adventure landing |
 | `/adventures/:id/levels/:levelId` | `ChallengeDetail.tsx` | Individual challenge |
+| `/adventures/:id/levels/:levelId/solution` | `SolutionDetail.tsx` | Solution walkthrough (post-deadline) |
 | `/contribute` | `Contribute.tsx` | How to contribute (technical and non-technical ways) |
 | `/sponsors` | `Sponsors.tsx` | Sponsorship info |
 | `/about` | `About.tsx` | About the community |
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 4201db330..a7d28045b 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -37,6 +37,11 @@ const ROUTES: RouteSpec[] = [
   { path: "/adventures/echoes-lost-in-orbit/levels/intermediate", title: /The Silent Canary/ },
   { path: "/adventures/echoes-lost-in-orbit/levels/expert", title: /Hyperspace Operations & Transport/ },
   // /GENERATED:adventures
+  // GENERATED:solutions
+  { path: "/adventures/echoes-lost-in-orbit/levels/beginner/solution", title: /Solution/ },
+  { path: "/adventures/echoes-lost-in-orbit/levels/expert/solution", title: /Solution/ },
+  { path: "/adventures/echoes-lost-in-orbit/levels/intermediate/solution", title: /Solution/ },
+  // /GENERATED:solutions
   { path: "/challenges", title: /Open Source Challenges/ },
   // GENERATED:challenge-tags
   { path: "/challenges/argo-cd", title: /Argo CD Challenges/ },
diff --git a/package.json b/package.json
index 97a965c73..27b26e166 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
     "test:visual:update": "playwright test --grep visual --update-snapshots",
     "generate": "node scripts/generate-adventures.mjs",
     "generate:validate": "node scripts/generate-adventures.mjs --validate-only",
-    "prebuild": "node scripts/generate-adventures.mjs"
+    "generate:solutions": "node scripts/generate-solutions.mjs",
+    "generate:solutions:validate": "node scripts/generate-solutions.mjs --validate-only",
+    "prebuild": "node scripts/generate-adventures.mjs && node scripts/generate-solutions.mjs"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
diff --git a/public/llms.txt b/public/llms.txt
index 7cae9a8f1..9130fbdc4 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -25,6 +25,9 @@ Each adventure is a scenario-driven challenge with beginner, intermediate, and e
 - [The AI Observatory](https://offon.dev/adventures/the-ai-observatory/): Investigate a mysterious bandwidth anomaly at a remote research station by instrumenting its AI system with OpenTelemetry, OpenLLMetry, and Jaeger.
 - [Building CloudHaven](https://offon.dev/adventures/building-cloudhaven/): Join the Infrastructure Guild and modernize CloudHaven's infrastructure from manual provisioning to a self-service platform using Infrastructure as Code. A hands-on journey through infrastructure as code with OpenTofu and GitHub Actions.
 - [Echoes Lost in Orbit](https://offon.dev/adventures/echoes-lost-in-orbit/): Restore interstellar communications by fixing broken GitOps setups, progressive delivery systems, and observability pipelines across three galactic missions.
+  - [Broken Echoes solution](https://offon.dev/adventures/echoes-lost-in-orbit/levels/beginner/solution/)
+  - [The Silent Canary solution](https://offon.dev/adventures/echoes-lost-in-orbit/levels/intermediate/solution/)
+  - [Hyperspace Operations & Transport solution](https://offon.dev/adventures/echoes-lost-in-orbit/levels/expert/solution/)
 
 ## Challenge Technologies
 
diff --git a/public/sitemap.xml b/public/sitemap.xml
index b4be0f4d6..0424c4d58 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -26,8 +26,11 @@
   <url><loc>https://offon.dev/adventures/building-cloudhaven/levels/expert/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
   <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
   <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/beginner/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/beginner/solution/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/intermediate/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/intermediate/solution/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/expert/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>
+  <url><loc>https://offon.dev/adventures/echoes-lost-in-orbit/levels/expert/solution/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/challenges/</loc><lastmod>2026-06-03</lastmod><changefreq>weekly</changefreq><priority>0.9</priority></url>
   <url><loc>https://offon.dev/challenges/argo-cd/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
   <url><loc>https://offon.dev/challenges/argo-rollouts/</loc><lastmod>2026-05-31</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>
diff --git a/public/solutions/echoes-lost-in-orbit/beginner-healthy-apps.webp b/public/solutions/echoes-lost-in-orbit/beginner-healthy-apps.webp
new file mode 100644
index 000000000..f8f486e0e
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/beginner-healthy-apps.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/beginner-no-apps.webp b/public/solutions/echoes-lost-in-orbit/beginner-no-apps.webp
new file mode 100644
index 000000000..561443d6a
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/beginner-no-apps.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/beginner-two-apps.webp b/public/solutions/echoes-lost-in-orbit/beginner-two-apps.webp
new file mode 100644
index 000000000..9c231250a
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/beginner-two-apps.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/expert-argocd-apps.webp b/public/solutions/echoes-lost-in-orbit/expert-argocd-apps.webp
new file mode 100644
index 000000000..6fb8e7c2a
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/expert-argocd-apps.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/expert-jaeger-traces.webp b/public/solutions/echoes-lost-in-orbit/expert-jaeger-traces.webp
new file mode 100644
index 000000000..05e70f522
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/expert-jaeger-traces.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/expert-prometheus-metrics.webp b/public/solutions/echoes-lost-in-orbit/expert-prometheus-metrics.webp
new file mode 100644
index 000000000..e4a530049
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/expert-prometheus-metrics.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-failed.webp b/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-failed.webp
new file mode 100644
index 000000000..c5c8b413f
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-failed.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-success.webp b/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-success.webp
new file mode 100644
index 000000000..52de866b5
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-success.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error-query.webp b/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error-query.webp
new file mode 100644
index 000000000..56978136e
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error-query.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error.webp b/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error.webp
new file mode 100644
index 000000000..5537e5494
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-analysis-error.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-failed-release.webp b/public/solutions/echoes-lost-in-orbit/intermediate-failed-release.webp
new file mode 100644
index 000000000..1aa0341f1
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-failed-release.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-metrics.webp b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-metrics.webp
new file mode 100644
index 000000000..102d1bdb3
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-metrics.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers-sum.webp b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers-sum.webp
new file mode 100644
index 000000000..0e7e9812a
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers-sum.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers.webp b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers.webp
new file mode 100644
index 000000000..8785e27f2
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers.webp differ
diff --git a/public/solutions/echoes-lost-in-orbit/intermediate-rollouts-ui-status.webp b/public/solutions/echoes-lost-in-orbit/intermediate-rollouts-ui-status.webp
new file mode 100644
index 000000000..6ed30874d
Binary files /dev/null and b/public/solutions/echoes-lost-in-orbit/intermediate-rollouts-ui-status.webp differ
diff --git a/react-router.config.ts b/react-router.config.ts
index 6f5b2540c..e241fbeb3 100644
--- a/react-router.config.ts
+++ b/react-router.config.ts
@@ -43,6 +43,11 @@ export default {
     "/adventures/echoes-lost-in-orbit/levels/intermediate",
     "/adventures/echoes-lost-in-orbit/levels/expert",
     // /GENERATED:adventures
+    // GENERATED:solutions
+    "/adventures/echoes-lost-in-orbit/levels/beginner/solution",
+    "/adventures/echoes-lost-in-orbit/levels/expert/solution",
+    "/adventures/echoes-lost-in-orbit/levels/intermediate/solution",
+    // /GENERATED:solutions
     "/challenges",
     // GENERATED:challenge-tags
     "/challenges/argo-cd",
diff --git a/scripts/generate-adventures.mjs b/scripts/generate-adventures.mjs
index 28864b44e..327bab980 100644
--- a/scripts/generate-adventures.mjs
+++ b/scripts/generate-adventures.mjs
@@ -942,6 +942,10 @@ function buildSitemapBody(adventures) {
     lines.push(`  <url><loc>https://offon.dev/adventures/${a.slug}/</loc><lastmod>${lastmod}</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>`);
     for (const l of a.levels) {
       lines.push(`  <url><loc>https://offon.dev/adventures/${a.slug}/levels/${l.level}/</loc><lastmod>${lastmod}</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url>`);
+      const solutionFile = resolve(ROOT, `src/data/solutions/${a.slug}/${l.level}.ts`);
+      if (existsSync(solutionFile)) {
+        lines.push(`  <url><loc>https://offon.dev/adventures/${a.slug}/levels/${l.level}/solution/</loc><lastmod>${lastmod}</lastmod><changefreq>monthly</changefreq><priority>0.7</priority></url>`);
+      }
     }
   }
   return lines.join("\n") + "\n  ";
@@ -1022,10 +1026,17 @@ function buildLeaderboardCategoriesBody(adventures) {
 }
 
 function buildLlmsTxtBody(adventures) {
-  const lines = adventures.map((a) => {
+  const lines = [];
+  for (const a of adventures) {
     const { title, story } = normalizeAdventureFields(a);
-    return `- [${title}](https://offon.dev/adventures/${a.slug}/): ${story}`;
-  });
+    lines.push(`- [${title}](https://offon.dev/adventures/${a.slug}/): ${story}`);
+    for (const l of a.levels) {
+      const solutionFile = resolve(ROOT, `src/data/solutions/${a.slug}/${l.level}.ts`);
+      if (existsSync(solutionFile)) {
+        lines.push(`  - [${l.name} solution](https://offon.dev/adventures/${a.slug}/levels/${l.level}/solution/)`);
+      }
+    }
+  }
   return "\n" + lines.join("\n") + "\n\n";
 }
 
diff --git a/scripts/generate-solutions.mjs b/scripts/generate-solutions.mjs
new file mode 100644
index 000000000..f47f45461
--- /dev/null
+++ b/scripts/generate-solutions.mjs
@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+
+/**
+ * Generate src/data/solutions/index.ts from authored TypeScript solution files.
+ *
+ * Usage:
+ *   node scripts/generate-solutions.mjs
+ *   node scripts/generate-solutions.mjs --validate-only
+ *
+ * Scans src/data/solutions/<adventure-id>/<level-id>.ts (authored files, not generated)
+ * and rebuilds the barrel index plus patches GENERATED:solutions regions in
+ * react-router.config.ts, e2e/smoke.spec.ts, src/test/seo.test.ts, and
+ * src/test/prerender.test.ts.
+ *
+ * Never edit src/data/solutions/index.ts by hand.
+ */
+
+import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve, dirname, basename } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, "..");
+const SOLUTIONS_DIR = resolve(ROOT, "src/data/solutions");
+const VALIDATE_ONLY = process.argv.includes("--validate-only");
+
+const EXCLUDED = new Set(["index.ts", "types.ts"]);
+
+function generateSolutions() {
+  if (!existsSync(SOLUTIONS_DIR)) {
+    console.error(`Solutions directory not found: ${SOLUTIONS_DIR}`);
+    process.exit(1);
+  }
+
+  const entries = [];
+
+  const adventureDirs = readdirSync(SOLUTIONS_DIR, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+
+  for (const adventureId of adventureDirs) {
+    const adventureDir = resolve(SOLUTIONS_DIR, adventureId);
+    const tsFiles = readdirSync(adventureDir).filter(
+      (f) => f.endsWith(".ts") && !f.endsWith(".generated.ts") && !EXCLUDED.has(f)
+    );
+
+    for (const tsFile of tsFiles) {
+      const levelId = basename(tsFile, ".ts");
+      entries.push({ adventureId, levelId });
+    }
+  }
+
+  // Generate index.ts
+  const indexLines = [
+    `// This file is auto-generated by scripts/generate-solutions.mjs. Do not edit by hand.`,
+    `import type { Solution } from "./types";`,
+    ``,
+  ];
+
+  for (const { adventureId, levelId } of entries) {
+    const importId = toIdentifier(adventureId, levelId);
+    indexLines.push(`import { solution as ${importId} } from "./${adventureId}/${levelId}";`);
+  }
+
+  indexLines.push(``);
+  indexLines.push(`export const SOLUTIONS: Solution[] = [`);
+  for (const { adventureId, levelId } of entries) {
+    indexLines.push(`  ${toIdentifier(adventureId, levelId)},`);
+  }
+  indexLines.push(`];`);
+  indexLines.push(``);
+
+  const indexContent = indexLines.join("\n");
+  const indexPath = resolve(SOLUTIONS_DIR, "index.ts");
+
+  if (VALIDATE_ONLY) {
+    const current = existsSync(indexPath) ? readFileSync(indexPath, "utf-8") : "";
+    if (current !== indexContent) {
+      console.error(`  Out of sync: src/data/solutions/index.ts`);
+      process.exit(1);
+    }
+  } else {
+    writeFileSync(indexPath, indexContent, "utf-8");
+    console.log(`  Generated solutions/index.ts (${entries.length} solution${entries.length !== 1 ? "s" : ""})`);
+  }
+
+  // Patch GENERATED:solutions regions in route/config/test files.
+  patchRegion(
+    resolve(ROOT, "react-router.config.ts"),
+    "// GENERATED:solutions",
+    "// /GENERATED:solutions",
+    entries
+      .map(({ adventureId, levelId }) => `    "/adventures/${adventureId}/levels/${levelId}/solution",`)
+      .join("\n") + "\n    "
+  );
+
+  patchRegion(
+    resolve(ROOT, "src/test/seo.test.ts"),
+    "// GENERATED:solutions",
+    "// /GENERATED:solutions",
+    entries
+      .map(({ adventureId, levelId }) => `  "/adventures/${adventureId}/levels/${levelId}/solution",`)
+      .join("\n") + "\n  "
+  );
+
+  patchRegion(
+    resolve(ROOT, "src/test/prerender.test.ts"),
+    "// GENERATED:solutions",
+    "// /GENERATED:solutions",
+    entries
+      .map(({ adventureId, levelId }) =>
+        [
+          `  {`,
+          `    file: "adventures/${adventureId}/levels/${levelId}/solution/index.html",`,
+          `    check: { type: "contains", value: "Solution:" },`,
+          `  },`,
+        ].join("\n")
+      )
+      .join("\n") + "\n  "
+  );
+
+  patchRegion(
+    resolve(ROOT, "e2e/smoke.spec.ts"),
+    "// GENERATED:solutions",
+    "// /GENERATED:solutions",
+    entries
+      .map(({ adventureId, levelId }) =>
+        `  { path: "/adventures/${adventureId}/levels/${levelId}/solution", title: /Solution/ },`
+      )
+      .join("\n") + "\n  "
+  );
+
+  if (VALIDATE_ONLY) {
+    console.log(`  Validated ${entries.length} solution${entries.length !== 1 ? "s" : ""} — all in sync`);
+  }
+}
+
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function patchRegion(filePath, openMarker, closeMarker, body) {
+  if (!existsSync(filePath)) return;
+  const content = readFileSync(filePath, "utf-8");
+  const re = new RegExp(
+    `(${escapeRegex(openMarker)})[\\s\\S]*?(${escapeRegex(closeMarker)})`
+  );
+  if (!re.test(content)) {
+    console.error(`  Error: region markers not found in ${filePath.replace(ROOT + "/", "")}`);
+    process.exit(1);
+  }
+  const next = content.replace(re, `$1\n${body}$2`);
+  if (next !== content) {
+    if (VALIDATE_ONLY) {
+      console.error(`  Out of sync: ${filePath.replace(ROOT + "/", "")}`);
+      process.exit(1);
+    }
+    writeFileSync(filePath, next, "utf-8");
+    console.log(`  Patched region: ${filePath.replace(ROOT + "/", "")}`);
+  }
+}
+
+function toIdentifier(adventureId, levelId) {
+  return `solution_${adventureId}_${levelId}`.replace(/-/g, "_");
+}
+
+generateSolutions();
diff --git a/src/components/AdventureCard.tsx b/src/components/AdventureCard.tsx
index d21121895..68af01a34 100644
--- a/src/components/AdventureCard.tsx
+++ b/src/components/AdventureCard.tsx
@@ -10,51 +10,59 @@ import { LivePill } from "@/components/LivePill";
 
 type AdventureCardProps = { adventure: AdventureCardSummary };
 
-export const AdventureCard = ({ adventure }: AdventureCardProps): JSX.Element => (
-  <Link
-    to={`/adventures/${adventure.id}/`}
-    aria-label={adventure.title}
-    className={cn(
-      "group card-glow relative rounded-xl border-2 bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      adventure.isLive
-        ? "border-primary/50"
-        : "border-[hsl(var(--surface-border))]"
-    )}
-  >
-    <div className="flex items-center justify-between mb-3">
-      <span className="font-mono text-xs text-muted-foreground">Adventure</span>
-      <div className="flex items-center gap-2">
-        {adventure.isLive && <LivePill />}
-        <span className="badge-levels inline-flex items-center gap-1.5 rounded-sm border border-primary/30 bg-primary/10 px-2.5 py-1 font-mono text-xs uppercase tracking-wider text-primary">
-          <Layers className="h-3 w-3" aria-hidden="true" />
-          {adventure.levels.length} Level{adventure.levels.length !== 1 ? "s" : ""}
-        </span>
+export const AdventureCard = ({ adventure }: AdventureCardProps): JSX.Element => {
+  const difficulties = adventure.levels.map((l) => l.difficulty).join(", ");
+  const tags = adventure.tags.slice(0, 4).join(", ");
+  const label = tags
+    ? `${adventure.title}: ${difficulties}, ${tags}`
+    : `${adventure.title}: ${difficulties}`;
+
+  return (
+    <Link
+      to={`/adventures/${adventure.id}/`}
+      aria-label={label}
+      className={cn(
+        "group card-glow relative rounded-xl border-2 bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        adventure.isLive
+          ? "border-primary/50"
+          : "border-[hsl(var(--surface-border))]"
+      )}
+    >
+      <div className="flex items-center justify-between mb-3">
+        <span className="font-mono text-xs text-muted-foreground">Adventure</span>
+        <div className="flex items-center gap-2">
+          {adventure.isLive && <LivePill />}
+          <span className="badge-levels inline-flex items-center gap-1.5 rounded-sm border border-primary/30 bg-primary/10 px-2.5 py-1 font-mono text-xs uppercase tracking-wider text-primary">
+            <Layers className="h-3 w-3" aria-hidden="true" />
+            {adventure.levels.length} Level{adventure.levels.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+
+      <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+        {adventure.title}
+      </h3>
+      <p className="mt-2 text-sm text-muted-foreground line-clamp-2">{adventure.story}</p>
+
+      <div className="mt-4 flex flex-wrap items-center gap-2">
+        {adventure.levels.map((level) => (
+          <DifficultyBadge key={level.id} difficulty={level.difficulty} />
+        ))}
       </div>
-    </div>
-
-    <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
-      {adventure.title}
-    </h3>
-    <p className="mt-2 text-sm text-muted-foreground line-clamp-2">{adventure.story}</p>
-
-    <div className="mt-4 flex flex-wrap items-center gap-2">
-      {adventure.levels.map((level) => (
-        <DifficultyBadge key={level.id} difficulty={level.difficulty} />
-      ))}
-    </div>
-
-    <div className="mt-4 flex flex-wrap gap-1.5">
-      {adventure.tags.slice(0, 4).map((tag) => (
-        <span key={tag} className="rounded-sm border border-[hsl(var(--surface-border))] px-2 py-0.5 text-xs text-[hsl(var(--text-faint))]">
-          {tag}
-        </span>
-      ))}
-    </div>
-
-    {adventure.contributor && (
-      <div className="mt-auto pt-4">
-        <ContributorBadge name={adventure.contributor.name} />
+
+      <div className="mt-4 flex flex-wrap gap-1.5">
+        {adventure.tags.slice(0, 4).map((tag) => (
+          <span key={tag} className="rounded-sm border border-[hsl(var(--surface-border))] px-2 py-0.5 text-xs text-[hsl(var(--text-faint))]">
+            {tag}
+          </span>
+        ))}
       </div>
-    )}
-  </Link>
-);
+
+      {adventure.contributor && (
+        <div className="mt-auto pt-4">
+          <ContributorBadge name={adventure.contributor.name} />
+        </div>
+      )}
+    </Link>
+  );
+};
diff --git a/src/components/ChallengeFilters.tsx b/src/components/ChallengeFilters.tsx
index cd650070b..c894ee27e 100644
--- a/src/components/ChallengeFilters.tsx
+++ b/src/components/ChallengeFilters.tsx
@@ -106,6 +106,7 @@ export const ChallengeFilters = ({
             onClick={() => { setDifficultyOpen((o) => !o); setTagsOpen(false); }}
             aria-expanded={difficultyOpen}
             aria-controls={difficultyGroupId}
+            aria-haspopup="true"
             className={cn(
               activeDifficulty !== null ? "pill-active" : "pill-inactive",
               "px-6 gap-2"
@@ -157,6 +158,7 @@ export const ChallengeFilters = ({
             onClick={() => { setTagsOpen((o) => !o); setDifficultyOpen(false); }}
             aria-expanded={tagsOpen}
             aria-controls={tagsGroupId}
+            aria-haspopup="true"
             className={cn(
               activeTopics.length > 0 ? "pill-active" : "pill-inactive",
               "px-6 gap-2"
diff --git a/src/components/FilteredLevelCard.tsx b/src/components/FilteredLevelCard.tsx
index 10d6e1124..29441e41c 100644
--- a/src/components/FilteredLevelCard.tsx
+++ b/src/components/FilteredLevelCard.tsx
@@ -24,6 +24,7 @@ export const FilteredLevelCard = ({
 }: FilteredLevelCardProps): JSX.Element => (
   <Link
     to={`/adventures/${adventureId}/levels/${level.id}/`}
+    aria-label={`${level.name}: ${level.difficulty}, ${adventureTitle}`}
     className={cn(
       "group card-glow rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-6 flex flex-col focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
diff --git a/src/data/solutions/echoes-lost-in-orbit/beginner.ts b/src/data/solutions/echoes-lost-in-orbit/beginner.ts
new file mode 100644
index 000000000..809aee98d
--- /dev/null
+++ b/src/data/solutions/echoes-lost-in-orbit/beginner.ts
@@ -0,0 +1,317 @@
+import type { Solution } from "@/data/solutions/types";
+import { KATHARINA_SICK } from "@/data/adventures/contributors";
+
+export const solution: Solution = {
+  adventureId: "echoes-lost-in-orbit",
+  levelId: "beginner",
+  title: "Beginner Solution: Broken Echoes",
+  contributor: { name: KATHARINA_SICK.name, url: KATHARINA_SICK.url },
+  spoilerWarning:
+    "This walkthrough contains the full solution. Try solving the challenge yourself first, then come back if you get stuck or want to compare approaches.",
+  intro:
+    "We'll approach this exactly as you would: start with the objectives, break them down one by one, and systematically fix what's broken.",
+  context: {
+    title: "Understanding the Setup",
+    body: [
+      {
+        type: "text",
+        html: "<p>The challenge uses three tools working together:</p><ul><li><strong>Argo CD ApplicationSet</strong> automatically generates Applications for multiple environments.</li><li><strong>Git directory generator</strong> scans for directories in the <code>overlays/</code> folder and finds <code>staging</code> and <code>prod</code>.</li><li><strong>Kustomize</strong> manages environment-specific configuration. The <em>base</em> holds the common deployment and service; <em>overlays</em> hold environment-specific customisations.</li></ul>",
+      },
+      {
+        type: "text",
+        html: "<p>The file to fix is <code>adventures/01-echoes-lost-in-orbit/beginner/manifests/appset.yaml</code>. Here is the broken starting state:</p>",
+      },
+      {
+        type: "code",
+        language: "yaml",
+        title: "appset.yaml (broken)",
+        code: `apiVersion: argoproj.io/v1alpha1
+kind: ApplicationSet
+metadata:
+  name: echo-server
+  namespace: argocd
+spec:
+  generators:
+    - git:
+        repoURL: __REPO_URL__
+        revision: HEAD
+        directories:
+          - path: adventures/01-echoes-lost-in-orbit/beginner/manifests/overlays/*
+  template:
+    metadata:
+      name: echo-server
+      labels:
+        app.kubernetes.io/managed-by: argocd
+    spec:
+      project: default
+      source:
+        repoURL: __REPO_URL__
+        targetRevision: HEAD
+        path: adventures/01-echoes-lost-in-orbit/beginner/manifests/overlays/{{path.basename}}
+      destination:
+        server: https://kubernetes.default.svc
+        namespace: echo
+      syncPolicy:
+        syncOptions:
+          - CreateNamespace=true`,
+      },
+    ],
+  },
+  steps: [
+    {
+      id: "two-applications",
+      title: "Two Distinct Applications in Argo CD",
+      intro:
+        "Opening the Argo CD dashboard (port 30100), you won't see any applications despite the ApplicationSet being present.",
+      body: [
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/beginner-no-apps.webp",
+          alt: "Argo CD dashboard showing no applications",
+        },
+        {
+          type: "text",
+          html: "<p>Check whether the ApplicationSet exists:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl get applicationset -n argocd",
+        },
+        {
+          type: "text",
+          html: "<p>You should see <code>echo-server</code> listed. That means Argo CD is at least aware of our ApplicationSet. Let's dig deeper and check its status:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl get applicationset echo-server -n argocd -o yaml",
+        },
+        {
+          type: "text",
+          html: "<p>Scroll to <code>status.conditions</code>. You should see:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          code: `- message: 'ApplicationSet echo-server contains applications with duplicate name: echo-server'
+  reason: ErrorOccurred
+  status: "False"`,
+        },
+        {
+          type: "text",
+          html: "<p>The template uses a static <code>name: echo-server</code> for every generated Application. Because both staging and prod generate an Application with that same name, Kubernetes rejects the duplicate. The fix is to include the directory name in the Application name:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix: unique name per environment",
+          code: "name: echo-server-{{path.basename}}",
+        },
+        {
+          type: "text",
+          html: "<p>Apply the fix:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl apply -n argocd -f adventures/01-echoes-lost-in-orbit/beginner/manifests/appset.yaml",
+        },
+        {
+          type: "text",
+          html: "<p>Go back to the dashboard. You should now see two progressing applications:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/beginner-two-apps.webp",
+          alt: "Two applications progressing in Argo CD dashboard",
+        },
+      ],
+      takeaways: [
+        "ApplicationSets use templates to generate multiple Applications, and names must be unique per environment.",
+        "The Git directory generator creates one Application per overlay directory, so template variables like {{path.basename}} are essential for dynamic naming.",
+        "The ApplicationSet and Application status conditions are the first place to look when something isn't generating.",
+      ],
+    },
+    {
+      id: "isolated-namespaces",
+      title: "Each Application in Its Own Namespace",
+      intro:
+        "Both applications now appear in Argo CD but they deploy to the same namespace: echo. Each environment needs its own namespace for isolation and to prevent resource conflicts.",
+      body: [
+        {
+          type: "text",
+          html: "<p>The same template variable technique fixes the namespace. Update the destination in the manifest:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix: environment-specific namespace",
+          code: "destination:\n  server: https://kubernetes.default.svc\n  namespace: echo-{{path.basename}}",
+        },
+        {
+          type: "text",
+          html: "<p>Apply the change. Argo CD will now target <code>echo-staging</code> and <code>echo-prod</code> respectively:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl apply -n argocd -f adventures/01-echoes-lost-in-orbit/beginner/manifests/appset.yaml",
+        },
+      ],
+      takeaways: [
+        "Template variables work in any field of the ApplicationSet spec, not just the name.",
+        "Namespace isolation prevents resource name collisions and makes per-environment RBAC and quotas straightforward.",
+      ],
+    },
+    {
+      id: "resilience",
+      title: "Auto Sync and Self-Healing",
+      intro:
+        "The Applications now target separate namespaces but aren't syncing yet. We need two fixes: automatic sync from Git, and automatic revert of manual cluster changes.",
+      body: [
+        {
+          type: "text",
+          html: "<p>By default, Argo CD requires manual sync triggers. Enable automated sync in the ApplicationSet:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 1: enable auto sync",
+          code: "syncPolicy:\n  automated:\n    enabled: true\n  syncOptions:\n    - CreateNamespace=true",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl apply -n argocd -f adventures/01-echoes-lost-in-orbit/beginner/manifests/appset.yaml",
+        },
+        {
+          type: "callout",
+          variant: "tip",
+          html: "<p>By default, Argo CD polls Git every 3 minutes. You can speed this up by configuring a webhook, but for this challenge a manual refresh in the UI is fine.</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/beginner-healthy-apps.webp",
+          alt: "Both applications synced and healthy in Argo CD",
+        },
+        {
+          type: "text",
+          html: "<p>Auto sync alone won't revert direct cluster changes. Add <code>selfHeal: true</code> to make Argo CD continuously reconcile against Git:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 2: add self-healing",
+          code: "syncPolicy:\n  automated:\n    enabled: true\n    selfHeal: true\n  syncOptions:\n    - CreateNamespace=true",
+        },
+        {
+          type: "text",
+          html: "<p>Test it: scale a deployment manually and watch Argo CD revert it within seconds.</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl scale deployment echo-server-staging -n echo-staging --replicas=3\nkubectl get pods -n echo-staging -w",
+        },
+        {
+          type: "text",
+          html: "<p>Within seconds, Argo CD will detect the drift and scale it back down to 1 replica (as defined in Git).</p>",
+        },
+      ],
+      takeaways: [
+        "Auto sync ensures Git changes reach the cluster without manual intervention.",
+        "Self-healing reconciles drift: any manual change to cluster state is reverted to match Git.",
+        "Auto sync + self-heal together are the foundation of a GitOps workflow.",
+      ],
+    },
+    {
+      id: "pruning",
+      title: "Automatic Pruning of Stale Resources",
+      intro:
+        "The last objective: resources deleted from Git should also be deleted from the cluster. Without pruning, removed manifests leave orphaned objects behind.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Add <code>prune: true</code> to the automated sync policy:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix: enable pruning",
+          code: "syncPolicy:\n  automated:\n    enabled: true\n    selfHeal: true\n    prune: true\n  syncOptions:\n    - CreateNamespace=true",
+        },
+        {
+          type: "text",
+          html: "<p>Apply the final change:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl apply -n argocd -f adventures/01-echoes-lost-in-orbit/beginner/manifests/appset.yaml",
+        },
+        {
+          type: "callout",
+          variant: "info",
+          html: "<p>Pruning is intentionally opt-in. Argo CD is cautious about deleting cluster resources automatically, so you must explicitly enable it.</p>",
+        },
+      ],
+      takeaways: [
+        "Pruning, combined with self-heal, gives you full GitOps: the cluster always matches the Git state exactly.",
+        "Without pruning, deleted manifests leave stale objects that can cause resource conflicts or unexpected behaviour.",
+      ],
+    },
+  ],
+  furtherReading: [
+    { title: "Argo CD ApplicationSet documentation", url: "https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/" },
+    { title: "ApplicationSet templates", url: "https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Template/" },
+    { title: "Git directory generator", url: "https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-Git/#git-generator-directories" },
+    { title: "Kubernetes namespaces", url: "https://kubernetes.io/docs/concepts/overview/working-with-objects/namespaces/" },
+    { title: "Argo CD automated sync policy", url: "https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/" },
+    { title: "Automatic self-healing", url: "https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/#automatic-self-healing" },
+    { title: "Argo CD automatic pruning", url: "https://argo-cd.readthedocs.io/en/stable/user-guide/auto_sync/#automatic-pruning" },
+  ],
+  completeSolution: {
+    title: "Complete ApplicationSet",
+    description:
+      "All four fixes applied. This ApplicationSet produces two isolated Applications with automated sync, self-healing, and pruning.",
+    language: "yaml",
+    code: `apiVersion: argoproj.io/v1alpha1
+kind: ApplicationSet
+metadata:
+  name: echo-server
+  namespace: argocd
+spec:
+  generators:
+    - git:
+        repoURL: __REPO_URL__
+        revision: HEAD
+        directories:
+          - path: adventures/01-echoes-lost-in-orbit/beginner/manifests/overlays/*
+  template:
+    metadata:
+      name: echo-server-{{path.basename}}  # unique name per environment
+      labels:
+        app.kubernetes.io/managed-by: argocd
+    spec:
+      project: default
+      source:
+        repoURL: __REPO_URL__
+        targetRevision: HEAD
+        path: adventures/01-echoes-lost-in-orbit/beginner/manifests/overlays/{{path.basename}}
+      destination:
+        server: https://kubernetes.default.svc
+        namespace: echo-{{path.basename}}  # environment-specific namespace
+      syncPolicy:
+        automated:
+          enabled: true     # automatic sync from Git
+          selfHeal: true    # reverts manual cluster changes
+          prune: true       # deletes removed resources
+        syncOptions:
+          - CreateNamespace=true`,
+  },
+  outro: {
+    heading: "Transmissions Restored",
+    html: "<p>Both Applications are healthy, syncing continuously from Git, reverting any drift the moment it appears, and cleaning up what no longer belongs. The Staging Moonbase and the Production Outpost are online. The Echo Server is echoing again.</p><p>The whispering cloud-dwellers of Nebulon and the rhythmic click-speakers of Crustacea Prime can hear each other once more. The GitOps Starliner moves on.</p><p>The Starliner carries more than one crew. See how others got the echo back.</p>",
+  },
+};
diff --git a/src/data/solutions/echoes-lost-in-orbit/expert.ts b/src/data/solutions/echoes-lost-in-orbit/expert.ts
new file mode 100644
index 000000000..7736b9a29
--- /dev/null
+++ b/src/data/solutions/echoes-lost-in-orbit/expert.ts
@@ -0,0 +1,400 @@
+import type { Solution } from "@/data/solutions/types";
+import { KATHARINA_SICK } from "@/data/adventures/contributors";
+
+export const solution: Solution = {
+  adventureId: "echoes-lost-in-orbit",
+  levelId: "expert",
+  title: "Expert Solution: Hyperspace Operations & Transport",
+  contributor: { name: KATHARINA_SICK.name, url: KATHARINA_SICK.url },
+  spoilerWarning:
+    "This walkthrough contains the full solution. Try solving the challenge yourself first, then come back if you get stuck or want to compare approaches.",
+  intro:
+    "We'll approach this exactly as you would: start with the objectives, break them down one by one, and systematically fix what's broken.",
+  context: {
+    title: "Understanding the Setup",
+    body: [
+      {
+        type: "text",
+        html: "<p>All files are in <code>adventures/01-echoes-lost-in-orbit/expert/manifests</code>. Three applications are deployed via an Argo CD ApplicationSet:</p><ul><li><strong>hotrod/</strong>: The HotROD app, managed by an Argo Rollouts Rollout with a canary strategy and an AnalysisTemplate for health gating.</li><li><strong>otel/</strong>: The OpenTelemetry Collector, configured as a DaemonSet to receive traces from HotROD, convert them to metrics via the Spanmetrics connector, and export to Jaeger and Prometheus.</li><li><strong>traffic-generator/</strong>: A simple app that continuously sends requests to HotROD to generate observable traffic.</li></ul>",
+      },
+      {
+        type: "text",
+        html: "<p>The OpenTelemetry Collector config has four main sections: <strong>receivers</strong> (where data enters), <strong>connectors</strong> (bridge between pipelines, e.g. Spanmetrics converts traces to metrics), <strong>exporters</strong> (where data is sent), and <strong>service pipelines</strong> (the wiring). Understanding this structure is key to Objective 2.</p>",
+      },
+    ],
+  },
+  steps: [
+    {
+      id: "automated-rollout",
+      title: "Automated Rollout Progression to HotROD 1.76.0",
+      intro:
+        "This objective depends on the other two. The rollout is currently aborted because the AnalysisTemplate has no data to evaluate, which in turn is because the OpenTelemetry Collector is not running.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Open Argo CD to see the current state of all three applications:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/expert-argocd-apps.webp",
+          alt: "Argo CD showing three apps: hotrod degraded, otel progressing, traffic-generator healthy",
+          caption: "hotrod is degraded due to a failed AnalysisRun; otel keeps crashing; traffic-generator is healthy",
+        },
+        {
+          type: "text",
+          html: "<p>Fix Objectives 2 and 3 first. Once the collector is running and the AnalysisTemplate is complete, retry the rollout and it will progress automatically.</p>",
+        },
+      ],
+    },
+    {
+      id: "otel-collector",
+      title: "OpenTelemetry Collector Configured",
+      intro:
+        "The collector is crash-looping with \"invalid configuration: no receiver configuration specified in config\". Three things need to be added: an OTLP receiver, a metrics pipeline, and a Prometheus exporter.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Open <code>adventures/01-echoes-lost-in-orbit/expert/manifests/otel/config.yaml</code>. The starting state looks like this:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "otel/config.yaml (broken)",
+          code: `receivers:
+  # empty
+
+connectors:
+  spanmetrics:
+    dimensions:
+      - name: hotrod.namespace
+      - name: hotrod.pod.name
+      - name: hotrod.pod.hash
+
+exporters:
+  debug:
+    verbosity: detailed
+  otlp:
+    endpoint: jaeger-collector.jaeger.svc.cluster.local:4317
+    tls:
+      insecure: true
+
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      exporters: [debug, otlp, spanmetrics]`,
+        },
+        {
+          type: "text",
+          html: "<p><strong>Fix 1: add the OTLP receiver.</strong> Check how HotROD exports traces by looking at the rollout environment variables:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          code: `env:
+  - name: OTEL_EXPORTER_OTLP_ENDPOINT
+    value: "http://collector.otel.svc.cluster.local:4318"`,
+        },
+        {
+          type: "text",
+          html: "<p>Port 4318 is OTLP/HTTP. Add a matching receiver:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 1: OTLP/HTTP receiver",
+          code: `receivers:
+  otlp:
+    protocols:
+      http:
+        endpoint: 0.0.0.0:4318`,
+        },
+        {
+          type: "text",
+          html: "<p><strong>Fix 2: add a metrics pipeline.</strong> The Spanmetrics connector already exists and is wired into the traces pipeline as an exporter, which generates metrics. But those metrics need a pipeline to flow through. Add one pointing to the debug exporter as a first step:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 2: metrics pipeline",
+          code: `service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      exporters: [debug, otlp, spanmetrics]
+    metrics:
+      receivers: [spanmetrics]
+      exporters: [debug]`,
+        },
+        {
+          type: "text",
+          html: "<p><strong>Fix 3: export metrics to Prometheus.</strong> The AnalysisTemplate will query Prometheus for the spanmetrics data, so a Prometheus exporter is required. Check <code>otel/daemonset.yaml</code> for the port that Prometheus is already configured to scrape:</p>",
+        },
+        {
+          type: "callout",
+          variant: "info",
+          html: "<p>Look for the port named <code>prometheus</code> in the DaemonSet spec and the <code>prometheus.io/port</code> pod annotation. Both point to port <code>8889</code>.</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 3: Prometheus exporter",
+          code: `exporters:
+  debug:
+    verbosity: detailed
+  otlp:
+    endpoint: jaeger-collector.jaeger.svc.cluster.local:4317
+    tls:
+      insecure: true
+  prometheus:
+    endpoint: "0.0.0.0:8889"`,
+        },
+        {
+          type: "text",
+          html: "<p>Update the metrics pipeline to include the Prometheus exporter, then commit and push. After Argo CD syncs, restart the collector:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "argocd app get otel --refresh\nkubectl rollout restart daemonset/collector -n otel",
+        },
+        {
+          type: "text",
+          html: "<p>The collector is now healthy. Traces appear in Jaeger and metrics arrive in Prometheus:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/expert-jaeger-traces.webp",
+          alt: "Jaeger UI showing HotROD traces distributed across services",
+          caption: "Traces from HotROD flowing through the collector into Jaeger",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/expert-prometheus-metrics.webp",
+          alt: "Prometheus UI showing spanmetrics derived from HotROD traces",
+          caption: "Span-derived metrics now queryable in Prometheus",
+        },
+      ],
+      takeaways: [
+        "The OpenTelemetry Collector requires at least one receiver in each pipeline, and every component referenced in a pipeline must be defined in its section.",
+        "The Spanmetrics connector acts as both an exporter in the traces pipeline and a receiver in the metrics pipeline, bridging the two.",
+      ],
+    },
+    {
+      id: "canary-analysis",
+      title: "Canary Analysis with Three PromQL Queries",
+      intro:
+        "The AnalysisTemplate already has error-rate and latency metrics, but the latency metric was failing because Prometheus had no spanmetrics data yet. A third metric for traffic detection is missing entirely.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Open the Argo Rollouts dashboard and review the last AnalysisRun. The <code>error-rate-lt-5-percent</code> check passed, but <code>latency-p95-lt-1s</code> errored with <code>slice index out of range</code>:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-failed.webp",
+          alt: "Argo Rollouts AnalysisRun showing error-rate passing and latency-p95 erroring",
+          caption: "The latency metric errored because no spanmetrics data existed in Prometheus yet",
+        },
+        {
+          type: "text",
+          html: "<p>Now that the collector is running, the latency query will have data to evaluate. The query itself is correct and does not need to change.</p><p><strong>Missing metric: traffic detection.</strong> Without a minimum traffic check, a canary could be promoted without ever receiving a real request. Add this metric first:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Add: traffic-detection metric",
+          code: `- name: traffic-detection
+  initialDelay: 90s
+  interval: 10s
+  count: 5
+  successCondition: result[0] >= 0.05
+  failureLimit: 3
+  inconclusiveLimit: 5
+  consecutiveErrorLimit: 3
+  provider:
+    prometheus:
+      address: http://prometheus-server.prometheus.svc.cluster.local
+      query: |
+        sum(rate(hotrod_requests_total{
+          namespace="{{args.namespace}}",
+          rollouts_pod_template_hash="{{args.canary-hash}}"
+        }[2m]))`,
+        },
+        {
+          type: "text",
+          html: "<p>Commit, push, refresh the Argo CD app, and retry the rollout:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "argocd app get hotrod --refresh\nkubectl argo rollouts retry rollout hotrod -n hotrod",
+        },
+        {
+          type: "text",
+          html: "<p>This time all three metrics pass and the rollout completes:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/expert-rollouts-analysis-success.webp",
+          alt: "Argo Rollouts AnalysisRun showing all three metrics passing with green status",
+          caption: "All three metrics pass, and the rollout advances to HotROD 1.76.0",
+        },
+        {
+          type: "text",
+          html: "<p>The complete AnalysisTemplate with all three metrics:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Complete AnalysisTemplate",
+          code: `apiVersion: argoproj.io/v1alpha1
+kind: AnalysisTemplate
+metadata:
+  name: hotrod-analysis
+spec:
+  args:
+    - name: namespace
+    - name: canary-hash
+  metrics:
+    - name: traffic-detection
+      initialDelay: 90s
+      interval: 10s
+      count: 5
+      successCondition: result[0] >= 0.05
+      failureLimit: 3
+      inconclusiveLimit: 5
+      consecutiveErrorLimit: 3
+      provider:
+        prometheus:
+          address: http://prometheus-server.prometheus.svc.cluster.local
+          query: |
+            sum(rate(hotrod_requests_total{
+              namespace="{{args.namespace}}",
+              rollouts_pod_template_hash="{{args.canary-hash}}"
+            }[2m]))
+    - name: error-rate-lt-5-percent
+      initialDelay: 60s
+      interval: 10s
+      count: 3
+      successCondition: result[0] < 0.05
+      failureLimit: 2
+      inconclusiveLimit: 3
+      consecutiveErrorLimit: 2
+      provider:
+        prometheus:
+          address: http://prometheus-server.prometheus.svc.cluster.local
+          query: |
+            sum(rate(hotrod_requests_total{
+              namespace="{{args.namespace}}",
+              rollouts_pod_template_hash="{{args.canary-hash}}",
+              error="true"
+            }[2m]))
+            /
+            sum(rate(hotrod_requests_total{
+              namespace="{{args.namespace}}",
+              rollouts_pod_template_hash="{{args.canary-hash}}"
+            }[2m]))
+    - name: latency-p95-lt-1s
+      initialDelay: 90s
+      interval: 10s
+      count: 3
+      successCondition: result[0] < 1000
+      failureLimit: 2
+      inconclusiveLimit: 3
+      consecutiveErrorLimit: 2
+      provider:
+        prometheus:
+          address: http://prometheus-server.prometheus.svc.cluster.local
+          query: |
+            histogram_quantile(0.95,
+              sum by (le) (rate(traces_span_metrics_duration_milliseconds_bucket{
+                hotrod_namespace="{{args.namespace}}",
+                hotrod_pod_hash="{{args.canary-hash}}"
+              }[2m]))
+            )`,
+        },
+      ],
+      takeaways: [
+        "A traffic detection gate prevents idle canaries from being promoted without having handled real traffic.",
+        "Argo Rollouts AnalysisTemplates can use trace-derived metrics from Spanmetrics as promotion gates, giving you observability-driven progressive delivery.",
+      ],
+    },
+  ],
+  furtherReading: [
+    {
+      title: "OpenTelemetry Collector documentation",
+      url: "https://opentelemetry.io/docs/collector/",
+    },
+    {
+      title: "Span Metrics Connector",
+      url: "https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/connector/spanmetricsconnector",
+    },
+    {
+      title: "Prometheus Exporter for OpenTelemetry Collector",
+      url: "https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/exporter/prometheusexporter",
+    },
+    {
+      title: "Argo Rollouts Analysis documentation",
+      url: "https://argo-rollouts.readthedocs.io/en/stable/features/analysis/",
+    },
+    {
+      title: "PromQL Basics",
+      url: "https://prometheus.io/docs/prometheus/latest/querying/basics/",
+    },
+  ],
+  completeSolution: {
+    title: "Complete OpenTelemetry Collector Config",
+    description:
+      "OTLP/HTTP receiver added, metrics pipeline wired from Spanmetrics to Prometheus, Prometheus exporter configured on port 8889.",
+    language: "yaml",
+    code: `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: collector-config
+  labels:
+    app: collector
+data:
+  collector-config.yaml: |
+    receivers:
+      otlp:
+        protocols:
+          http:
+            endpoint: 0.0.0.0:4318
+
+    connectors:
+      spanmetrics:
+        dimensions:
+          - name: hotrod.namespace
+          - name: hotrod.pod.name
+          - name: hotrod.pod.hash
+
+    exporters:
+      debug:
+        verbosity: detailed
+      otlp:
+        endpoint: jaeger-collector.jaeger.svc.cluster.local:4317
+        tls:
+          insecure: true
+      prometheus:
+        endpoint: "0.0.0.0:8889"
+
+    extensions:
+      health_check:
+        endpoint: 0.0.0.0:13133
+
+    service:
+      extensions: [health_check]
+      pipelines:
+        traces:
+          receivers: [otlp]
+          exporters: [debug, otlp, spanmetrics]
+        metrics:
+          receivers: [spanmetrics]
+          exporters: [debug, prometheus]`,
+  },
+  outro: {
+    heading: "The Hyperspace Lane Is Open",
+    html: "<p>The collector is receiving traces, converting them to metrics, and feeding them to Prometheus. The canary proved itself under real traffic before earning promotion. HotROD 1.76.0 is running in production, guided every step of the way by observability signals.</p><p>The routes between star systems are open again. See how other crews navigated the hyperspace configuration.</p>",
+  },
+};
diff --git a/src/data/solutions/echoes-lost-in-orbit/intermediate.ts b/src/data/solutions/echoes-lost-in-orbit/intermediate.ts
new file mode 100644
index 000000000..d1a412754
--- /dev/null
+++ b/src/data/solutions/echoes-lost-in-orbit/intermediate.ts
@@ -0,0 +1,351 @@
+import type { Solution } from "@/data/solutions/types";
+import { KATHARINA_SICK } from "@/data/adventures/contributors";
+
+export const solution: Solution = {
+  adventureId: "echoes-lost-in-orbit",
+  levelId: "intermediate",
+  title: "Intermediate Solution: The Silent Canary",
+  contributor: { name: KATHARINA_SICK.name, url: KATHARINA_SICK.url },
+  spoilerWarning:
+    "This walkthrough contains the full solution. Try solving the challenge yourself first, then come back if you get stuck or want to compare approaches.",
+  intro:
+    "We'll approach this exactly as you would: start with the objectives, break them down one by one, and systematically fix what's broken.",
+  context: {
+    title: "Understanding the Setup",
+    body: [
+      {
+        type: "text",
+        html: "<p>All files are in <code>adventures/01-echoes-lost-in-orbit/intermediate/manifests</code>. The structure looks like this:</p><ul><li><strong>appset.yaml</strong>: An Argo CD ApplicationSet that generates Applications for staging and prod using the Git directory generator.</li><li><strong>base/</strong>: The base Kustomize configuration for the echo-server app, containing the AnalysisTemplate, Rollout, Service, and kustomization.yaml.</li><li><strong>overlays/</strong>: Environment-specific overlays that adjust replica counts for staging and prod.</li></ul>",
+      },
+      {
+        type: "callout",
+        variant: "info",
+        html: "<p>All steps in this guide use the staging environment. Since staging and production are identical except for replica count, the same fixes apply to both. We'll only mention staging throughout.</p>",
+      },
+    ],
+  },
+  steps: [
+    {
+      id: "podinfo-version",
+      title: "Pod Info Version 6.9.3 Deployed",
+      intro:
+        "The rollout already targets image 6.9.3, but the stable replica set is still running 6.8.0. Something is blocking progression.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Check which version is running and why the rollout is stuck:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl -n echo-staging get rollout echo-server -o yaml",
+        },
+        {
+          type: "text",
+          html: "<p>The <code>spec.template.spec.containers[0].image</code> field shows <code>stefanprodan/podinfo:6.9.3</code> as desired. But scrolling down to <code>status.conditions</code> reveals an error:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          code: `- message: 'Rollout aborted update to revision 2: Metric "container-restarts" assessed
+    Error due to consecutiveErrors (1) > consecutiveErrorLimit (0): "Error Message:
+    Post "http://prom-server.prometheus.svc.cluster.local/api/v1/query": dial tcp:
+    lookup prom-server.prometheus.svc.cluster.local on 10.96.0.10:53: no such host"'
+  reason: RolloutAborted
+  status: "False"
+  type: Progressing`,
+        },
+        {
+          type: "text",
+          html: "<p>To confirm what is actually serving traffic, look up the <code>status.stableRS</code> hash and inspect that replica set directly:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "# status.stableRS: 6fdd67656d\nkubectl -n echo-staging get replicaset echo-server-6fdd67656d -o yaml",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          code: `spec:
+  template:
+    spec:
+      containers:
+        - name: echo-server
+          image: stefanprodan/podinfo:6.8.0`,
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-failed-release.webp",
+          alt: "Argo Rollouts UI showing a failed release with an aborted rollout status",
+          caption: "The Argo Rollouts UI confirms the rollout is aborted",
+        },
+        {
+          type: "text",
+          html: "<p>The rollout aborted due to an error in the AnalysisTemplate. Fixing the analysis is what will unblock the version upgrade. Move on to the next objective to investigate.</p>",
+        },
+      ],
+      takeaways: [
+        "Argo Rollouts won't progress a rollout if there are errors in the configuration.",
+        "Check rollout status conditions first when a rollout appears stuck.",
+      ],
+    },
+    {
+      id: "automatic-canary-progression",
+      title: "Automatic Canary Progression Based on Health Metrics",
+      intro:
+        "The rollout is aborted because the AnalysisTemplate is referencing a Prometheus service that does not exist. There are also two bugs in the metric definitions themselves.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Inspect the AnalysisTemplate directly:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl -n echo-staging get analysistemplate echo-analysis -o yaml",
+        },
+        {
+          type: "text",
+          html: "<p>Or open the file at <code>adventures/01-echoes-lost-in-orbit/intermediate/manifests/base/analysis-template.yaml</code>. You will find two metrics: <code>container-restarts</code> and <code>ready-containers</code>.</p><p><strong>Bug 1: wrong Prometheus service name.</strong> The error says it cannot reach <code>prom-server.prometheus.svc.cluster.local</code>. Let's check if this service exists. The URL follows the structure <code>http://&lt;service-name&gt;.&lt;namespace&gt;.svc.cluster.local</code>, so we run:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl -n prometheus get service",
+        },
+        {
+          type: "text",
+          html: "<p>This outputs one service called <code>prometheus-server</code>, not <code>prom-server</code>. There's a typo in the manifest. Fix the address in <code>container-restarts</code>:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 1: correct Prometheus address",
+          code: "address: http://prometheus-server.prometheus.svc.cluster.local",
+        },
+        {
+          type: "text",
+          html: "<p>Commit, push, then retry the rollout:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: "kubectl argo rollouts retry rollout echo-server -n echo-staging\nkubectl argo rollouts -n echo-staging status echo-server",
+        },
+        {
+          type: "text",
+          html: "<p>A new error appears:</p>",
+        },
+        {
+          type: "code",
+          language: "bash",
+          code: `Degraded - RolloutAborted: Rollout aborted update to revision 2: Metric "container-restarts" assessed Failed due to failed (1) > failureLimit (0)`,
+        },
+        {
+          type: "text",
+          html: "<p><strong>Bug 2: inverted success condition.</strong> The <code>container-restarts</code> query returns 0 when there are no restarts, which is the healthy state. But the current condition <code>result[0] &gt; 0</code> only passes when restarts exist. Invert it:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 2: correct success condition",
+          code: "successCondition: result[0] == 0",
+        },
+        {
+          type: "text",
+          html: "<p>Commit, push, and retry again. Open the Argo Rollouts UI, select the <code>echo-staging</code> namespace, and click the rollout card. You will see multiple AnalysisRuns accumulate as each retry creates a new one:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-rollouts-ui-status.webp",
+          alt: "Argo Rollouts UI showing three analysis runs for the same rollout revision",
+          caption: "Each retry creates a new AnalysisRun; earlier ones show the previous errors",
+        },
+        {
+          type: "text",
+          html: "<p>Click the latest AnalysisRun. The <code>container-restarts</code> metric is now passing, but <code>ready-containers</code> is failing:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-analysis-error.webp",
+          alt: "AnalysisRun detail showing container-restarts passing and ready-containers failing",
+        },
+        {
+          type: "text",
+          html: "<p>Clicking the <code>ready-containers</code> metric on the left reveals the query body is empty:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-analysis-error-query.webp",
+          alt: "AnalysisTemplate ready-containers metric showing an empty query body",
+        },
+        {
+          type: "text",
+          html: "<p><strong>Bug 3: missing query implementation.</strong> The <code>ready-containers</code> metric has no query. Open the Prometheus UI (port 30102 in VS Code's Ports tab) and explore metrics beginning with <code>kube_pod_container_status_</code>. Choose <code>kube_pod_container_status_ready</code>:</p>",
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-prometheus-metrics.webp",
+          alt: "Prometheus UI autocomplete showing kube_pod_container_status_ready selected",
+        },
+        {
+          type: "text",
+          html: "<p>Filter to your namespace and pods, then run:</p>",
+        },
+        {
+          type: "code",
+          language: "sql",
+          code: `kube_pod_container_status_ready{
+  namespace="echo-staging",
+  pod=~"echo-server-.*"
+}`,
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers.webp",
+          alt: "Prometheus query returning a list of ready container metrics per pod",
+        },
+        {
+          type: "text",
+          html: "<p>This returns a list. Wrap it in <code>sum()</code> to get a single count:</p>",
+        },
+        {
+          type: "code",
+          language: "sql",
+          code: `sum(
+  kube_pod_container_status_ready{
+    namespace="echo-staging",
+    pod=~"echo-server-.*"
+  }
+)`,
+        },
+        {
+          type: "image",
+          src: "/solutions/echoes-lost-in-orbit/intermediate-prometheus-ready-containers-sum.webp",
+          alt: "Prometheus query result showing a single value of 1 for ready containers",
+          caption: "The aggregated query returns 1, which satisfies successCondition: result[0] >= 1",
+        },
+        {
+          type: "text",
+          html: "<p>Replace the hardcoded namespace with <code>{{args.namespace}}</code> so it works for both environments, and add <code>or vector(0)</code> as a fallback for when no data exists yet:</p>",
+        },
+        {
+          type: "code",
+          language: "yaml",
+          title: "Fix 3: implement ready-containers query",
+          code: `query: |-
+  sum(kube_pod_container_status_ready{
+    namespace="{{args.namespace}}",
+    pod=~"echo-server-.*"
+  }) or vector(0)`,
+        },
+        {
+          type: "text",
+          html: "<p>Commit, push, and retry once more. This time the rollout progresses through all canary stages and completes successfully.</p>",
+        },
+      ],
+      takeaways: [
+        "There are multiple effective ways to debug Argo Rollouts. Try them and use your favorite.",
+        "Service references follow the format service-name.namespace.svc.cluster.local. A typo here causes a silent DNS lookup failure at runtime.",
+        "Prometheus queries are a simple and effective way to validate application health during rollouts.",
+        "The Prometheus UI is a great way to test and build your queries before adding them to an AnalysisTemplate.",
+      ],
+    },
+    {
+      id: "promql-health-checks",
+      title: "Two Working PromQL Queries in the AnalysisTemplate",
+      intro:
+        "This objective is resolved by the previous step. Both metrics are now implemented and validated.",
+      body: [
+        {
+          type: "text",
+          html: "<p>With the fixes in place, the AnalysisTemplate contains two working health checks:</p><ul><li><strong>container-restarts</strong>: confirms zero container restarts during the rollout window.</li><li><strong>ready-containers</strong>: confirms at least one container is ready before the rollout progresses.</li></ul>",
+        },
+      ],
+    },
+    {
+      id: "rollouts-complete",
+      title: "All Rollouts Complete Successfully",
+      intro:
+        "Once both metrics pass, Argo Rollouts advances through the canary stages automatically and marks the rollout complete in both staging and production.",
+      body: [
+        {
+          type: "text",
+          html: "<p>Apply the same analysis-template fix in the production overlay if needed, or let Argo CD sync it automatically. Both environments will complete the rollout to podinfo 6.9.3 without manual intervention.</p>",
+        },
+        {
+          type: "callout",
+          variant: "tip",
+          html: "<p>Run the smoke test to confirm all objectives are met: <code>adventures/01-echoes-lost-in-orbit/intermediate/smoke-test.sh</code></p>",
+        },
+      ],
+    },
+  ],
+  furtherReading: [
+    {
+      title: "Progressive Delivery with Argo Rollouts",
+      url: "https://argo-rollouts.readthedocs.io/en/stable/concepts/",
+    },
+    {
+      title: "Argo Rollouts Analysis",
+      url: "https://argo-rollouts.readthedocs.io/en/stable/features/analysis/",
+    },
+    {
+      title: "Prometheus Querying Basics",
+      url: "https://prometheus.io/docs/prometheus/latest/querying/basics/",
+    },
+    {
+      title: "Kustomize documentation",
+      url: "https://kustomize.io/",
+    },
+  ],
+  completeSolution: {
+    title: "Complete AnalysisTemplate",
+    description:
+      "All three fixes applied: correct Prometheus address, corrected success condition, and implemented ready-containers query.",
+    language: "yaml",
+    code: `apiVersion: argoproj.io/v1alpha1
+kind: AnalysisTemplate
+metadata:
+  name: echo-analysis
+spec:
+  args:
+    - name: namespace
+  metrics:
+    - name: container-restarts
+      successCondition: result[0] == 0
+      failureLimit: 0
+      inconclusiveLimit: 0
+      consecutiveErrorLimit: 0
+      count: 1
+      provider:
+        prometheus:
+          address: http://prometheus-server.prometheus.svc.cluster.local
+          query: |
+            # There should be no restarts
+            sum(increase(kube_pod_container_status_restarts_total{
+              namespace="{{args.namespace}}",
+              pod=~"echo-server-.*"
+            }[1m])) or vector(0)
+    - name: ready-containers
+      successCondition: result[0] >= 1
+      failureLimit: 0
+      inconclusiveLimit: 0
+      consecutiveErrorLimit: 0
+      count: 1
+      provider:
+        prometheus:
+          address: http://prometheus-server.prometheus.svc.cluster.local
+          query: |-
+            # Check how many containers are ready (should be at least 1)
+            sum(kube_pod_container_status_ready{
+              namespace="{{args.namespace}}",
+              pod=~"echo-server-.*"
+            }) or vector(0)`,
+  },
+  outro: {
+    heading: "The Canary Sings",
+    html: "<p>The deployment pipeline is no longer silent. Both environments advanced to podinfo 6.9.3 guided by health checks that now actually check health. The Zephyrian relay network is back online, and the canary has earned its promotion.</p><p>Every crew navigates a broken deployment differently. See how others got their rollouts unstuck.</p>",
+  },
+};
diff --git a/src/data/solutions/index.ts b/src/data/solutions/index.ts
new file mode 100644
index 000000000..db98508c4
--- /dev/null
+++ b/src/data/solutions/index.ts
@@ -0,0 +1,12 @@
+// This file is auto-generated by scripts/generate-solutions.mjs. Do not edit by hand.
+import type { Solution } from "./types";
+
+import { solution as solution_echoes_lost_in_orbit_beginner } from "./echoes-lost-in-orbit/beginner";
+import { solution as solution_echoes_lost_in_orbit_expert } from "./echoes-lost-in-orbit/expert";
+import { solution as solution_echoes_lost_in_orbit_intermediate } from "./echoes-lost-in-orbit/intermediate";
+
+export const SOLUTIONS: Solution[] = [
+  solution_echoes_lost_in_orbit_beginner,
+  solution_echoes_lost_in_orbit_expert,
+  solution_echoes_lost_in_orbit_intermediate,
+];
diff --git a/src/data/solutions/types.ts b/src/data/solutions/types.ts
new file mode 100644
index 000000000..fb366bd36
--- /dev/null
+++ b/src/data/solutions/types.ts
@@ -0,0 +1,46 @@
+export type SolutionBlock =
+  | { type: "text"; html: string }
+  | { type: "code"; language: string; title?: string; code: string }
+  | { type: "image"; src: string; alt: string; caption?: string }
+  | { type: "callout"; variant: "tip" | "warning" | "info"; html: string };
+
+export type SolutionStep = {
+  id: string;
+  title: string;
+  intro?: string;
+  body: SolutionBlock[];
+  takeaways?: string[];
+};
+
+export type Solution = {
+  adventureId: string;
+  levelId: string;
+  /** Page title, e.g. "Beginner Solution: Broken Echoes" */
+  title: string;
+  /** Person who wrote the walkthrough (may differ from the challenge builder) */
+  contributor?: { name: string; url?: string };
+  /** Spoiler note rendered at the top of the page */
+  spoilerWarning?: string;
+  /** Intro paragraph(s) rendered before the context card */
+  intro?: string;
+  /** Optional context section explaining setup or tooling */
+  context?: {
+    title: string;
+    body: SolutionBlock[];
+  };
+  steps: SolutionStep[];
+  /** Links shown in the sidebar Further Reading card. Dedup by URL before adding. */
+  furtherReading?: Array<{ title: string; url: string }>;
+  /** Final corrected config or code shown as a summary card */
+  completeSolution?: {
+    title?: string;
+    description?: string;
+    language: string;
+    code: string;
+  };
+  /** Narrative closing section rendered after the complete solution */
+  outro?: {
+    heading: string;
+    html: string;
+  };
+};
diff --git a/src/index.css b/src/index.css
index b40b7b1c3..46f2d8cfe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -523,7 +523,7 @@ html {
 
 /* Glowing card hover - add card-glow class to cards */
 .card-glow {
-  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
+  transition: box-shadow 0.25s ease, border-color 0.25s ease;
 }
 .card-glow:hover {
   box-shadow:
@@ -828,6 +828,7 @@ html {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.85em;
   color: hsl(var(--foreground));
+  overflow-wrap: break-word;
 }
 .md-inline strong { font-weight: 600; color: hsl(var(--foreground)); }
 .md-inline em { font-style: italic; color: hsl(var(--text-secondary)); }
@@ -901,6 +902,7 @@ html {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.85em;
   color: hsl(var(--foreground));
+  overflow-wrap: break-word;
 }
 /* Code inside a link: only show link style, not code chip.
    Must appear after the generic code rules so it wins by source order
@@ -969,6 +971,21 @@ html {
 .md-content td { padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--surface-border)); text-align: left; }
 .md-content th { font-weight: 600; color: hsl(var(--foreground)); background: hsl(var(--surface)); }
 .md-content td { color: hsl(var(--text-secondary)); }
+.md-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--surface-border));
+  margin: 1rem 0;
+  display: block;
+}
+.md-content h4 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
 /* Links inside markdown content share docs-ext-link styling */
 .md-content a {
   display: inline-flex;
@@ -1010,6 +1027,9 @@ html {
 /* Copy button wrapper injected by MarkdownContent's useEffect */
 .md-pre-group { position: relative; margin-bottom: 1rem; }
 .md-pre-group pre { margin-bottom: 0; padding-right: 3.5rem; }
+/* CodeBlock header-bar pattern: pre and its wrapper attach flush to the header row above */
+.code-block-body pre { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-bottom: 0; }
+.code-block-body .md-pre-group { margin-bottom: 0; }
 .md-copy-btn {
   position: absolute;
   top: 0.5rem;
@@ -1020,7 +1040,7 @@ html {
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--surface-border));
   background: hsl(var(--background) / 0.8);
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: hsl(var(--text-secondary));
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 320d68d76..c328f009a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -13,6 +13,11 @@ export function isDeadlinePast(deadline: string | undefined): boolean {
   return !isNaN(date.getTime()) && date < new Date();
 }
 
+/** Returns true when the solution for a challenge is unlocked: no deadline, or deadline has passed. */
+export function isSolutionUnlocked(deadline: string | undefined): boolean {
+  return !deadline || isDeadlinePast(deadline);
+}
+
 /**
  * Formats an ISO 8601 deadline string for human display.
  * Preserves the stored UTC offset rather than converting to the viewer's local timezone.
diff --git a/src/pages/ChallengeDetail.tsx b/src/pages/ChallengeDetail.tsx
index ca668a5b7..49598a1a4 100644
--- a/src/pages/ChallengeDetail.tsx
+++ b/src/pages/ChallengeDetail.tsx
@@ -1,8 +1,9 @@
 import { type JSX } from "react";
-import { useParams, useLoaderData } from "react-router";
+import { useParams, useLoaderData, Link } from "react-router";
 import type { MetaFunction, LoaderFunctionArgs, LinksFunction } from "react-router";
-import { Check, Clock, ExternalLink } from "lucide-react";
+import { Check, Clock, ExternalLink, ArrowRight } from "lucide-react";
 import { ADVENTURES } from "@/data/adventures";
+import { SOLUTIONS } from "@/data/solutions";
 import { TagChips } from "@/components/TagChips";
 import { CodespacesButton } from "@/components/CodespacesButton";
 import { DifficultyBadge } from "@/components/DifficultyBadge";
@@ -23,7 +24,7 @@ import { RewardsCard } from "@/components/RewardsCard";
 import { ChallengeShareLinks } from "@/components/ChallengeShareLinks";
 import { SITE_URL, BRAND_NAME, COMMUNITY_DISPLAY_NAME, COMMUNITY_URL } from "@/data/constants";
 import { buildPageMeta } from "@/lib/meta";
-import { isDeadlinePast } from "@/lib/utils";
+import { isDeadlinePast, isSolutionUnlocked } from "@/lib/utils";
 import { InlineProse } from "@/components/InlineProse";
 
 export const links: LinksFunction = () => [
@@ -31,11 +32,15 @@ export const links: LinksFunction = () => [
   { rel: "preload", href: `${import.meta.env.BASE_URL}fonts/jetbrains-mono-latin-600-normal.woff2`, as: "font", type: "font/woff2", crossOrigin: "anonymous" },
 ];
 
-export function loader({ params }: LoaderFunctionArgs): { rewardsBelowFold: boolean } {
+export function loader({ params }: LoaderFunctionArgs): { rewardsBelowFold: boolean; hasSolution: boolean } {
   const adventure = ADVENTURES.find((a) => a.id === params.id);
   const level = adventure?.levels.find((l) => l.id === params.levelId);
   const deadline = level?.deadline ?? adventure?.rewards?.deadline;
-  return { rewardsBelowFold: isDeadlinePast(deadline) };
+  const rewardsBelowFold = isDeadlinePast(deadline);
+  const hasSolution = isSolutionUnlocked(deadline) && SOLUTIONS.some(
+    (s) => s.adventureId === params.id && s.levelId === params.levelId
+  );
+  return { rewardsBelowFold, hasSolution };
 }
 
 export const meta: MetaFunction = ({ params }) => {
@@ -96,9 +101,10 @@ type StructuredLayoutProps = {
   adventure: (typeof ADVENTURES)[number];
   level: (typeof ADVENTURES)[number]["levels"][number];
   rewardsBelowFold: boolean;
+  hasSolution: boolean;
 };
 
-const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayoutProps): JSX.Element => {
+const StructuredLayout = ({ adventure, level, rewardsBelowFold, hasSolution }: StructuredLayoutProps): JSX.Element => {
   const { intro, objective, toolbox, backstory, architecture, architectureDiagram, diagramAlt, architectureAscii, howToPlay, helpfulLinks, verification } = level;
   const levelUrl = `${SITE_URL}/adventures/${adventure.id}/levels/${level.id}/`;
   const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(levelUrl)}`;
@@ -275,6 +281,25 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
             </p>
           </section>
 
+          {/* Solution walkthrough link — shown after deadline passes and only when a solution is authored */}
+          {hasSolution && (
+            <section className="mb-6 rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-5">
+              <h2 className="font-sans text-sm font-semibold tracking-wide text-primary mb-1">
+                Check Out the Solution Walkthrough
+              </h2>
+              <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed mb-3">
+                See how we approached this challenge step by step. Found a better way? We&apos;d love to hear about it in the discussion.
+              </p>
+              <Link
+                to={`/adventures/${adventure.id}/levels/${level.id}/solution/`}
+                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
+              >
+                View the solution walkthrough
+                <ArrowRight size={14} aria-hidden="true" />
+              </Link>
+            </section>
+          )}
+
           {/* Toolbox + Helpful Documentation side-by-side */}
           {((toolbox && toolbox.length > 0) || (helpfulLinks && helpfulLinks.length > 0)) && (
             <div className={`grid gap-5 mb-6${toolbox && toolbox.length > 0 && helpfulLinks && helpfulLinks.length > 0 ? " sm:grid-cols-2" : ""}`}>
@@ -374,7 +399,7 @@ const StructuredLayout = ({ adventure, level, rewardsBelowFold }: StructuredLayo
 
 const ChallengeDetail = (): JSX.Element => {
   const { id, levelId } = useParams<{ id: string; levelId: string }>();
-  const { rewardsBelowFold } = useLoaderData<{ rewardsBelowFold: boolean }>();
+  const { rewardsBelowFold, hasSolution } = useLoaderData<ReturnType<typeof loader>>();
   const adventure = ADVENTURES.find((adventure) => adventure.id === id);
   const level = adventure?.levels.find((level) => level.id === levelId);
 
@@ -401,7 +426,7 @@ const ChallengeDetail = (): JSX.Element => {
           />
 
           {hasStructuredContent ? (
-            <StructuredLayout adventure={adventure} level={level} rewardsBelowFold={rewardsBelowFold} />
+            <StructuredLayout adventure={adventure} level={level} rewardsBelowFold={rewardsBelowFold} hasSolution={hasSolution} />
           ) : (
             <>
               {/* Legacy layout for levels without structured content */}
diff --git a/src/pages/SolutionDetail.tsx b/src/pages/SolutionDetail.tsx
new file mode 100644
index 000000000..b8c850eec
--- /dev/null
+++ b/src/pages/SolutionDetail.tsx
@@ -0,0 +1,786 @@
+import { type JSX, useState } from "react";
+import { useLoaderData, Link } from "react-router";
+import type { MetaFunction, LoaderFunctionArgs } from "react-router";
+import {
+  ArrowLeft,
+  ExternalLink,
+  Lock,
+  Copy,
+  Check,
+  Lightbulb,
+  AlertTriangle,
+  Info,
+  ChevronDown,
+  Sparkles,
+} from "lucide-react";
+import type { SolutionBlock, Solution } from "@/data/solutions/types";
+import { ADVENTURES, tagToSlug } from "@/data/adventures";
+import { SOLUTIONS } from "@/data/solutions";
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { Breadcrumb } from "@/components/Breadcrumb";
+import { ContributorBadge } from "@/components/ContributorBadge";
+import { DifficultyBadge } from "@/components/DifficultyBadge";
+import { CodespacesButton } from "@/components/CodespacesButton";
+import {
+  SITE_URL,
+  BRAND_NAME,
+  COMMUNITY_URL,
+} from "@/data/constants";
+import { buildPageMeta } from "@/lib/meta";
+import { isSolutionUnlocked, formatDeadline } from "@/lib/utils";
+
+type LoaderData = {
+  adventure: (typeof ADVENTURES)[number] | null;
+  level: (typeof ADVENTURES)[number]["levels"][number] | null;
+  solutionUnlocked: boolean;
+  solution: Solution | null;
+  challengeUrl: string;
+  discussionUrl: string;
+  deadline: string | undefined;
+};
+
+export function loader({ params }: LoaderFunctionArgs): LoaderData {
+  const adventure = ADVENTURES.find((a) => a.id === params.id) ?? null;
+  const level = adventure?.levels.find((l) => l.id === params.levelId) ?? null;
+  const deadline = level?.deadline ?? adventure?.rewards?.deadline;
+  const solutionUnlocked = isSolutionUnlocked(deadline);
+  const solution =
+    solutionUnlocked && adventure !== null && level !== null
+      ? (SOLUTIONS.find((s) => s.adventureId === params.id && s.levelId === params.levelId) ?? null)
+      : null;
+  const challengeUrl =
+    adventure !== null && level !== null
+      ? `/adventures/${adventure.id}/levels/${level.id}/`
+      : "/adventures/";
+  const discussionUrl = level?.discussionUrl
+    ? level.discussionUrl.startsWith("http")
+      ? level.discussionUrl
+      : `${COMMUNITY_URL}${level.discussionUrl}`
+    : COMMUNITY_URL;
+  return { adventure, level, solutionUnlocked, solution, challengeUrl, discussionUrl, deadline };
+}
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  if (!data?.adventure || !data?.level) {
+    return [
+      { title: `Solution Not Found - ${BRAND_NAME}` },
+      { name: "robots", content: "noindex, nofollow" },
+    ];
+  }
+  if (!data.solutionUnlocked) {
+    return [
+      { title: `${data.level.name} Solution - ${data.adventure.title} - ${BRAND_NAME}` },
+      { name: "robots", content: "noindex, nofollow" },
+    ];
+  }
+  if (!data.solution) {
+    return [
+      { title: `Solution Not Found - ${BRAND_NAME}` },
+      { name: "robots", content: "noindex, nofollow" },
+    ];
+  }
+  const { adventure, level, solution } = data;
+  const title = `${solution.title} - ${adventure.title} - ${BRAND_NAME}`;
+  const description = `Step-by-step solution walkthrough for the ${level.name} challenge in ${adventure.title}.`;
+  return buildPageMeta({
+    title,
+    description,
+    url: `${SITE_URL}/adventures/${adventure.id}/levels/${level.id}/solution/`,
+    ogType: "article",
+    extra: [
+      {
+        "script:ld+json": {
+          "@context": "https://schema.org",
+          "@type": "BreadcrumbList",
+          itemListElement: [
+            { "@type": "ListItem", position: 1, name: "Home", item: `${SITE_URL}/` },
+            { "@type": "ListItem", position: 2, name: "Adventures", item: `${SITE_URL}/adventures/` },
+            { "@type": "ListItem", position: 3, name: adventure.title, item: `${SITE_URL}/adventures/${adventure.id}/` },
+            { "@type": "ListItem", position: 4, name: level.name, item: `${SITE_URL}/adventures/${adventure.id}/levels/${level.id}/` },
+            { "@type": "ListItem", position: 5, name: "Solution", item: `${SITE_URL}/adventures/${adventure.id}/levels/${level.id}/solution/` },
+          ],
+        },
+      },
+    ],
+  });
+};
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+const CodeBlock = ({
+  language,
+  title,
+  code,
+}: {
+  language: string;
+  title?: string;
+  code: string;
+}): JSX.Element => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (): void => {
+    navigator.clipboard?.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {
+      // writeText can fail when the document loses focus
+    });
+  };
+
+  return (
+    <div>
+      {/* Header bar: label always visible, no copy button here */}
+      <div className="flex items-center justify-end rounded-t-lg border border-b-0 border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] px-3 py-2">
+        <span className="truncate text-xs font-mono text-[hsl(var(--text-faint))] select-none" aria-hidden="true">
+          {title ?? language}
+        </span>
+      </div>
+      {/* Same md-pre-group + md-copy-btn pattern as ChallengeDetail: hover-to-show */}
+      <div className="md-content code-block-body">
+        <div className="md-pre-group">
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- makes scrollable code block keyboard-reachable per WCAG 2.1 SC 2.1.1 */}
+          <pre tabIndex={0} aria-label={title ?? `${language} code block`}>
+            <code>{code}</code>
+          </pre>
+          <button
+            type="button"
+            className="md-copy-btn"
+            onClick={handleCopy}
+            aria-label={copied ? "Code copied" : "Copy code"}
+          >
+            {copied ? (
+              <Check size={12} aria-hidden="true" />
+            ) : (
+              <Copy size={12} aria-hidden="true" />
+            )}
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+      </div>
+      {/* Live region announces copy confirmation to screen readers without moving focus */}
+      <span aria-live="polite" className="sr-only">
+        {copied ? "Code copied to clipboard" : ""}
+      </span>
+    </div>
+  );
+};
+
+const calloutConfig = {
+  tip: {
+    icon: Lightbulb,
+    label: "Tip",
+    className: "border-primary/30 bg-primary/5",
+    iconClass: "text-primary",
+  },
+  warning: {
+    icon: AlertTriangle,
+    label: "Warning",
+    className: "border-orange-500/30 bg-orange-500/5",
+    iconClass: "text-orange-400",
+  },
+  info: {
+    icon: Info,
+    label: "Info",
+    className: "border-blue-400/30 bg-blue-400/5",
+    iconClass: "text-blue-400",
+  },
+};
+
+const Callout = ({
+  variant,
+  html,
+}: {
+  variant: "tip" | "warning" | "info";
+  html: string;
+}): JSX.Element => {
+  const config = calloutConfig[variant];
+  const Icon = config.icon;
+  return (
+    <div
+      className={`flex gap-3 rounded-lg border p-4 text-[hsl(var(--foreground))] ${config.className}`}
+      role="note"
+    >
+      <Icon size={16} className={`shrink-0 mt-0.5 ${config.iconClass}`} aria-hidden="true" />
+      <div className="min-w-0">
+        <p className="text-xs font-semibold uppercase tracking-wider mb-1 opacity-70">
+          {config.label}
+        </p>
+        <div
+          className="text-sm leading-relaxed md-content [&>p]:mb-0 [&>p:not(:last-child)]:mb-2"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const SolutionImage = ({
+  src,
+  alt,
+  caption,
+}: {
+  src: string;
+  alt: string;
+  caption?: string;
+}): JSX.Element => (
+  <figure className="my-4">
+    <img
+      src={src}
+      alt={alt}
+      className="w-full rounded-xl border border-[hsl(var(--surface-border))] shadow-sm"
+      loading="lazy"
+      decoding="async"
+    />
+    {caption && (
+      <figcaption className="mt-2 text-xs text-center text-[hsl(var(--text-faint))]">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);
+
+const BlockRenderer = ({ blocks }: { blocks: SolutionBlock[] }): JSX.Element => (
+  <div className="space-y-4">
+    {blocks.map((block, i) => {
+      const key = `${block.type}-${i}`;
+      if (block.type === "text") {
+        return (
+          <div key={key} className="md-content" dangerouslySetInnerHTML={{ __html: block.html }} />
+        );
+      }
+      if (block.type === "code") {
+        return (
+          <CodeBlock key={key} language={block.language} title={block.title} code={block.code} />
+        );
+      }
+      if (block.type === "image") {
+        return (
+          <SolutionImage key={key} src={block.src} alt={block.alt} caption={block.caption} />
+        );
+      }
+      if (block.type === "callout") {
+        return <Callout key={key} variant={block.variant} html={block.html} />;
+      }
+      return null;
+    })}
+  </div>
+);
+
+const TakeawaysList = ({ items }: { items?: string[] }): JSX.Element | null => {
+  if (!items || items.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-primary/20 bg-primary/5 p-4">
+      <p className="text-xs font-semibold text-primary uppercase tracking-wider mb-3">
+        Key Takeaways
+      </p>
+      <ul className="space-y-2" role="list">
+        {items.map((item) => (
+          <li key={item} className="flex gap-2 text-sm text-[hsl(var(--text-secondary))] leading-relaxed">
+            <span className="shrink-0 text-primary mt-0.5" aria-hidden="true">›</span>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const FurtherReadingList = ({ links }: { links: Array<{ title: string; url: string }> }): JSX.Element => (
+  <ul className="space-y-1" role="list">
+    {links.map((link) => (
+      <li key={link.url}>
+        <a href={link.url} target="_blank" rel="noopener noreferrer" className="docs-ext-link text-sm">
+          {link.title}
+          <ExternalLink size={11} aria-hidden="true" />
+          <span className="sr-only"> (opens in new tab)</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+);
+
+// Shared <summary> chevron
+const SummaryChevron = (): JSX.Element => (
+  <ChevronDown
+    size={16}
+    className="shrink-0 text-[hsl(var(--text-faint))] transition-transform motion-reduce:transition-none group-open:rotate-180"
+    aria-hidden="true"
+  />
+);
+
+// Shared summary base classes
+const summaryBase =
+  "flex cursor-pointer list-none items-center gap-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&::-webkit-details-marker]:hidden";
+
+// ---------------------------------------------------------------------------
+// Hero
+// ---------------------------------------------------------------------------
+
+type HeroProps = {
+  adventure: { title: string; backstory?: string[] };
+  level: { difficulty: string; topics?: string[]; backstory?: string[] };
+  solution: { title: string; intro?: string; contributor?: { name: string; url?: string } };
+};
+
+const TopicPills = ({ topics }: { topics?: string[] }): JSX.Element | null => {
+  if (!topics || topics.length === 0) return null;
+  return (
+    <ul className="flex flex-wrap gap-2 mt-4" role="list" aria-label="Topics covered">
+      {topics.map((t) => (
+        <li key={t}>
+          <Link
+            to={`/challenges/${tagToSlug(t)}/`}
+            className="px-2.5 py-1.5 rounded-full border border-[hsl(var(--surface-border))] bg-background/40 text-xs text-[hsl(var(--text-secondary))] font-mono hover:border-primary/50 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+          >
+            {t}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const SolutionHero = ({ adventure, level, solution }: HeroProps): JSX.Element => (
+  <div className="rounded-2xl border border-[hsl(var(--surface-border))] overflow-hidden mb-8">
+    <div className="bg-[hsl(var(--surface))] px-6 md:px-8 pt-7 pb-6">
+      {/* backstory[0] is pre-rendered HTML from the markdown pipeline */}
+      {(level.backstory?.[0] ?? adventure.backstory?.[0]) && (
+        <div
+          role="note"
+          className="text-base italic text-[hsl(var(--text-secondary))] leading-relaxed [&>p]:mb-0"
+          dangerouslySetInnerHTML={{ __html: (level.backstory ?? adventure.backstory ?? [])[0] ?? "" }}
+        />
+      )}
+    </div>
+    <div className="h-0.5 bg-primary" aria-hidden="true" />
+    <div className="bg-background/40 px-6 md:px-8 py-6">
+      <div className="flex flex-wrap items-center gap-2 mb-3">
+        <DifficultyBadge difficulty={level.difficulty} showDot />
+        <span className="text-xs text-[hsl(var(--text-faint))] uppercase tracking-wider">
+          Solution
+        </span>
+      </div>
+      <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-3">
+        {solution.title}
+      </h1>
+      {solution.intro && (
+        <p className="text-[hsl(var(--text-secondary))] leading-relaxed max-w-3xl">
+          {solution.intro}
+        </p>
+      )}
+      {solution.contributor && (
+        <div className="mt-3">
+          <ContributorBadge
+            name={solution.contributor.name}
+            url={solution.contributor.url}
+            label="Solution Contributor"
+          />
+        </div>
+      )}
+      <TopicPills topics={level.topics} />
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Sidebar
+// ---------------------------------------------------------------------------
+
+const SidebarCard = ({
+  label,
+  labelSpacing = "mb-3",
+  children,
+}: {
+  label: string;
+  labelSpacing?: string;
+  children: React.ReactNode;
+}): JSX.Element => (
+  <div className="rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-5">
+    <p className={`font-sans text-xs font-semibold tracking-wide text-primary uppercase ${labelSpacing}`}>
+      {label}
+    </p>
+    {children}
+  </div>
+);
+
+type SolutionSidebarProps = {
+  adventure: { title: string };
+  level: { name: string; codespacesUrl?: string };
+  steps: Array<{ id: string; title: string }>;
+  challengeUrl: string;
+  discussionUrl: string;
+  furtherReading?: Array<{ title: string; url: string }>;
+};
+
+const StepNav = ({
+  steps,
+  className = "",
+}: {
+  steps: Array<{ id: string; title: string }>;
+  className?: string;
+}): JSX.Element => (
+  <nav
+    aria-label="Steps in this solution"
+    className={`rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-5 ${className}`}
+  >
+    <p className="font-sans text-xs font-semibold tracking-wide text-primary uppercase mb-3">
+      what was fixed
+    </p>
+    <ol className="space-y-2" role="list">
+      {steps.map((step, index) => (
+        <li key={step.id} className="flex gap-2.5 items-baseline">
+          <span
+            className="shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-primary/15 text-primary text-xs font-bold tabular-nums leading-none"
+            aria-hidden="true"
+          >
+            {index + 1}
+          </span>
+          <a
+            href={`#${step.id}`}
+            className="text-sm text-[hsl(var(--text-secondary))] hover:text-foreground transition-colors leading-snug focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            {step.title}
+          </a>
+        </li>
+      ))}
+    </ol>
+  </nav>
+);
+
+const SolutionSidebar = ({
+  adventure,
+  level,
+  steps,
+  challengeUrl,
+  discussionUrl,
+  furtherReading,
+}: SolutionSidebarProps): JSX.Element => (
+  <aside
+    aria-label="Solution navigation"
+    className="mt-10 lg:mt-0 space-y-4 lg:sticky lg:top-28 lg:self-start"
+  >
+    {level.codespacesUrl && (
+      <SidebarCard label="solve along" labelSpacing="mb-2">
+        <p className="text-xs text-[hsl(var(--text-secondary))] leading-relaxed mb-4">
+          Haven&apos;t solved it yet? Open the challenge in Codespaces and follow each step as you go.
+        </p>
+        <CodespacesButton href={level.codespacesUrl} />
+      </SidebarCard>
+    )}
+
+    <StepNav steps={steps} className="hidden lg:block" />
+
+    {furtherReading && furtherReading.length > 0 && (
+      <SidebarCard label="further reading" labelSpacing="mb-2">
+        <FurtherReadingList links={furtherReading} />
+      </SidebarCard>
+    )}
+
+    <SidebarCard label="challenge">
+      <p className="text-sm font-semibold text-foreground mb-0.5">{adventure.title}</p>
+      <p className="text-xs text-[hsl(var(--text-faint))] mb-4">{level.name}</p>
+      <Link
+        to={challengeUrl}
+        className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
+      >
+        <ArrowLeft size={13} aria-hidden="true" />
+        Back to challenge
+      </Link>
+    </SidebarCard>
+
+    <SidebarCard label="discussion" labelSpacing="mb-2">
+      <p className="text-xs text-[hsl(var(--text-secondary))] mb-3 leading-relaxed">
+        Found a better way? Share your approach and compare notes with others who solved it.
+      </p>
+      <a
+        href={discussionUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="docs-ext-link text-sm font-medium"
+      >
+        Join the discussion
+        <ExternalLink size={12} aria-hidden="true" />
+        <span className="sr-only"> (opens in new tab)</span>
+      </a>
+    </SidebarCard>
+  </aside>
+);
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+const SolutionDetail = (): JSX.Element => {
+  const { adventure, level, solutionUnlocked, solution, challengeUrl, discussionUrl, deadline } =
+    useLoaderData<ReturnType<typeof loader>>();
+
+  if (!adventure || !level) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navbar />
+        <main id="main-content" tabIndex={-1} className="px-6 md:px-16 pt-28 pb-24">
+          <div className="mx-auto max-w-2xl">
+            <h1 className="text-3xl font-bold text-foreground mb-4">Solution not found</h1>
+            <p className="text-[hsl(var(--text-secondary))] mb-6">
+              The challenge you&apos;re looking for doesn&apos;t exist.
+            </p>
+            <Link
+              to="/adventures/"
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+            >
+              <ArrowLeft size={14} aria-hidden="true" />
+              Browse adventures
+            </Link>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar />
+      <main id="main-content" tabIndex={-1} className="px-6 md:px-16 pt-28 pb-24">
+        <div className="mx-auto max-w-6xl">
+          <Breadcrumb
+            className="mb-10"
+            items={[
+              { label: "Adventures", href: "/adventures/" },
+              { label: adventure.title, href: `/adventures/${adventure.id}/` },
+              { label: level.name, href: challengeUrl },
+              { label: "Solution" },
+            ]}
+          />
+
+          {/* Not yet available */}
+          {!solutionUnlocked && (
+            <div className="max-w-2xl">
+              <div className="flex flex-wrap items-center gap-2 mb-4">
+                <DifficultyBadge difficulty={level.difficulty} showDot />
+              </div>
+              <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                {level.name}: Solution
+              </h1>
+              <div className="rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] p-6 flex gap-4">
+                <Lock
+                  size={20}
+                  className="shrink-0 mt-0.5 text-[hsl(var(--text-faint))]"
+                  aria-hidden="true"
+                />
+                <div>
+                  <p className="text-sm font-semibold text-foreground mb-1">Not yet available</p>
+                  <p className="text-sm text-[hsl(var(--text-secondary))]">
+                    This solution will be published after the challenge deadline
+                    {deadline ? `: ${formatDeadline(deadline)}` : ""}. Try solving it yourself
+                    first.
+                  </p>
+                  <Link
+                    to={challengeUrl}
+                    className="inline-flex items-center gap-1.5 mt-4 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
+                  >
+                    <ArrowLeft size={14} aria-hidden="true" />
+                    Back to challenge
+                  </Link>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Available but no solution authored yet */}
+          {solutionUnlocked && !solution && (
+            <div className="max-w-2xl">
+              <div className="flex flex-wrap items-center gap-2 mb-4">
+                <DifficultyBadge difficulty={level.difficulty} showDot />
+              </div>
+              <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+                {level.name}: Solution
+              </h1>
+              <p className="text-[hsl(var(--text-secondary))] mb-6">
+                A solution walkthrough for this challenge hasn&apos;t been published yet.
+              </p>
+              <Link
+                to={challengeUrl}
+                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
+              >
+                <ArrowLeft size={14} aria-hidden="true" />
+                Back to challenge
+              </Link>
+            </div>
+          )}
+
+          {/* Full solution — Overview + Detail layout */}
+          {solutionUnlocked && solution && (
+            <>
+              <SolutionHero adventure={adventure} level={level} solution={solution} />
+
+              {/* Two-column layout */}
+              <div className="lg:grid lg:grid-cols-[minmax(0,1fr)_17rem] lg:gap-12">
+                {/* Main content */}
+                <article aria-label={solution.title}>
+                  {/* Spoiler warning */}
+                  {solution.spoilerWarning && (
+                    <div className="flex gap-3 rounded-xl border border-primary/25 bg-primary/5 p-4 mb-6" role="note">
+                      <AlertTriangle
+                        size={16}
+                        className="shrink-0 mt-0.5 text-primary"
+                        aria-hidden="true"
+                      />
+                      <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed">
+                        {solution.spoilerWarning}
+                      </p>
+                    </div>
+                  )}
+
+                  {/* What Was Fixed — mobile only; desktop shows this in the sidebar */}
+                  <StepNav steps={solution.steps} className="lg:hidden mb-4" />
+
+                  {/* Context */}
+                  {solution.context && (
+                    <section
+                      aria-labelledby="context-heading"
+                      className="rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] px-5 py-5 mb-3"
+                    >
+                      <h2
+                        id="context-heading"
+                        className="font-sans text-sm font-semibold tracking-wide text-primary uppercase mb-4"
+                      >
+                        {solution.context.title}
+                      </h2>
+                      <BlockRenderer blocks={solution.context.body} />
+                    </section>
+                  )}
+
+                  {/* Step cards */}
+                  <ol className="space-y-3 mt-3" role="list" aria-label="Solution steps">
+                    {solution.steps.map((step, index) => (
+                      <li key={step.id}>
+                        <details
+                          id={step.id}
+                          tabIndex={-1}
+                          open={index === 0}
+                          className="group scroll-mt-28 rounded-xl"
+                        >
+                          <summary
+                            className={`${summaryBase} gap-4 rounded-xl border border-[hsl(var(--surface-border))] bg-[hsl(var(--surface))] px-5 py-4 group-open:rounded-b-none group-open:border-b-0`}
+                          >
+                            <span
+                              className="shrink-0 flex items-center justify-center w-7 h-7 rounded-full bg-primary text-[hsl(var(--primary-foreground))] text-sm font-bold tabular-nums"
+                              aria-hidden="true"
+                            >
+                              {String(index + 1).padStart(2, "0")}
+                            </span>
+                            <h3 className="text-base font-semibold text-foreground flex-1">
+                              {step.title}
+                            </h3>
+                            <SummaryChevron />
+                          </summary>
+                          <div className="rounded-b-xl border border-t-0 border-[hsl(var(--surface-border))] bg-background/40 px-5 py-5 space-y-5">
+                            {step.intro && (
+                              <p className="text-sm text-[hsl(var(--text-secondary))] leading-relaxed">
+                                {step.intro}
+                              </p>
+                            )}
+                            <BlockRenderer blocks={step.body} />
+                            <TakeawaysList items={step.takeaways} />
+                          </div>
+                        </details>
+                      </li>
+                    ))}
+                  </ol>
+
+                  {/* Complete solution */}
+                  {solution.completeSolution && (
+                    <details open tabIndex={-1} className="group mt-3 scroll-mt-28 rounded-xl">
+                      <summary
+                        className={`${summaryBase} rounded-xl border border-primary/30 bg-primary/5 px-5 py-4 group-open:rounded-b-none group-open:border-b-0`}
+                      >
+                        <div className="flex-1 min-w-0">
+                          <p className="text-xs font-semibold text-primary uppercase tracking-wider mb-0.5">
+                            Final Result
+                          </p>
+                          <span className="text-base font-semibold text-foreground leading-snug">
+                            {solution.completeSolution.title ?? "Complete Solution"}
+                          </span>
+                        </div>
+                        <SummaryChevron />
+                      </summary>
+                      <div className="rounded-b-xl border border-t-0 border-primary/25 bg-background/40 px-5 py-5">
+                        {solution.completeSolution.description && (
+                          <p className="text-sm text-[hsl(var(--text-secondary))] mb-4 leading-relaxed">
+                            {solution.completeSolution.description}
+                          </p>
+                        )}
+                        <CodeBlock
+                          language={solution.completeSolution.language}
+                          code={solution.completeSolution.code}
+                        />
+                      </div>
+                    </details>
+                  )}
+
+                  {/* Narrative ending */}
+                  {solution.outro && (
+                    <section
+                      aria-labelledby="outro-heading"
+                      className="mt-6 rounded-2xl border border-[hsl(var(--surface-border))] overflow-hidden"
+                    >
+                      <div className="h-0.5 bg-primary" aria-hidden="true" />
+                      <div className="px-6 py-7 bg-[hsl(var(--surface))]">
+                        <div className="flex items-start gap-4">
+                          <span
+                            className="shrink-0 flex items-center justify-center w-9 h-9 rounded-full bg-primary/15 text-primary mt-0.5"
+                            aria-hidden="true"
+                          >
+                            <Sparkles size={16} />
+                          </span>
+                          <div className="min-w-0 w-full">
+                            <h2
+                              id="outro-heading"
+                              className="text-base font-semibold text-foreground mb-3"
+                            >
+                              {solution.outro.heading}
+                            </h2>
+                            <div
+                              className="md-content text-sm text-[hsl(var(--text-secondary))] leading-relaxed [&>p:not(:last-child)]:mb-3 [&>p:last-child]:mb-0"
+                              dangerouslySetInnerHTML={{ __html: solution.outro.html }}
+                            />
+                            <a
+                              href={discussionUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="docs-ext-link text-sm font-medium mt-4"
+                            >
+                              Browse the discussion
+                              <ExternalLink size={12} aria-hidden="true" />
+                              <span className="sr-only"> (opens in new tab)</span>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </section>
+                  )}
+                </article>
+
+                <SolutionSidebar
+                  adventure={adventure}
+                  level={level}
+                  steps={solution.steps}
+                  challengeUrl={challengeUrl}
+                  discussionUrl={discussionUrl}
+                  furtherReading={solution.furtherReading}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default SolutionDetail;
diff --git a/src/routes.ts b/src/routes.ts
index 764745a49..dedbb152b 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,6 +6,7 @@ export default [
     route("adventures", "pages/Adventures.tsx"),
     route("adventures/:id", "pages/AdventureDetail.tsx"),
     route("adventures/:id/levels/:levelId", "pages/ChallengeDetail.tsx"),
+    route("adventures/:id/levels/:levelId/solution", "pages/SolutionDetail.tsx"),
     route("challenges/:tag?", "pages/Challenges.tsx", { id: "challenges" }),
     route("contribute", "pages/Contribute.tsx"),
     route("sponsors", "pages/Sponsors.tsx"),
diff --git a/src/test/adventureCard.test.tsx b/src/test/adventureCard.test.tsx
index 65b5ba4f2..41ef38bd1 100644
--- a/src/test/adventureCard.test.tsx
+++ b/src/test/adventureCard.test.tsx
@@ -17,6 +17,27 @@ const summary: AdventureCardSummary = {
 };
 
 describe("AdventureCard", () => {
+  it("aria-label combines title, difficulties, and tags for AT link navigation", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <AdventureCard adventure={summary} />
+      </MemoryRouter>
+    );
+    const link = container.querySelector("a[href='/adventures/test-adventure/']");
+    expect(link?.getAttribute("aria-label")).toBe("Test Adventure: beginner, a, b");
+  });
+
+  it("aria-label omits tags section when adventure has no tags", () => {
+    const noTags = { ...summary, tags: [] };
+    const { container } = render(
+      <MemoryRouter>
+        <AdventureCard adventure={noTags} />
+      </MemoryRouter>
+    );
+    const link = container.querySelector("a[href='/adventures/test-adventure/']");
+    expect(link?.getAttribute("aria-label")).toBe("Test Adventure: beginner");
+  });
+
   it("never renders a nested <a> inside the outer card link, even when story contains a markdown link", () => {
     const { container } = render(
       <MemoryRouter>
diff --git a/src/test/challengesGrid.test.tsx b/src/test/challengesGrid.test.tsx
index f2be10f00..5679ce9a3 100644
--- a/src/test/challengesGrid.test.tsx
+++ b/src/test/challengesGrid.test.tsx
@@ -224,6 +224,15 @@ describe("ChallengesGrid", () => {
       fireEvent.keyDown(btns[0], { key: "Enter" });
       expect(document.activeElement).toBe(btns[0]);
     });
+
+    it("mobile dropdown triggers have aria-haspopup so AT announces them as popup controls", () => {
+      const { container } = renderGrid();
+      const triggers = Array.from(container.querySelectorAll<HTMLButtonElement>("button[aria-expanded]"));
+      expect(triggers.length).toBeGreaterThan(0);
+      triggers.forEach((trigger) => {
+        expect(trigger.getAttribute("aria-haspopup")).toBe("true");
+      });
+    });
   });
 
   describe("difficulty filter", () => {
diff --git a/src/test/filteredLevelCard.test.tsx b/src/test/filteredLevelCard.test.tsx
index 9d614ce9b..2a004a310 100644
--- a/src/test/filteredLevelCard.test.tsx
+++ b/src/test/filteredLevelCard.test.tsx
@@ -60,6 +60,12 @@ describe("FilteredLevelCard - link", () => {
     const link = screen.getByRole("link");
     expect(link.getAttribute("href")).toBe("/adventures/my-adventure/levels/beginner/");
   });
+
+  it("aria-label is level name, difficulty, and adventure title joined with colon and comma", () => {
+    renderCard(LEVEL, "adventure-01", "Kubernetes 101");
+    const link = screen.getByRole("link");
+    expect(link.getAttribute("aria-label")).toBe("Beginner Challenge: Beginner, Kubernetes 101");
+  });
 });
 
 // ---------------------------------------------------------------------------
diff --git a/src/test/prerender.test.ts b/src/test/prerender.test.ts
index c62a9262c..a1affedd3 100644
--- a/src/test/prerender.test.ts
+++ b/src/test/prerender.test.ts
@@ -1,9 +1,10 @@
 // This test requires a production build to exist in dist/client/.
 // Run `npm run build` before running these tests.
 
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeAll } from "vitest";
 import * as fs from "fs";
 import * as path from "path";
+import { SOLUTIONS } from "@/data/solutions";
 
 const DIST_ROOT = path.resolve(__dirname, "../../dist/client");
 
@@ -131,6 +132,20 @@ const pages: PageSpec[] = [
     check: { type: "contains", value: "Hyperspace Operations &amp; Transport" },
   },
   // /GENERATED:adventures
+  // GENERATED:solutions
+  {
+    file: "adventures/echoes-lost-in-orbit/levels/beginner/solution/index.html",
+    check: { type: "contains", value: "Solution:" },
+  },
+  {
+    file: "adventures/echoes-lost-in-orbit/levels/expert/solution/index.html",
+    check: { type: "contains", value: "Solution:" },
+  },
+  {
+    file: "adventures/echoes-lost-in-orbit/levels/intermediate/solution/index.html",
+    check: { type: "contains", value: "Solution:" },
+  },
+  // /GENERATED:solutions
   {
     file: "challenges/index.html",
     check: { type: "exact", value: "Open Source Challenges | OffOn" },
@@ -192,6 +207,34 @@ describe("prerendered HTML title tags", () => {
   }
 });
 
+describe("prerendered solution page content", () => {
+  const solutionFile = "adventures/echoes-lost-in-orbit/levels/beginner/solution/index.html";
+  const solutionData = SOLUTIONS.find(
+    (s) => s.adventureId === "echoes-lost-in-orbit" && s.levelId === "beginner"
+  )!;
+  let html: string;
+
+  beforeAll(() => {
+    const fullPath = path.join(DIST_ROOT, solutionFile);
+    if (!fs.existsSync(fullPath)) {
+      throw new Error(`dist/client/${solutionFile} not found. Run npm run build first.`);
+    }
+    html = fs.readFileSync(fullPath, "utf-8");
+  });
+
+  it("contains the contributor name", () => {
+    expect(html).toContain(solutionData.contributor!.name);
+  });
+
+  it("contains the outro heading", () => {
+    expect(html).toContain(solutionData.outro!.heading);
+  });
+
+  it("contains the discussion link text", () => {
+    expect(html).toContain("Browse the discussion");
+  });
+});
+
 describe("prerendered challenge pages include all content sections", () => {
   const challengePage = "adventures/echoes-lost-in-orbit/levels/beginner/index.html";
   const requiredSections = ["objective", "backstory", "toolbox", "learnings", "walkthrough", "completion"];
diff --git a/src/test/seo.test.ts b/src/test/seo.test.ts
index 2e41bf563..963339349 100644
--- a/src/test/seo.test.ts
+++ b/src/test/seo.test.ts
@@ -39,6 +39,11 @@ const ROUTES = [
   "/adventures/echoes-lost-in-orbit/levels/intermediate",
   "/adventures/echoes-lost-in-orbit/levels/expert",
   // /GENERATED:adventures
+  // GENERATED:solutions
+  "/adventures/echoes-lost-in-orbit/levels/beginner/solution",
+  "/adventures/echoes-lost-in-orbit/levels/expert/solution",
+  "/adventures/echoes-lost-in-orbit/levels/intermediate/solution",
+  // /GENERATED:solutions
   "/challenges",
   // GENERATED:challenge-tags
   "/challenges/argo-cd",
diff --git a/src/test/solutionDetail.test.tsx b/src/test/solutionDetail.test.tsx
new file mode 100644
index 000000000..1a6d3c475
--- /dev/null
+++ b/src/test/solutionDetail.test.tsx
@@ -0,0 +1,164 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { ConsentProvider } from "@/hooks/useConsent";
+import SolutionDetail from "@/pages/SolutionDetail";
+import { ADVENTURES } from "@/data/adventures";
+import { SOLUTIONS } from "@/data/solutions";
+import { COMMUNITY_URL } from "@/data/constants";
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual<typeof import("react-router")>("react-router");
+  return { ...actual, useLoaderData: vi.fn() };
+});
+
+import { useLoaderData } from "react-router";
+
+const adventure = ADVENTURES.find((a) => a.id === "echoes-lost-in-orbit")!;
+const level = adventure.levels.find((l) => l.id === "beginner")!;
+const solution = SOLUTIONS.find(
+  (s) => s.adventureId === "echoes-lost-in-orbit" && s.levelId === "beginner"
+)!;
+
+const baseLoader = {
+  adventure,
+  level,
+  solutionUnlocked: true,
+  solution,
+  challengeUrl: `/adventures/${adventure.id}/levels/${level.id}/`,
+  discussionUrl: COMMUNITY_URL,
+  deadline: undefined,
+};
+
+function renderPage() {
+  return render(
+    <ConsentProvider>
+      <MemoryRouter
+        initialEntries={[`/adventures/${adventure.id}/levels/${level.id}/solution`]}
+      >
+        <Routes>
+          <Route
+            path="/adventures/:id/levels/:levelId/solution"
+            element={<SolutionDetail />}
+          />
+        </Routes>
+      </MemoryRouter>
+    </ConsentProvider>
+  );
+}
+
+describe("SolutionDetail — page states", () => {
+  beforeEach(() => {
+    vi.mocked(useLoaderData).mockReturnValue(baseLoader);
+  });
+
+  it("renders the solution title and contributor name", () => {
+    renderPage();
+    expect(screen.getByRole("heading", { level: 1, name: solution.title })).toBeTruthy();
+    expect(screen.getByText(solution.contributor!.name)).toBeTruthy();
+  });
+
+  it("renders all step titles", () => {
+    renderPage();
+    for (const step of solution.steps) {
+      expect(screen.getAllByText(step.title).length).toBeGreaterThan(0);
+    }
+  });
+
+  it("renders the spoiler warning", () => {
+    renderPage();
+    expect(screen.getByText(solution.spoilerWarning!)).toBeTruthy();
+  });
+
+  it("renders the back-to-challenge link", () => {
+    renderPage();
+    expect(
+      screen.getByRole("link", { name: /Back to challenge/i })
+    ).toBeTruthy();
+  });
+});
+
+describe("SolutionDetail — locked state", () => {
+  it("shows not-yet-available message when deadline has not passed", () => {
+    vi.mocked(useLoaderData).mockReturnValue({
+      ...baseLoader,
+      solutionUnlocked: false,
+      solution: null,
+    });
+    renderPage();
+    expect(screen.getByText("Not yet available")).toBeTruthy();
+    expect(screen.queryByRole("heading", { level: 1, name: solution.title })).toBeNull();
+  });
+});
+
+describe("SolutionDetail — no solution authored", () => {
+  it("shows placeholder message when deadline passed but no solution exists", () => {
+    vi.mocked(useLoaderData).mockReturnValue({
+      ...baseLoader,
+      solutionUnlocked: true,
+      solution: null,
+    });
+    renderPage();
+    expect(screen.getByText(/hasn't been published yet/i)).toBeTruthy();
+    expect(screen.queryByRole("heading", { level: 1, name: solution.title })).toBeNull();
+  });
+});
+
+describe("SolutionDetail — not found", () => {
+  it("shows not-found heading when adventure is null", () => {
+    vi.mocked(useLoaderData).mockReturnValue({
+      adventure: null,
+      level: null,
+      solutionUnlocked: false,
+      solution: null,
+      challengeUrl: "/adventures/",
+      discussionUrl: COMMUNITY_URL,
+      deadline: undefined,
+    });
+    renderPage();
+    expect(screen.getByRole("heading", { level: 1, name: /Solution not found/i })).toBeTruthy();
+  });
+});
+
+describe("CodeBlock — copy button", () => {
+  let clipboardWriteText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    clipboardWriteText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText: clipboardWriteText },
+      writable: true,
+      configurable: true,
+    });
+    vi.mocked(useLoaderData).mockReturnValue(baseLoader);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("calls clipboard.writeText with code content on click", async () => {
+    renderPage();
+    const copyBtn = screen.getAllByRole("button", { name: /Copy code/i })[0];
+    await act(async () => { fireEvent.click(copyBtn); });
+    expect(clipboardWriteText).toHaveBeenCalledTimes(1);
+    expect(typeof clipboardWriteText.mock.calls[0][0]).toBe("string");
+  });
+
+  it("shows Copied state after click and announces to screen readers", async () => {
+    renderPage();
+    const copyBtn = screen.getAllByRole("button", { name: /Copy code/i })[0];
+    await act(async () => { fireEvent.click(copyBtn); });
+    expect(screen.getAllByRole("button", { name: /Code copied/i }).length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Code copied to clipboard").length).toBeGreaterThan(0);
+  });
+
+  it("reverts copy button back to Copy after 1500ms", async () => {
+    vi.useFakeTimers();
+    renderPage();
+    const copyBtn = screen.getAllByRole("button", { name: /Copy code/i })[0];
+    await act(async () => { fireEvent.click(copyBtn); });
+    act(() => { vi.advanceTimersByTime(1500); });
+    expect(screen.getAllByRole("button", { name: /Copy code/i }).length).toBeGreaterThan(0);
+  });
+});
diff --git a/styleguide.md b/styleguide.md
index d9732cd67..a723dc7b4 100644
--- a/styleguide.md
+++ b/styleguide.md
@@ -636,6 +636,8 @@ Renders a single adventure level as a card: difficulty badge, level name, key le
 
 Navigation card used in tag-filtered level grids. The entire card is a `<Link>` to the challenge detail page. Renders a difficulty badge, level name, first three learnings, and a footer row with "Challenge" label, an optional estimated time pill (`Clock` icon + `level.estimatedTime`), and the parent adventure title.
 
+**Accessible name:** the link carries `aria-label` in the format `"{level.name} — {difficulty} — {adventureTitle}"` (e.g. `"The Observability Challenge — Beginner — Blind by Design"`). This replaces the verbose computed name that would otherwise include all three learning bullet points.
+
 ```tsx
 <FilteredLevelCard
   level={level}
@@ -696,7 +698,7 @@ Two-row filter UI for the adventure catalog. Row 1 is a difficulty single-select
 | `onDifficultyChange` | `(diff: Difficulty \| null) => void` | Called when difficulty changes. |
 | `onTopicsChange` | `(topics: string[]) => void` | Called when tag selection changes. |
 
-**ARIA pattern:** all filter groups (mobile dropdowns and desktop pill rows) use `role="group"` with `aria-pressed` on each button. Mobile dropdowns are always in the DOM — the panel uses the HTML `hidden` attribute when closed so `aria-controls` on the trigger always resolves to a valid IDREF. Trigger buttons use `aria-expanded` and `aria-controls`. Arrow-key navigation (Up/Down) is supported within each open panel via `onKeyDown` handlers on the panel buttons.
+**ARIA pattern:** all filter groups (mobile dropdowns and desktop pill rows) use `role="group"` with `aria-pressed` on each button. Mobile dropdowns are always in the DOM — the panel uses the HTML `hidden` attribute when closed so `aria-controls` on the trigger always resolves to a valid IDREF. Trigger buttons use `aria-expanded`, `aria-controls`, and `aria-haspopup="true"` so AT announces them as popup controls. Arrow-key navigation (Up/Down) is supported within each open panel via `onKeyDown` handlers on the panel buttons.
 
 **Exported type:** `Difficulty = "Beginner" | "Intermediate" | "Expert"`. Import from `@/components/ChallengeFilters` where `activeDifficulty` state needs typing.
 
@@ -1299,6 +1301,8 @@ Site-wide footer. No props. Contains two `<nav>` landmark regions (`aria-label="
 
 Navigation card linking to an adventure overview page. The entire card is a `<Link>` to `/adventures/:id/`. Renders a header row with an "Adventure" mono label, an optional `LivePill`, and a `.badge-levels` level-count pill; the adventure title (hover: amber); a two-line `story` snippet; a row of `DifficultyBadge` instances; up to four technology tag `<span>` chips; and an optional `ContributorBadge` pinned to the card footer via `mt-auto`. Card border is `border-primary/50` when `adventure.isLive`, otherwise `border-[hsl(var(--surface-border))]`. Uses `card-glow` for hover glow.
 
+**Accessible name:** the link carries `aria-label` in the format `"{title} — {difficulties} — {tags}"` (e.g. `"Blind by Design — Beginner, Intermediate, Expert — Prometheus, Grafana"`). Tags are omitted if the adventure has none. This gives screen reader users difficulty and technology context when navigating by links, without the verbosity of the full card content.
+
 ```tsx
 <AdventureCard adventure={adventureSummary} />
 ```
@@ -1809,3 +1813,59 @@ Measured against the production build locally (`npm run build && npm run preview
 | Accessibility | 100 |
 | Best Practices | 100 |
 | SEO | 100 |
+
+## Solution Pages (`/adventures/:id/levels/:levelId/solution`)
+
+Solution walkthroughs live at `src/pages/SolutionDetail.tsx`. The page is gated: if a deadline has not passed (or no solution file exists), a locked state is shown. Once available, the page renders a two-column layout.
+
+### Data model
+
+Source files live at `src/data/solutions/<adventure-id>/<level-id>.ts`. Types are in `src/data/solutions/types.ts`.
+
+| Field | Type | Notes |
+| --- | --- | --- |
+| `title` | `string` | Title case, no emoji, no em dashes |
+| `contributor` | `{ name: string; url?: string }` | Optional. Walkthrough author if different from the challenge builder. Renders as a pill between the intro text and the topic tag pills in the hero. |
+| `spoilerWarning` | `string` | One sentence, plain text |
+| `intro` | `string` | One or two sentences, plain text |
+| `context` | `{ title, body: SolutionBlock[] }` | Optional. Always-open setup section rendered before the step accordions. Include only when the reader needs background on tooling or architecture before the steps make sense. Title should reflect the specific challenge; avoid generic phrases. |
+| `steps` | `SolutionStep[]` | One step per challenge objective. Max two takeaways per step. |
+| `furtherReading` | `Array<{ title, url }>` | Optional. Links shown in the sidebar "Further Reading" card. Deduplicate by URL before adding. |
+| `completeSolution` | `{ title, description, language, code }` | Optional. Final corrected config or runbook shown as a summary card. |
+| `outro` | `{ heading: string; html: string }` | Narrative close. End with a sentence that follows the adventure's story world, then a sentence inviting the reader to see how others solved it. The "Browse the discussion" link is rendered by the component automatically after the html. |
+
+### `SolutionBlock` union
+
+| `type` | Fields | Rendered as |
+| --- | --- | --- |
+| `text` | `html: string` | `.md-content` div with `dangerouslySetInnerHTML` |
+| `code` | `language, title?, code` | `.md-pre-group` with copy button and language label |
+| `image` | `src, alt, caption?` | `<figure>` with `<img>` and optional `<figcaption>` |
+| `callout` | `variant: tip, warning, or info; html` | Bordered box with icon and variant label |
+
+### Callout variants
+
+| Variant | Icon | Color |
+| --- | --- | --- |
+| `tip` | `Lightbulb` | Amber (`primary`) |
+| `warning` | `AlertTriangle` | Orange |
+| `info` | `Info` | Blue |
+
+### Images
+
+- Stored in `public/solutions/<adventure-id>/`.
+- File naming: `<level-id>-<descriptive-slug>.webp`.
+- Converted from source PNGs using `cwebp -q 85`.
+- Alt text: one sentence, direct description, no em dashes, no "screenshot of" filler.
+
+### Page layout
+
+The solution page uses a two-column layout: main article on the left, sticky sidebar on the right (collapses to a single column on mobile).
+
+- **Hero**: backstory quote (top band), then difficulty badge + "Solution" label, `h1` title, intro text, contributor pill (if present), topic tag pills.
+- **Sidebar**: "What Was Fixed" step nav, "Solve Along" Codespaces card (if `codespacesUrl` present), challenge back-link, discussion link, "Further Reading" card (from `solution.furtherReading`).
+- **Main column**: spoiler warning, context section (always-open, no toggle), step accordions (first step open by default), complete solution toggle, outro card.
+
+### Adding a new solution
+
+Use the `/add-solution` command. It handles image conversion, TypeScript authoring, and generator patching automatically.