diff --git a/labs/assets/infinity-panel-crop-transparent.png b/labs/assets/infinity-panel-crop-transparent.png
new file mode 100644
index 0000000..7aeee4c
Binary files /dev/null and b/labs/assets/infinity-panel-crop-transparent.png differ
diff --git a/labs/assets/inifinity-panel-crop-dark.png b/labs/assets/inifinity-panel-crop-dark.png
new file mode 100644
index 0000000..e455d0b
Binary files /dev/null and b/labs/assets/inifinity-panel-crop-dark.png differ
diff --git a/labs/assets/ms-power-platform-logo-stacked-gray-rgb.png b/labs/assets/ms-power-platform-logo-stacked-gray-rgb.png
new file mode 100644
index 0000000..1269bb0
Binary files /dev/null and b/labs/assets/ms-power-platform-logo-stacked-gray-rgb.png differ
diff --git a/labs/assets/power-cat-dark.png b/labs/assets/power-cat-dark.png
new file mode 100644
index 0000000..90d9e11
Binary files /dev/null and b/labs/assets/power-cat-dark.png differ
diff --git a/labs/assets/power-cat-light.png b/labs/assets/power-cat-light.png
new file mode 100644
index 0000000..92fc2f7
Binary files /dev/null and b/labs/assets/power-cat-light.png differ
diff --git a/labs/assets/power-platform-logo.png b/labs/assets/power-platform-logo.png
new file mode 100644
index 0000000..382e829
Binary files /dev/null and b/labs/assets/power-platform-logo.png differ
diff --git a/labs/index.html b/labs/index.html
index e73ef03..320b506 100644
--- a/labs/index.html
+++ b/labs/index.html
@@ -4,7 +4,18 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Power Series hands-on Power Platform labs curated by Power CAT.">
+  <link rel="icon" href="assets/power-platform-logo.png">
   <title>Power Series Labs</title>
+  <script>
+    (() => {
+      const param = new URLSearchParams(window.location.search).get("theme");
+      const stored = localStorage.getItem("powerSeriesTheme");
+      const theme = ["light", "dark"].includes(param)
+        ? param
+        : (["light", "dark"].includes(stored) ? stored : "light");
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
   <style>
     :root {
       color-scheme: light;
@@ -12,6 +23,7 @@
       --ps-bg-elevated: #f3ecfa;
       --ps-surface: #ffffff;
       --ps-surface-soft: #f1e9f7;
+      --ps-card-bg: var(--ps-surface);
       --ps-border: #ded0ec;
       --ps-border-strong: #8d57ad;
       --ps-text: #22182f;
@@ -29,6 +41,30 @@
       --ps-green: #107c10;
       --ps-danger: #b3261e;
     }
+    html[data-theme="dark"] {
+      color-scheme: dark;
+      --ps-bg: #0c1430;
+      --ps-bg-elevated: #111b3d;
+      --ps-surface: #162245;
+      --ps-surface-soft: #1e2c54;
+      --ps-card-bg: var(--ps-surface);
+      --ps-border: #2f4069;
+      --ps-border-strong: #6175a5;
+      --ps-text: #f5f7ff;
+      --ps-text-muted: #aebbd7;
+      --ps-text-soft: #c9d2e7;
+      --ps-accent: #55b7ff;
+      --ps-accent-hover: #7ac6ff;
+      --ps-accent-soft: rgba(85, 183, 255, 0.14);
+      --ps-accent-fg: #08112b;
+      --ps-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+      --ps-blue: #55b7ff;
+      --ps-purple: #aebbd7;
+      --ps-pink: #f871c5;
+      --ps-orange: #fbbf24;
+      --ps-green: #4ade80;
+      --ps-danger: #f87171;
+    }
     * { box-sizing: border-box; }
     html { scroll-behavior: smooth; }
     body {
@@ -50,7 +86,7 @@
       align-items: center;
       gap: 28px;
       padding: 0 5vw;
-      background: rgba(255, 255, 255, 0.96);
+      background: color-mix(in srgb, var(--ps-surface) 96%, transparent);
       border-bottom: 1px solid var(--ps-border);
       box-shadow: 0 4px 18px rgba(42, 68, 111, 0.06);
     }
@@ -62,6 +98,11 @@
       font-size: 17px;
       font-weight: 600;
     }
+    .brand-logo {
+      width: 220px;
+      height: auto;
+      object-fit: contain;
+    }
     .brand strong { color: var(--ps-accent); font-weight: 750; }
     nav {
       justify-self: end;
@@ -75,13 +116,45 @@
       text-decoration: none;
     }
     nav a:hover { color: var(--ps-text); }
-    .power-cat {
+    .theme-switch {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      border: 1px solid var(--ps-border);
+      border-radius: 0.625rem;
+      background: var(--ps-surface);
+    }
+    .theme-choice {
+      min-height: 28px;
+      padding: 0 10px;
+      border: 0;
+      border-radius: 0.5rem;
+      background: transparent;
       color: var(--ps-text-muted);
       font-size: 12px;
-      font-weight: 750;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
+      font-weight: 650;
+    }
+    .theme-choice[aria-pressed="true"] {
+      background: var(--ps-accent);
+      color: var(--ps-accent-fg);
+    }
+    .power-cat-lockup {
+      justify-self: end;
+      display: block;
+      width: 118px;
+      height: 46px;
+    }
+    .power-cat-lockup img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: right center;
     }
+    .theme-dark-only { display: none !important; }
+    html[data-theme="dark"] .theme-light-only { display: none !important; }
+    html[data-theme="dark"] .theme-dark-only { display: block !important; }
     main { overflow: hidden; }
     .hero {
       min-height: 520px;
@@ -175,6 +248,64 @@
       gap: 10px;
       margin-top: 28px;
     }
+    .toolbox-panel {
+      position: relative;
+      width: 100%;
+      min-height: 440px;
+      margin: auto;
+      overflow: hidden;
+      padding: 0;
+      background: var(--ps-bg);
+      border-bottom: 1px solid var(--ps-border);
+    }
+    .toolbox-inner {
+      position: relative;
+      z-index: 1;
+      max-width: 1280px;
+      min-height: 440px;
+      margin: auto;
+      padding: 36px 5vw;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .toolbox-visual {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 58%;
+      height: 100%;
+      object-fit: contain;
+      object-position: 0 center;
+    }
+    html[data-theme="dark"] .toolbox-visual {
+      width: 58%;
+      object-fit: cover;
+      object-position: 42% center;
+      transform: scale(1.08);
+      transform-origin: left center;
+    }
+    .toolbox-copy {
+      width: 48%;
+      max-width: 560px;
+      padding: 0;
+    }
+    .toolbox-copy h2 {
+      max-width: 420px;
+      margin: 0;
+      color: var(--ps-text);
+      font-size: clamp(24px, 2.4vw, 36px);
+      line-height: 1.12;
+      letter-spacing: -0.02em;
+    }
+    .toolbox-copy p {
+      max-width: 430px;
+      margin: 24px 0 0;
+      color: var(--ps-text-muted);
+      font-size: clamp(15px, 1.2vw, 18px);
+      line-height: 1.5;
+    }
     .section {
       max-width: none;
       margin: auto;
@@ -220,6 +351,7 @@
     }
     .need-card,
     .lab-card {
+      display: block;
       min-height: 190px;
       padding: 22px;
       text-align: left;
@@ -232,8 +364,7 @@
       box-shadow: 0 8px 24px rgba(42, 68, 111, 0.06);
       transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
     }
-    button.need-card,
-    button.lab-card {
+    button.need-card {
       width: 100%;
       cursor: pointer;
     }
@@ -274,37 +405,54 @@
       gap: 48px;
       margin-bottom: 24px;
     }
-    .catalog-controls {
+    .catalog-browser {
       display: grid;
-      grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto;
-      gap: 12px;
-      align-items: end;
-      margin-bottom: 18px;
+      grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
+      gap: 24px;
+      align-items: start;
     }
-    .control label {
-      display: block;
-      margin-bottom: 6px;
-      color: var(--ps-text-muted);
-      font-size: 12px;
-      font-weight: 750;
-      text-transform: uppercase;
+    .market-tabs {
+      display: grid;
+      gap: 10px;
+      position: sticky;
+      top: 96px;
     }
-    .control input,
-    .control select,
-    .clear-button {
-      width: 100%;
-      min-height: 44px;
+    .market-tab {
+      min-height: 54px;
+      padding: 10px 18px;
       border: 1px solid var(--ps-border);
+      border-left: 4px solid transparent;
       border-radius: 0.625rem;
       background: var(--ps-surface);
-      color: var(--ps-text);
-      padding: 0 12px;
+      color: var(--ps-text-muted);
+      font-size: 14px;
+      font-weight: 700;
+      text-align: left;
+      box-shadow: 0 8px 24px rgba(42, 68, 111, 0.05);
+      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+    }
+    .market-tab:hover {
+      transform: translateX(3px);
+      border-color: var(--ps-accent);
+      color: var(--ps-accent);
+      box-shadow: var(--ps-shadow);
+    }
+    .market-tab[aria-pressed="true"] {
+      background: var(--ps-accent-soft);
+      border-color: var(--ps-accent);
+      border-left-color: var(--ps-accent);
+      color: var(--ps-accent);
     }
-    .clear-button {
-      width: auto;
-      padding: 0 16px;
+    .skill-results { min-width: 0; }
+    .skill-results-title {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: center;
+      margin-bottom: 16px;
       color: var(--ps-text-muted);
-      font-weight: 650;
+      font-size: 14px;
+      font-weight: 700;
     }
     .result-count {
       color: var(--ps-text-muted);
@@ -316,6 +464,15 @@
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap: 16px;
     }
+    .empty-catalog-message {
+      grid-column: 1 / -1;
+      padding: 24px;
+      background: var(--ps-surface);
+      border: 1px solid var(--ps-border);
+      border-radius: 12px;
+      color: var(--ps-text-muted);
+      text-align: center;
+    }
     .lab-card {
       display: flex;
       flex-direction: column;
@@ -348,134 +505,135 @@
       color: var(--ps-accent);
     }
     .lab-link {
-      margin-top: auto;
-      padding-top: 14px;
+      border: 0;
+      background: transparent;
+      padding: 0;
       color: var(--ps-accent);
       font-size: 13px;
       font-weight: 700;
+      text-align: left;
     }
-    .reader {
-      display: none;
-      background: var(--ps-surface);
-      border-top: 1px solid var(--ps-border);
-    }
-    .reader[data-open="true"] { display: block; }
-    .reader-shell {
-      max-width: 1180px;
-      margin: 0 auto;
-      padding: 64px 5vw 88px;
-    }
-    .reader-header {
-      display: flex;
-      justify-content: space-between;
-      gap: 24px;
-      align-items: start;
-      margin-bottom: 24px;
-    }
-    .reader-header h2 {
-      margin: 0;
-      font-size: clamp(30px, 4vw, 48px);
-      line-height: 1.05;
+    .deck-link {
+      color: var(--ps-text-muted);
+      font-size: 13px;
+      font-weight: 700;
+      text-decoration: none;
     }
-    .reader-actions {
+    .deck-link:hover { color: var(--ps-accent); }
+    .lab-actions {
       display: flex;
-      gap: 10px;
       flex-wrap: wrap;
-      justify-content: flex-end;
-    }
-    .markdown {
-      max-width: 940px;
-      color: var(--ps-text);
-      font-size: 16px;
-      line-height: 1.65;
-    }
-    .markdown h1,
-    .markdown h2,
-    .markdown h3 {
-      color: var(--ps-text);
-      line-height: 1.15;
-    }
-    .markdown h1 { font-size: 40px; }
-    .markdown h2 {
-      margin-top: 42px;
-      padding-top: 8px;
-      border-top: 1px solid var(--ps-border);
-      font-size: 30px;
-    }
-    .markdown h3 { margin-top: 28px; font-size: 22px; }
-    .markdown p,
-    .markdown li { color: var(--ps-text-muted); }
-    .markdown table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 18px 0;
-      font-size: 14px;
-    }
-    .markdown th,
-    .markdown td {
-      padding: 10px 12px;
-      border: 1px solid var(--ps-border);
-      text-align: left;
-      vertical-align: top;
-    }
-    .markdown th { background: var(--ps-surface-soft); color: var(--ps-text); }
-    .markdown code,
-    .markdown pre {
-      border-radius: 0.625rem;
-      background: var(--ps-surface-soft);
-    }
-    .markdown code { padding: 2px 5px; }
-    .markdown pre {
-      overflow: auto;
-      padding: 16px;
-    }
-    .markdown img {
-      max-width: 100%;
-      border: 1px solid var(--ps-border);
-      border-radius: 0.625rem;
-      box-shadow: 0 8px 24px rgba(42, 68, 111, 0.06);
+      gap: 14px;
+      margin-top: auto;
+      padding-top: 14px;
     }
     .site-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
       padding: 28px 5vw;
       color: var(--ps-text-muted);
       border-top: 1px solid var(--ps-border);
-      text-align: center;
       font-size: 13px;
     }
+    .microsoft-brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--ps-text);
+      font-weight: 600;
+    }
+    .microsoft-mark {
+      display: grid;
+      grid-template-columns: repeat(2, 10px);
+      grid-template-rows: repeat(2, 10px);
+      gap: 2px;
+      width: 22px;
+      height: 22px;
+    }
+    .microsoft-mark i:nth-child(1) { background: #f25022; }
+    .microsoft-mark i:nth-child(2) { background: #7fba00; }
+    .microsoft-mark i:nth-child(3) { background: #00a4ef; }
+    .microsoft-mark i:nth-child(4) { background: #ffb900; }
     @media (max-width: 760px) {
       .site-header,
       .section-heading,
-      .catalog-heading,
-      .reader-header {
+      .catalog-heading {
         display: block;
       }
-      nav { justify-content: start; margin-top: 12px; }
+      nav { justify-content: start; margin-top: 12px; flex-wrap: wrap; }
+      .power-cat-lockup { margin-top: 12px; }
       .hero h1 { align-items: flex-start; font-size: 42px; }
-      .catalog-controls { grid-template-columns: 1fr; }
-      .reader-actions { justify-content: flex-start; margin-top: 16px; }
+      .catalog-browser { grid-template-columns: 1fr; }
+      .toolbox-panel { min-height: 760px; }
+      .toolbox-inner {
+        min-height: auto;
+        padding-top: 56px;
+        padding-bottom: 430px;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+      .toolbox-visual {
+        top: 300px;
+        width: 100%;
+        height: 430px;
+        object-position: 35% center;
+      }
+      .toolbox-copy {
+        width: 100%;
+        padding: 0;
+      }
+      .market-tabs {
+        position: static;
+        display: flex;
+        overflow-x: auto;
+        padding-bottom: 4px;
+      }
+      .market-tab { flex: 0 0 min(280px, 78vw); }
+      .site-footer { align-items: flex-start; flex-direction: column; }
     }
   </style>
 </head>
 <body>
   <header class="site-header">
-    <a class="brand" href="./index.html" aria-label="Power Series Labs home">Power Platform <strong>Power Series</strong></a>
+    <a class="brand" href="./index.html" aria-label="Power Series Labs home">
+      <img class="brand-logo" src="assets/ms-power-platform-logo-stacked-gray-rgb.png" alt="Microsoft Power Platform">
+    </a>
     <nav aria-label="Primary navigation">
       <a href="#needs">Business needs</a>
       <a href="#labs">Labs</a>
       <a href="../README.md">Repository</a>
+      <div class="theme-switch" role="group" aria-label="Theme">
+        <button class="theme-choice" type="button" data-theme-choice="light" aria-pressed="false">Light</button>
+        <button class="theme-choice" type="button" data-theme-choice="dark" aria-pressed="false">Dark</button>
+      </div>
     </nav>
-    <div class="power-cat">Power CAT</div>
+    <div class="power-cat-lockup">
+      <img class="theme-light-only" src="assets/power-cat-dark.png" alt="Power CAT">
+      <img class="theme-dark-only" src="assets/power-cat-light.png" alt="Power CAT">
+    </div>
   </header>
 
   <main id="top">
     <section class="hero" aria-labelledby="hero-title">
-      <h1 id="hero-title"><span class="series-mark" aria-hidden="true"><i></i><i></i><i></i></span>Let your business need shape the solution.</h1>
+      <h1 id="hero-title"><span class="series-mark" aria-hidden="true"><i></i><i></i><i></i></span>Power Series</h1>
       <p class="catalog-line"><span>Learn Faster.</span> <span>Build Smarter.</span> <span>Apply with Confidence.</span></p>
-      <h2>Hands-on Power Platform labs curated by Power CAT.</h2>
-      <p class="hero-copy">Explore how Power Platform can help you build applications, automate work, manage business data, and create intelligent experiences. Start with the business need, then choose the guided lab that helps you build the right solution.</p>
+      <h2>Let your business need shape the solution.</h2>
+      <p class="hero-copy">Get hands-on with Power Platform and learn to design the right solution for any business process. Run a track end to end, or choose the modules that fit your scenario, audience and skill level.</p>
       <div class="hero-actions">
         <a class="primary-action" href="#needs">Explore labs <span aria-hidden="true">↓</span></a>
-        <a class="secondary-action" href="https://vibehub.microsoft.com/app/ravi-chada-b91pg1">Get Solution Guidance <span aria-hidden="true">↗</span></a>
+      </div>
+    </section>
+
+    <section class="toolbox-panel" aria-label="Power Platform toolbox">
+      <div class="toolbox-inner">
+        <img class="toolbox-visual theme-light-only" src="assets/infinity-panel-crop-transparent.png" alt="">
+        <img class="toolbox-visual theme-dark-only" src="assets/inifinity-panel-crop-dark.png" alt="">
+        <div class="toolbox-copy">
+          <h2>One toolbox. So you have the right tool, every time.</h2>
+          <p>Power Platform brings apps, automation, agents and data together in one governed toolbox. Each tool has a distinct role, and together they adapt to your context and constraints to meet the needs of every audience and level of complexity.</p>
+        </div>
       </div>
     </section>
 
@@ -485,7 +643,7 @@ <h2>Hands-on Power Platform labs curated by Power CAT.</h2>
           <p class="eyebrow">Start with the outcome</p>
           <h2 id="needs-title">What do you need to accomplish?</h2>
         </div>
-        <p>Labs can support more than one business need. Choose a path to see the relevant catalog, then open a lab to read it in-page.</p>
+        <p>Labs can support more than one business need. Choose a path to see the relevant catalog, then open a lab in a fully rendered page.</p>
       </div>
       <div class="needs-grid" id="need-grid" aria-label="Filter labs by business need"></div>
     </section>
@@ -498,102 +656,276 @@ <h1 id="labs-title">Available labs</h1>
         </div>
         <p class="result-count" id="result-count"></p>
       </div>
-      <div class="catalog-controls">
-        <div class="control">
-          <label for="search">Search labs</label>
-          <input id="search" type="search" placeholder="Search by title, tag, or description">
-        </div>
-        <div class="control">
-          <label for="capability">Capability</label>
-          <select id="capability">
-            <option value="all">All capabilities</option>
-            <option value="apps">Apps</option>
-            <option value="automation">Automation</option>
-            <option value="agents">Agents</option>
-            <option value="data">Data</option>
-            <option value="governance">Governance</option>
-          </select>
-        </div>
-        <button class="clear-button" type="button" id="clear">Clear filters</button>
-      </div>
-      <div class="lab-grid" id="lab-grid" aria-live="polite"></div>
-    </section>
-
-    <section class="reader" id="reader" aria-labelledby="reader-title">
-      <div class="reader-shell">
-        <div class="reader-header">
-          <div>
-            <p class="eyebrow">Lab detail</p>
-            <h2 id="reader-title">Select a lab</h2>
-          </div>
-          <div class="reader-actions">
-            <a class="secondary-action" id="raw-link" href="#" target="_blank" rel="noopener">Open markdown <span aria-hidden="true">↗</span></a>
-            <button class="primary-action" type="button" id="close-reader">Back to catalog</button>
+      <div class="catalog-browser">
+        <div class="market-tabs" id="market-tabs" aria-label="Filter labs by business need"></div>
+        <div class="skill-results">
+          <div class="skill-results-title">
+            <span id="skill-results-label">All Power Series labs</span>
+            <span id="skill-results-count"></span>
           </div>
+          <div class="lab-grid" id="lab-grid" aria-live="polite"></div>
         </div>
-        <article class="markdown" id="markdown"></article>
       </div>
     </section>
+
   </main>
 
-  <footer class="site-footer">Power CAT · Power Series Labs · microsoft/apps-agents-workshop</footer>
+  <footer class="site-footer">
+    <div class="microsoft-brand"><span class="microsoft-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Microsoft</div>
+    <div>Power CAT · Power Series Labs · microsoft/apps-agents-workshop</div>
+  </footer>
 
   <script>
-    const needs = [
+    const knownNeeds = [
       { id: "digitize-internal-operations", title: "Digitize internal operations", description: "Replace manual work with focused apps and connected data." },
       { id: "automate-workflows-and-processes", title: "Automate workflows and processes", description: "Reduce repetitive work with automation, approvals, RPA, and agent workflows." },
       { id: "improve-customer-interactions", title: "Improve customer interactions", description: "Create secure app and portal experiences for customers, partners, and communities." },
       { id: "modernize-existing-applications", title: "Modernize existing applications", description: "Evolve legacy solutions with modern apps, automation, and AI." },
       { id: "strengthen-governance-and-security", title: "Strengthen governance and security", description: "Apply guardrails, visibility, and control across the platform." },
-      { id: "solution-guidance", title: "Explore Solution Guidance", description: "Move from a business requirement to a suitable Power Platform architecture." }
+      { id: "skills-marketplace", title: "Explore Skills Marketplace", description: "Find Power CAT skills for assessment, design, migration, review, and documentation.", url: "https://microsoft.github.io/power-cat-skills/power-platform-migration-factory/index.html#tracks" }
     ];
 
-    const labs = [
-      { title: "Workshop prerequisites", path: "prereqs.md", level: "Start", duration: "Setup", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Prepare the environment, sample data, and tooling used across the Power Series labs." },
-      { title: "Automation foundations", path: "automations-foundation/README.md", level: "100", duration: "Module", capability: "automation", tags: ["automate-workflows-and-processes"], description: "Automate the Northwind order lifecycle across cloud flows, RPA, agent workflows, and computer use." },
-      { title: "Module 1: Cloud Flow", path: "automations-foundation/01-cloud-flow.md", level: "100", duration: "Lab", capability: "automation", tags: ["automate-workflows-and-processes"], description: "Build a cloud flow that routes new orders through approvals and creates invoices in Dataverse." },
-      { title: "Module 2: RPA", path: "automations-foundation/02-rpa.md", level: "100", duration: "Lab", capability: "automation", tags: ["automate-workflows-and-processes", "modernize-existing-applications"], description: "Use Power Automate for desktop to bridge legacy order files into the governed process." },
-      { title: "Module 3: Workflows", path: "automations-foundation/03-workflow.md", level: "100", duration: "Lab", capability: "agents", tags: ["automate-workflows-and-processes"], description: "Build deterministic workflows that agents can call safely during a conversation." },
-      { title: "Module 4: Computer Use Agent", path: "automations-foundation/04-cua.md", level: "100", duration: "Lab", capability: "agents", tags: ["automate-workflows-and-processes"], description: "Use computer use when no connector or API is available." },
-      { title: "Building code first apps in Power Platform", path: "byoc-powerapps/byoc-powerapps.md", level: "200", duration: "40 minutes", capability: "apps", tags: ["digitize-internal-operations", "modernize-existing-applications"], description: "Build a code app that connects to Dataverse and supports supplier onboarding." },
-      { title: "Building Power Pages experiences", path: "byoc-powerpages/byoc-powerpages.md", level: "200", duration: "Lab", capability: "apps", tags: ["improve-customer-interactions", "modernize-existing-applications"], description: "Create external-facing experiences with Power Pages." },
-      { title: "Canvas Apps and Dataverse MCP", path: "canvas-apps-dataverse-mcp/canvas-apps-and-dataverse-mcp.md", level: "200", duration: "Lab", capability: "apps", tags: ["digitize-internal-operations"], description: "Use MCP-backed tools while building canvas apps and Dataverse solutions." },
-      { title: "Dataverse business skills", path: "dataverse-business-skills/dataverse-business-skills.md", level: "200", duration: "Lab", capability: "data", tags: ["digitize-internal-operations", "modernize-existing-applications"], description: "Center app development on governed business data and reusable skills." },
-      { title: "Generative pages with GitHub Copilot", path: "generative-pages/generative-pages-github-copilot.md", level: "200", duration: "Lab", capability: "apps", tags: ["digitize-internal-operations", "modernize-existing-applications"], description: "Use Copilot-assisted development to create generative Power Platform pages." },
-      { title: "In-app agents", path: "in-app-agents/in-app-agents.md", level: "100", duration: "30 minutes", capability: "agents", tags: ["modernize-existing-applications"], description: "Bring natural-language queries, generated charts, form fill, and summaries into model-driven apps." },
-      { title: "Managed governance: environment strategy", path: "managed-platform/managed-governance/environment-strategy-and-governance/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Configure managed environments, policies, sharing limits, maker welcome, routing, and pipelines." },
-      { title: "Managed governance: inventory and monitoring", path: "managed-platform/managed-governance/inventory-and-monitoring/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Review inventory, usage, logs, alerts, and monitoring across Power Platform assets." },
-      { title: "Managed security", path: "managed-platform/managed-security/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Explore managed security controls for enterprise Power Platform environments." },
-      { title: "IP firewall", path: "managed-platform/managed-security/ip-firewall/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Configure and validate IP firewall behavior for end users." },
-      { title: "IP cookie binding", path: "managed-platform/managed-security/ip-cookie-binding/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Enable IP cookie binding and understand the user experience." },
-      { title: "Customer-managed keys", path: "managed-platform/managed-security/cmk/README.md", level: "200", duration: "Module", capability: "governance", tags: ["strengthen-governance-and-security"], description: "Prepare Key Vault, create enterprise policy, grant access, and apply policy to an environment." },
-      { title: "MCP apps", path: "mcp-apps/mcp-apps.md", level: "200", duration: "Lab", capability: "agents", tags: ["digitize-internal-operations", "modernize-existing-applications"], description: "Enable richer app-building workflows with MCP-connected app development." },
-      { title: "Power Apps MCP server agents and agent feed", path: "powerapps-mcp/power-apps-mcp-server-agents-and-agent-feed.md", level: "200", duration: "Lab", capability: "agents", tags: ["modernize-existing-applications"], description: "Use Power Apps MCP server capabilities with agents and agent feed." }
+    const fallbackLabTags = {
+      "automations-foundation/README.md": ["automate-workflows-and-processes"],
+      "managed-platform/managed-security/ip-firewall/README.md": ["strengthen-governance-and-security"],
+      "managed-platform/managed-security/ip-cookie-binding/README.md": ["strengthen-governance-and-security"],
+      "managed-platform/managed-security/cmk/README.md": ["strengthen-governance-and-security"]
+    };
+
+    const fallbackLabSources = [
+      { path: "prereqs.md" },
+      { path: "automations-foundation/README.md" },
+      { path: "automations-foundation/01-cloud-flow.md", deck: "automations-foundation/01-Power Series - Automation Foundation_Cloud Flows.pptx" },
+      { path: "automations-foundation/02-rpa.md", deck: "automations-foundation/02-Power Series - Automation Foundation_RPA.pptx" },
+      { path: "automations-foundation/03-workflow.md", deck: "automations-foundation/03-Power Series - Automation Foundation_Workflows.pptx" },
+      { path: "automations-foundation/04-cua.md", deck: "automations-foundation/04-Power Series - Automation Foundation_CUA.pptx" },
+      { path: "byoc-powerapps/byoc-powerapps.md", deck: "byoc-powerapps/Power Series - Code apps.pptx" },
+      { path: "byoc-powerpages/byoc-powerpages.md", deck: "byoc-powerpages/Power Series - BYOC Power Pages.pptx" },
+      { path: "canvas-apps-dataverse-mcp/canvas-apps-and-dataverse-mcp.md", deck: "canvas-apps-dataverse-mcp/Power Series - Canvas Apps & Dataverse MCP.pptx" },
+      { path: "dataverse-business-skills/dataverse-business-skills.md" },
+      { path: "generative-pages/generative-pages-github-copilot.md", deck: "generative-pages/Power Series - Generative Pages.pptx" },
+      { path: "in-app-agents/in-app-agents.md", deck: "in-app-agents/Power Series - In-app agents.pptx" },
+      { path: "managed-platform/managed-governance/environment-strategy-and-governance/README.md" },
+      { path: "managed-platform/managed-governance/inventory-and-monitoring/README.md" },
+      { path: "managed-platform/managed-security/README.md" },
+      { path: "managed-platform/managed-security/ip-firewall/README.md" },
+      { path: "managed-platform/managed-security/ip-cookie-binding/README.md" },
+      { path: "managed-platform/managed-security/cmk/README.md" },
+      { path: "mcp-apps/mcp-apps.md", deck: "mcp-apps/Power Series - MCP Apps in Power Apps.pptx" },
+      { path: "powerapps-mcp/power-apps-mcp-server-agents-and-agent-feed.md", deck: "powerapps-mcp/Power Series - Power Apps MCP Server & Agent Feed.pptx" }
     ];
+    const repo = "microsoft/apps-agents-workshop";
+    const branch = new URLSearchParams(window.location.search).get("branch") || "main";
+    const discoveryRef = branch;
+    let labs = [];
+    let needs = knownNeeds;
 
     const needGrid = document.querySelector("#need-grid");
     const labGrid = document.querySelector("#lab-grid");
     const resultCount = document.querySelector("#result-count");
-    const search = document.querySelector("#search");
-    const capability = document.querySelector("#capability");
-    const clear = document.querySelector("#clear");
-    const reader = document.querySelector("#reader");
-    const readerTitle = document.querySelector("#reader-title");
-    const markdown = document.querySelector("#markdown");
-    const rawLink = document.querySelector("#raw-link");
-    const closeReader = document.querySelector("#close-reader");
+    const marketTabs = document.querySelector("#market-tabs");
+    const skillResultsLabel = document.querySelector("#skill-results-label");
+    const skillResultsCount = document.querySelector("#skill-results-count");
+    const themeChoices = document.querySelectorAll("[data-theme-choice]");
     let activeNeed = "all";
 
     function labelFromTag(tag) {
       return tag.split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
     }
 
+    function setTheme(theme) {
+      document.documentElement.setAttribute("data-theme", theme);
+      localStorage.setItem("powerSeriesTheme", theme);
+      themeChoices.forEach(button => {
+        button.setAttribute("aria-pressed", String(button.dataset.themeChoice === theme));
+      });
+    }
+
+    function parseFrontMatter(source) {
+      const match = source.match(/^---\s*([\s\S]*?)\s*---/);
+      if (!match) return null;
+      const fields = {};
+      match[1].split(/\r?\n/).forEach(line => {
+        const item = line.match(/^([A-Za-z_]+):\s*(.*)$/);
+        if (!item) return;
+        const key = item[1];
+        let value = item[2].trim();
+        if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+          value = value.slice(1, -1);
+        }
+        if (value.startsWith("[") && value.endsWith("]")) {
+          value = value.slice(1, -1).split(",").map(part => part.trim().replace(/^["']|["']$/g, "")).filter(Boolean);
+        }
+        fields[key] = value;
+      });
+      return fields;
+    }
+
+    function hasRequiredFrontMatter(metadata) {
+      return ["title", "level", "description", "persona", "tags"].every(field => metadata?.[field]) && (metadata.estimated_duration || metadata.duration);
+    }
+
+    function deriveFallbackDescription(content) {
+      return content
+        .replace(/^---[\s\S]*?---\s*/, "")
+        .split(/\r?\n/)
+        .map(line => line.trim())
+        .find(line => line
+          && !line.startsWith("#")
+          && !line.startsWith("<!--")
+          && !line.startsWith("-->")
+          && !/^built by:/i.test(line));
+    }
+
+    function dirname(path) {
+      return path.split("/").slice(0, -1).join("/");
+    }
+
+    function basename(path) {
+      return path.split("/").pop();
+    }
+
+    function contentUrl(path) {
+      if (["localhost", "127.0.0.1"].includes(window.location.hostname)) return path;
+      const encodedBranch = encodeURIComponent(branch);
+      const encodedPath = path.split("/").map(encodeURIComponent).join("/");
+      return `https://raw.githubusercontent.com/${repo}/${encodedBranch}/labs/${encodedPath}`;
+    }
+
+    function bestDeckForLab(path, decks) {
+      const folder = dirname(path);
+      const folderDecks = decks.filter(deck => dirname(deck) === folder).sort((a, b) => a.localeCompare(b));
+      if (folderDecks.length <= 1) return folderDecks[0];
+      const prefix = basename(path).match(/^\d+/)?.[0];
+      if (prefix) {
+        const matchingPrefix = folderDecks.find(deck => basename(deck).match(/^\d+/)?.[0] === prefix);
+        if (matchingPrefix) return matchingPrefix;
+      }
+      return undefined;
+    }
+
+    async function discoverLabSources() {
+      const localPreview = ["localhost", "127.0.0.1"].includes(window.location.hostname);
+      if (localPreview) return fallbackLabSources;
+
+      try {
+        const encodedDiscoveryRef = encodeURIComponent(discoveryRef);
+        const commitResponse = await fetch(`https://api.github.com/repos/${repo}/commits/${encodedDiscoveryRef}`);
+        if (!commitResponse.ok) return fallbackLabSources;
+
+        const commitData = await commitResponse.json();
+        const treeSha = commitData?.commit?.tree?.sha;
+        if (!treeSha) return fallbackLabSources;
+
+        const response = await fetch(`https://api.github.com/repos/${repo}/git/trees/${treeSha}?recursive=1`);
+        if (!response.ok) return fallbackLabSources;
+
+        const data = await response.json();
+        const files = data.tree
+          .filter(item => item.type === "blob" && item.path.startsWith("labs/"))
+          .map(item => item.path.replace(/^labs\//, ""));
+        const markdownFiles = files.filter(path =>
+          /\.md$/i.test(path) && (path.split("/").length <= 2 || basename(path).toLowerCase() === "readme.md")
+        );
+        const decks = files.filter(path => /\.pptx?$/i.test(path));
+        return markdownFiles.map(path => ({ path, deck: bestDeckForLab(path, decks) }));
+      } catch {
+        return fallbackLabSources;
+      }
+    }
+
+    function buildNeedsFromLabs() {
+      const knownById = new Map(knownNeeds.map(need => [need.id, need]));
+      const tagIds = [...new Set(labs.flatMap(lab => lab.tags))].sort((a, b) => labelFromTag(a).localeCompare(labelFromTag(b)));
+      needs = tagIds.map(id => knownById.get(id) || {
+        id,
+        title: labelFromTag(id),
+        description: `Explore labs tagged ${labelFromTag(id)}.`
+      });
+      needs.push(...knownNeeds.filter(need => need.url));
+    }
+
+    async function loadCatalogMetadata() {
+      const sources = await discoverLabSources();
+      const entries = await Promise.all(sources.map(async source => {
+        try {
+          const response = await fetch(contentUrl(source.path));
+          if (!response.ok) return null;
+          const content = await response.text();
+          const metadata = parseFrontMatter(content) || {};
+          const heading = content.match(/^#\s+(.+)$/m)?.[1]?.trim();
+          const description = deriveFallbackDescription(content);
+          if (!hasRequiredFrontMatter(metadata) && !heading) return null;
+          if (!hasRequiredFrontMatter(metadata)) {
+            metadata.title = heading;
+            metadata.level = "—";
+            metadata.duration = "Self-paced";
+            metadata.persona = "All learners";
+            metadata.tags = fallbackLabTags[source.path] || [];
+            metadata.description = description || "Explore this workshop resource.";
+          }
+          return {
+            title: metadata.title,
+            path: source.path,
+            level: String(metadata.level),
+            duration: metadata.estimated_duration || metadata.duration,
+            persona: metadata.persona,
+            tags: Array.isArray(metadata.tags) ? metadata.tags : [],
+            description: metadata.description,
+            deck: source.deck
+          };
+        } catch {
+          return null;
+        }
+      }));
+      labs = entries.filter(Boolean);
+      buildNeedsFromLabs();
+    }
+
+    function catalogFilters() {
+      return [
+        { id: "all", title: "All" },
+        ...needs.filter(need => !need.url)
+      ];
+    }
+
+    function renderCatalogTabs() {
+      const previousFocus = document.activeElement instanceof HTMLElement && document.activeElement.matches("[data-need]")
+        ? document.activeElement.dataset.need
+        : null;
+      marketTabs.innerHTML = catalogFilters().map(filter => `
+        <button class="market-tab" type="button" data-need="${escapeHtml(String(filter.id))}" aria-pressed="${activeNeed === filter.id}">
+          ${escapeHtml(String(filter.title))}
+        </button>
+      `).join("");
+      const activeButton = [...marketTabs.querySelectorAll("[data-need]")].find(button => button.dataset.need === activeNeed);
+      if (activeButton && previousFocus === activeNeed) {
+        activeButton.focus();
+      }
+      marketTabs.querySelectorAll("[data-need]").forEach(button => {
+        button.addEventListener("click", () => {
+          activeNeed = button.dataset.need;
+          renderNeeds();
+          renderCatalogTabs();
+          renderLabs();
+          [...marketTabs.querySelectorAll("[data-need]")]
+            .find(tab => tab.dataset.need === activeNeed)?.focus();
+        });
+      });
+    }
+
     function renderNeeds() {
-      needGrid.innerHTML = needs.map(need => `
-        <button class="need-card" type="button" data-need="${need.id}" aria-pressed="${activeNeed === need.id}">
-          <strong>${need.title}</strong>
-          <span>${need.description}</span>
-          <small>${need.id === "solution-guidance" ? "Open guidance" : "Explore labs"}</small>
+      needGrid.innerHTML = needs.map(need => need.url ? `
+        <a class="need-card" href="${escapeHtml(encodeURI(String(need.url)))}" target="_blank" rel="noopener" aria-label="${escapeHtml(String(need.title))} - Open marketplace (opens in a new tab)">
+          <strong>${escapeHtml(String(need.title))}</strong>
+          <span>${escapeHtml(String(need.description))}</span>
+          <small>Open marketplace</small>
+        </a>
+      ` : `
+        <button class="need-card" type="button" data-need="${escapeHtml(String(need.id))}" aria-pressed="${activeNeed === need.id}">
+          <strong>${escapeHtml(String(need.title))}</strong>
+          <span>${escapeHtml(String(need.description))}</span>
+          <small>Explore labs</small>
         </button>
       `).join("");
       needGrid.querySelectorAll("[data-need]").forEach(button => {
@@ -601,6 +933,7 @@ <h2 id="reader-title">Select a lab</h2>
           const selected = button.dataset.need;
           activeNeed = activeNeed === selected ? "all" : selected;
           renderNeeds();
+          renderCatalogTabs();
           renderLabs();
           document.querySelector("#labs").scrollIntoView({ behavior: "smooth", block: "start" });
         });
@@ -608,33 +941,48 @@ <h2 id="reader-title">Select a lab</h2>
     }
 
     function labMatches(lab) {
-      const text = `${lab.title} ${lab.description} ${lab.tags.join(" ")} ${lab.capability}`.toLowerCase();
-      const query = search.value.trim().toLowerCase();
-      const matchesSearch = !query || text.includes(query);
-      const matchesNeed = activeNeed === "all" || lab.tags.includes(activeNeed);
-      const matchesCapability = capability.value === "all" || lab.capability === capability.value;
-      return matchesSearch && matchesNeed && matchesCapability;
+      return activeNeed === "all" || lab.tags.includes(activeNeed);
     }
 
     function renderLabs() {
       const visible = labs.filter(labMatches);
       resultCount.textContent = `${visible.length} of ${labs.length} labs`;
+      const selectedFilter = catalogFilters().find(filter => filter.id === activeNeed);
+      skillResultsLabel.textContent = activeNeed === "all"
+        ? "All Power Series labs"
+        : (selectedFilter?.title ?? labelFromTag(activeNeed));
+      skillResultsCount.textContent = `${visible.length} ${visible.length === 1 ? "lab" : "labs"}`;
+      if (labs.length === 0) {
+        labGrid.innerHTML = `
+          <div class="empty-catalog-message" role="alert">
+            <p>Unable to load lab catalog metadata. Please check your network connection or selected branch and refresh the page.</p>
+          </div>
+        `;
+        return;
+      }
+      if (visible.length === 0) {
+        labGrid.innerHTML = `
+          <div class="empty-catalog-message">
+            <p>No labs match the selected filter.</p>
+          </div>
+        `;
+        return;
+      }
       labGrid.innerHTML = visible.map(lab => `
-        <button class="lab-card" type="button" data-path="${lab.path}">
+        <article class="lab-card">
           <div class="lab-meta">
-            <span class="pill pill-accent">${lab.capability}</span>
-            <span class="pill">Level ${lab.level}</span>
-            <span class="pill">${lab.duration}</span>
+            <span class="pill pill-accent">${escapeHtml(String(lab.persona))}</span>
+            <span class="pill">Level ${escapeHtml(String(lab.level))}</span>
+            <span class="pill">${escapeHtml(String(lab.duration))}</span>
           </div>
-          <h3>${lab.title}</h3>
-          <p>${lab.description}</p>
-          <div class="tags">${lab.tags.map(tag => `<span class="pill">${labelFromTag(tag)}</span>`).join("")}</div>
-          <span class="lab-link">View lab details -></span>
-        </button>
+          <h3>${escapeHtml(String(lab.title))}</h3>
+          <p>${escapeHtml(String(lab.description))}</p>
+          <div class="lab-actions">
+            <a class="lab-link" href="lab.html?path=${encodeURIComponent(lab.path)}&branch=${encodeURIComponent(branch)}${lab.deck ? `&deck=${encodeURIComponent(lab.deck)}` : ""}" target="_blank" rel="noopener" aria-label="Open lab details for ${escapeHtml(String(lab.title))} (opens in a new tab)">Lab</a>
+            ${lab.deck ? `<a class="deck-link" href="${escapeHtml(contentUrl(lab.deck))}" target="_blank" rel="noopener" aria-label="Open presentation for ${escapeHtml(String(lab.title))} (opens in a new tab)">Presentation</a>` : ""}
+          </div>
+        </article>
       `).join("");
-      labGrid.querySelectorAll("[data-path]").forEach(button => {
-        button.addEventListener("click", () => openLab(button.dataset.path));
-      });
     }
 
     function escapeHtml(value) {
@@ -647,81 +995,21 @@ <h3>${lab.title}</h3>
       }[char]));
     }
 
-    function renderMarkdown(source, basePath) {
-      let text = source.replace(/^---[\s\S]*?---\s*/, "");
-      text = escapeHtml(text);
-      text = text.replace(/```([\s\S]*?)```/g, (_, code) => `<pre><code>${code.trim()}</code></pre>`);
-      text = text.replace(/^### (.*)$/gm, "<h3>$1</h3>");
-      text = text.replace(/^## (.*)$/gm, "<h2>$1</h2>");
-      text = text.replace(/^# (.*)$/gm, "<h1>$1</h1>");
-      text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => {
-        const resolved = src.startsWith("http") || src.startsWith("/") ? src : `${basePath}/${src}`;
-        return `<img src="${resolved}" alt="${alt}">`;
-      });
-      text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
-      text = text.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-      text = text.replace(/`([^`]+)`/g, "<code>$1</code>");
-      const blocks = text.split(/\n{2,}/).map(block => {
-        const trimmed = block.trim();
-        if (!trimmed) return "";
-        if (/^<h[1-3]|^<pre|^<img|^<table/.test(trimmed)) return trimmed;
-        if (/^\|/.test(trimmed)) return renderTable(trimmed);
-        if (/^[-*] /.test(trimmed)) {
-          return `<ul>${trimmed.split("\n").map(line => `<li>${line.replace(/^[-*] /, "")}</li>`).join("")}</ul>`;
-        }
-        if (/^\d+\. /.test(trimmed)) {
-          return `<ol>${trimmed.split("\n").map(line => `<li>${line.replace(/^\d+\. /, "")}</li>`).join("")}</ol>`;
-        }
-        return `<p>${trimmed.replace(/\n/g, "<br>")}</p>`;
-      });
-      return blocks.join("\n");
-    }
-
-    function renderTable(markdownTable) {
-      const rows = markdownTable.split("\n").filter(row => row.includes("|"));
-      const cleanRows = rows.filter(row => !/^\|\s*-/.test(row));
-      return `<table>${cleanRows.map((row, index) => {
-        const cells = row.replace(/^\||\|$/g, "").split("|").map(cell => cell.trim());
-        const tag = index === 0 ? "th" : "td";
-        return `<tr>${cells.map(cell => `<${tag}>${cell}</${tag}>`).join("")}</tr>`;
-      }).join("")}</table>`;
-    }
-
-    async function openLab(path) {
-      const lab = labs.find(item => item.path === path);
-      if (!lab) return;
-      reader.dataset.open = "true";
-      readerTitle.textContent = lab.title;
-      rawLink.href = path;
-      markdown.innerHTML = "<p>Loading lab content...</p>";
-      location.hash = "reader";
-      try {
-        const response = await fetch(path);
-        if (!response.ok) throw new Error(`Unable to load ${path}`);
-        const source = await response.text();
-        const basePath = path.split("/").slice(0, -1).join("/");
-        markdown.innerHTML = renderMarkdown(source, basePath || ".");
-      } catch (error) {
-        markdown.innerHTML = `<p>${escapeHtml(error.message)}. Open the markdown link above to view the lab source.</p>`;
-      }
-    }
+    setTheme(document.documentElement.getAttribute("data-theme") || "light");
+    themeChoices.forEach(button => button.addEventListener("click", () => setTheme(button.dataset.themeChoice)));
 
-    closeReader.addEventListener("click", () => {
-      reader.dataset.open = "false";
-      document.querySelector("#labs").scrollIntoView({ behavior: "smooth", block: "start" });
-    });
-    search.addEventListener("input", renderLabs);
-    capability.addEventListener("change", renderLabs);
-    clear.addEventListener("click", () => {
-      search.value = "";
-      capability.value = "all";
-      activeNeed = "all";
+    loadCatalogMetadata().then(() => {
+      renderCatalogTabs();
       renderNeeds();
       renderLabs();
+    }).catch(error => {
+      resultCount.textContent = "0 labs";
+      labGrid.innerHTML = `
+        <div class="empty-catalog-message" role="alert">
+          <p>Failed to load catalog: ${escapeHtml((error && error.message) ? String(error.message) : "Unable to fetch lab catalog metadata.")}</p>
+        </div>
+      `;
     });
-
-    renderNeeds();
-    renderLabs();
   </script>
 </body>
 </html>
diff --git a/labs/lab.html b/labs/lab.html
new file mode 100644
index 0000000..4fb0d73
--- /dev/null
+++ b/labs/lab.html
@@ -0,0 +1,905 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Power Series rendered lab detail.">
+  <link rel="icon" href="assets/power-platform-logo.png">
+  <title>Power Series Lab</title>
+  <script>
+    (() => {
+      const param = new URLSearchParams(window.location.search).get("theme");
+      const stored = localStorage.getItem("powerSeriesTheme");
+      const theme = ["light", "dark"].includes(param)
+        ? param
+        : (["light", "dark"].includes(stored) ? stored : "light");
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
+  <style>
+    :root {
+      color-scheme: light;
+      --cp-bg: #fbf8ff;
+      --cp-bg-elevated: #f3ecfa;
+      --cp-surface: #ffffff;
+      --cp-surface-soft: #f1e9f7;
+      --cp-border: #ded0ec;
+      --cp-text: #22182f;
+      --cp-text-muted: #63596e;
+      --cp-accent: #6b3a8f;
+      --cp-accent-hover: #572876;
+      --cp-accent-soft: rgba(107, 58, 143, 0.14);
+      --cp-accent-fg: #ffffff;
+      --cp-link: #6b3a8f;
+      --cp-shadow: 0 18px 46px rgba(107, 58, 143, 0.22);
+      --cp-highlight: rgba(107, 58, 143, 0.16);
+    }
+    html[data-theme="dark"] {
+      color-scheme: dark;
+      --cp-bg: #0c1430;
+      --cp-bg-elevated: #111b3d;
+      --cp-surface: #162245;
+      --cp-surface-soft: #1e2c54;
+      --cp-border: #2f4069;
+      --cp-text: #f5f7ff;
+      --cp-text-muted: #aebbd7;
+      --cp-accent: #55b7ff;
+      --cp-accent-hover: #7ac6ff;
+      --cp-accent-soft: rgba(85, 183, 255, 0.14);
+      --cp-accent-fg: #08112b;
+      --cp-link: #7ac6ff;
+      --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
+      --cp-highlight: rgba(85, 183, 255, 0.12);
+    }
+    * { box-sizing: border-box; }
+    [hidden] { display: none !important; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      background: var(--cp-bg);
+      color: var(--cp-text);
+      font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+    a { color: inherit; }
+    .site-header {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      min-height: 72px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 28px;
+      padding: 0 5vw;
+      background: color-mix(in srgb, var(--cp-surface) 96%, transparent);
+      border-bottom: 1px solid var(--cp-border);
+      box-shadow: 0 4px 18px rgba(42, 68, 111, 0.06);
+    }
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      text-decoration: none;
+      font-size: 17px;
+      font-weight: 600;
+    }
+    .brand-logo {
+      width: 220px;
+      height: auto;
+      object-fit: contain;
+    }
+    nav {
+      justify-self: end;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+    nav a {
+      color: var(--cp-text-muted);
+      font-size: 14px;
+      text-decoration: none;
+    }
+    nav a:hover { color: var(--cp-text); }
+    .theme-switch {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      border: 1px solid var(--cp-border);
+      border-radius: 0.625rem;
+      background: var(--cp-surface);
+    }
+    .theme-choice {
+      min-height: 28px;
+      padding: 0 10px;
+      border: 0;
+      border-radius: 0.5rem;
+      background: transparent;
+      color: var(--cp-text-muted);
+      font: inherit;
+      font-size: 12px;
+      font-weight: 650;
+      cursor: pointer;
+    }
+    .theme-choice[aria-pressed="true"] {
+      background: var(--cp-accent);
+      color: var(--cp-accent-fg);
+    }
+    .power-cat-lockup {
+      justify-self: end;
+      display: block;
+      width: 118px;
+      height: 46px;
+    }
+    .power-cat-lockup img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: right center;
+    }
+    .theme-dark-only { display: none !important; }
+    html[data-theme="dark"] .theme-light-only { display: none !important; }
+    html[data-theme="dark"] .theme-dark-only { display: block !important; }
+    .detail-hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
+      gap: 40px;
+      align-items: start;
+      padding: 80px max(5vw, calc((100vw - 1280px) / 2));
+      background: radial-gradient(700px 260px at 78% 25%, var(--cp-highlight), transparent 68%), var(--cp-bg-elevated);
+      border-bottom: 8px solid transparent;
+      border-image: linear-gradient(90deg, #6b3a8f, #8f4d9d 55%, #b36a93) 1;
+    }
+    .eyebrow {
+      margin: 0 0 12px;
+      color: var(--cp-accent);
+      font-size: 15px;
+      font-weight: 750;
+      text-transform: uppercase;
+    }
+    .detail-hero h1 {
+      margin: 0;
+      color: var(--cp-text);
+      font-size: clamp(40px, 5vw, 64px);
+      line-height: 1;
+    }
+    .detail-summary {
+      max-width: 860px;
+      color: var(--cp-text-muted);
+      font-size: clamp(18px, 1.5vw, 22px);
+      line-height: 1.5;
+    }
+    .metadata-card {
+      background: var(--cp-surface);
+      border: 1px solid var(--cp-border);
+      border-top: 4px solid var(--cp-accent);
+      border-radius: 0.625rem;
+      padding: 22px;
+      box-shadow: var(--cp-shadow);
+    }
+    .meta-grid {
+      display: grid;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .meta-item span {
+      display: block;
+      color: var(--cp-text-muted);
+      font-size: 12px;
+      font-weight: 750;
+      text-transform: uppercase;
+    }
+    .meta-item strong {
+      display: block;
+      margin-top: 3px;
+      color: var(--cp-text);
+      line-height: 1.35;
+    }
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .primary-action,
+    .secondary-action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 42px;
+      padding: 0 16px;
+      border-radius: 0.625rem;
+      text-decoration: none;
+      font-weight: 650;
+      font-size: 14px;
+    }
+    .primary-action {
+      background: var(--cp-accent);
+      color: var(--cp-accent-fg);
+      border: 1px solid var(--cp-accent);
+    }
+    .primary-action:hover { background: var(--cp-accent-hover); }
+    .secondary-action {
+      background: var(--cp-surface);
+      color: var(--cp-text);
+      border: 1px solid var(--cp-border);
+    }
+    .secondary-action:hover {
+      border-color: var(--cp-accent);
+      color: var(--cp-accent);
+    }
+    .detail-docs-section {
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 64px 5vw 88px;
+    }
+    .rendered-markdown {
+      background: var(--cp-surface);
+      border: 1px solid var(--cp-border);
+      border-top: 4px solid var(--cp-accent);
+      border-radius: 0.625rem;
+      padding: clamp(24px, 4vw, 44px);
+      box-shadow: var(--cp-shadow);
+      color: var(--cp-text-muted);
+      font-size: 16px;
+      line-height: 1.65;
+    }
+    .rendered-markdown h1,
+    .rendered-markdown h2,
+    .rendered-markdown h3,
+    .rendered-markdown h4,
+    .rendered-markdown h5,
+    .rendered-markdown h6 {
+      color: var(--cp-text);
+      line-height: 1.15;
+    }
+    .rendered-markdown h1 { font-size: clamp(34px, 4vw, 48px); }
+    .rendered-markdown h2 {
+      margin-top: 42px;
+      padding-top: 8px;
+      border-top: 1px solid var(--cp-border);
+      font-size: 30px;
+    }
+    .rendered-markdown h3 { margin-top: 28px; font-size: 22px; }
+    .rendered-markdown h4 { margin-top: 24px; font-size: 19px; }
+    .rendered-markdown h5,
+    .rendered-markdown h6 {
+      margin-top: 20px;
+      color: var(--cp-accent);
+      font-size: 16px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+    .rendered-markdown p,
+    .rendered-markdown li { color: var(--cp-text-muted); }
+    .rendered-markdown a {
+      color: var(--cp-link);
+      font-weight: 650;
+    }
+    .rendered-markdown code {
+      background: var(--cp-surface-soft);
+      border: 1px solid var(--cp-border);
+      border-radius: 0.375rem;
+      padding: 0.1em 0.35em;
+      color: var(--cp-text);
+    }
+    .rendered-markdown pre {
+      overflow-x: auto;
+      background: var(--cp-bg-elevated);
+      border: 1px solid var(--cp-border);
+      border-radius: 0.625rem;
+      padding: 16px;
+    }
+    .rendered-markdown pre code {
+      background: transparent;
+      border: 0;
+      padding: 0;
+    }
+    .rendered-markdown blockquote {
+      margin: 18px 0;
+      padding: 14px 18px;
+      border-left: 4px solid var(--cp-accent);
+      border-radius: 0.625rem;
+      background: var(--cp-accent-soft);
+      color: var(--cp-text);
+    }
+    .rendered-markdown blockquote p { margin: 0; }
+    .rendered-markdown table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 18px 0;
+      font-size: 14px;
+    }
+    .rendered-markdown th,
+    .rendered-markdown td {
+      border: 1px solid var(--cp-border);
+      padding: 10px 12px;
+      text-align: left;
+      vertical-align: top;
+    }
+    .rendered-markdown th {
+      background: var(--cp-surface-soft);
+      color: var(--cp-text);
+    }
+    .rendered-markdown img {
+      max-width: 100%;
+      border: 1px solid var(--cp-border);
+      border-radius: 0.625rem;
+      box-shadow: 0 8px 24px rgba(42, 68, 111, 0.06);
+    }
+    footer {
+      min-height: 92px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 24px;
+      padding: 0 5vw;
+      border-top: 1px solid var(--cp-border);
+      background: var(--cp-bg);
+      color: var(--cp-text-muted);
+      font-size: 13px;
+    }
+    .microsoft-brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--cp-text);
+      font-weight: 600;
+    }
+    .microsoft-mark {
+      display: grid;
+      grid-template-columns: repeat(2, 10px);
+      grid-template-rows: repeat(2, 10px);
+      gap: 2px;
+      width: 22px;
+      height: 22px;
+    }
+    .microsoft-mark i:nth-child(1) { background: #f25022; }
+    .microsoft-mark i:nth-child(2) { background: #7fba00; }
+    .microsoft-mark i:nth-child(3) { background: #00a4ef; }
+    .microsoft-mark i:nth-child(4) { background: #ffb900; }
+    @media (max-width: 760px) {
+      .site-header,
+      .detail-hero {
+        display: block;
+      }
+      nav { justify-content: start; margin-top: 12px; flex-wrap: wrap; }
+      .power-cat-lockup { margin-top: 12px; }
+      .metadata-card { margin-top: 28px; }
+      footer {
+        align-items: flex-start;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="site-header">
+    <a class="brand" href="./index.html" aria-label="Power Series Labs home">
+      <img class="brand-logo" src="assets/ms-power-platform-logo-stacked-gray-rgb.png" alt="Microsoft Power Platform">
+    </a>
+    <nav aria-label="Primary navigation">
+      <a href="./index.html#needs">Business needs</a>
+      <a href="./index.html#labs">Labs</a>
+      <a href="../README.md">Repository</a>
+      <div class="theme-switch" role="group" aria-label="Theme">
+        <button class="theme-choice" type="button" data-theme-choice="light" aria-pressed="false">Light</button>
+        <button class="theme-choice" type="button" data-theme-choice="dark" aria-pressed="false">Dark</button>
+      </div>
+    </nav>
+    <div class="power-cat-lockup">
+      <img class="theme-light-only" src="assets/power-cat-dark.png" alt="Power CAT">
+      <img class="theme-dark-only" src="assets/power-cat-light.png" alt="Power CAT">
+    </div>
+  </header>
+
+  <main>
+    <section class="detail-hero" aria-labelledby="lab-title">
+      <div>
+        <p class="eyebrow">Power Series lab</p>
+        <h1 id="lab-title">Loading lab...</h1>
+        <p class="detail-summary" id="lab-summary"></p>
+      </div>
+      <aside class="metadata-card">
+        <div class="meta-grid">
+          <div class="meta-item"><span>Level</span><strong id="lab-level">-</strong></div>
+          <div class="meta-item"><span>Duration</span><strong id="lab-duration">-</strong></div>
+          <div class="meta-item"><span>Persona</span><strong id="lab-persona">-</strong></div>
+        </div>
+        <div class="actions">
+          <a class="primary-action" id="repo-link" href="#" target="_blank" rel="noopener" aria-label="Open in repo (opens in a new tab)">Open in repo</a>
+          <a class="secondary-action" id="deck-link" href="#" target="_blank" rel="noopener" aria-label="Presentation (opens in a new tab)" hidden>Presentation</a>
+          <a class="secondary-action" id="catalog-link" href="./index.html#labs">Back to catalog</a>
+        </div>
+      </aside>
+    </section>
+
+    <section class="detail-docs-section">
+      <article class="rendered-markdown" id="markdown"><p>Loading lab content...</p></article>
+    </section>
+  </main>
+
+  <footer>
+    <div class="microsoft-brand"><span class="microsoft-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Microsoft</div>
+    <div>Power CAT · Power Series Labs · microsoft/apps-agents-workshop</div>
+  </footer>
+
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    const requestedPath = params.get("path");
+    const requestedDeck = params.get("deck");
+
+    const normalizedPath = requestedPath ? requestedPath.replace(/^labs\//, "") : null;
+    const path = (normalizedPath && /^[A-Za-z0-9][A-Za-z0-9_./-]*\.md$/i.test(normalizedPath) && !normalizedPath.startsWith("/") && !normalizedPath.includes(".."))
+      ? normalizedPath
+      : null;
+
+    const deck = (requestedDeck && /^[A-Za-z0-9][A-Za-z0-9 &_./-]*\.pptx?$/i.test(requestedDeck) && !requestedDeck.startsWith("/") && !requestedDeck.includes("..") && !requestedDeck.includes(":"))
+      ? requestedDeck
+      : null;
+    const title = document.querySelector("#lab-title");
+    const summary = document.querySelector("#lab-summary");
+    const level = document.querySelector("#lab-level");
+    const duration = document.querySelector("#lab-duration");
+    const persona = document.querySelector("#lab-persona");
+    const markdown = document.querySelector("#markdown");
+    const repoLink = document.querySelector("#repo-link");
+    const deckLink = document.querySelector("#deck-link");
+    const catalogLink = document.querySelector("#catalog-link");
+    const themeChoices = document.querySelectorAll("[data-theme-choice]");
+
+    function setTheme(theme) {
+      document.documentElement.setAttribute("data-theme", theme);
+      localStorage.setItem("powerSeriesTheme", theme);
+      themeChoices.forEach(button => {
+        button.setAttribute("aria-pressed", String(button.dataset.themeChoice === theme));
+      });
+    }
+
+    const branch = params.get("branch");
+    if (branch) {
+      catalogLink.href = `./index.html?branch=${encodeURIComponent(branch)}#labs`;
+    }
+
+    function escapeHtml(value) {
+      return value.replace(/[&<>"']/g, char => ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;"
+      }[char]));
+    }
+
+    function decodeMarkdownUrl(value) {
+      return String(value)
+        .replace(/&amp;/g, "&")
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">");
+    }
+
+    function repoUrl(path) {
+      const branch = params.get("branch") || "main";
+      const encodedBranch = encodeURIComponent(branch);
+      return `https://github.com/microsoft/apps-agents-workshop/blob/${encodedBranch}/labs/${path.split("/").map(encodeURIComponent).join("/")}`;
+    }
+
+    function contentUrl(path) {
+      if (["localhost", "127.0.0.1"].includes(window.location.hostname)) return path;
+      const selectedBranch = params.get("branch") || "main";
+      const encodedBranch = encodeURIComponent(selectedBranch);
+      const encodedPath = path.split("/").map(encodeURIComponent).join("/");
+      return `https://raw.githubusercontent.com/microsoft/apps-agents-workshop/${encodedBranch}/labs/${encodedPath}`;
+    }
+
+    function resolveMarkdownUrl(url, basePath, isLink = false) {
+      const trimmed = String(url ?? "").trim();
+      if (!trimmed || trimmed.startsWith("//")) return "#";
+      if (trimmed.startsWith("#")) return trimmed;
+      if (/^[a-z][a-z\d+.-]*:/i.test(trimmed) && !/^(?:https?:|mailto:|tel:)/i.test(trimmed)) {
+        return "#";
+      }
+      if (/^(?:https?:|mailto:|tel:)/i.test(trimmed)) return trimmed;
+      if (trimmed.startsWith("/")) {
+        const siteBase = window.location.pathname.match(/^(.*)\/labs\//)?.[1] ?? "";
+        if (isLink && /^\/labs\/[^?#]+\.md(?:[?#].*)?$/i.test(trimmed)) {
+          const target = trimmed.slice("/labs/".length);
+          const [targetPath, fragment = ""] = target.split("#", 2);
+          if (!targetPath.includes("..")) {
+            const branchParam = params.get("branch") ? `&branch=${encodeURIComponent(params.get("branch"))}` : "";
+            return `./lab.html?path=${encodeURIComponent(targetPath)}${branchParam}${fragment ? `#${fragment}` : ""}`;
+          }
+        }
+        return `${siteBase}${trimmed}`;
+      }
+
+      const normalizedBase = (basePath && basePath !== ".") ? basePath.replace(/\/+$/, "") : "";
+      const basePrefix = normalizedBase ? `${normalizedBase}/` : "";
+      const [relativePath, relativeFragment = ""] = trimmed.split("#", 2);
+      const resolvedRelative = `${basePrefix}${relativePath}`;
+      const isDownloadResourceLink = /(^|\/)resources\//i.test(relativePath);
+      if (isLink && /\.md(?:#.*)?$/i.test(trimmed) && !isDownloadResourceLink) {
+        const segments = resolvedRelative.split("/");
+        const normalizedSegments = [];
+        for (const segment of segments) {
+          if (!segment || segment === ".") continue;
+          if (segment === "..") {
+            if (!normalizedSegments.length) return "#";
+            normalizedSegments.pop();
+          } else {
+            normalizedSegments.push(segment);
+          }
+        }
+        const labPath = normalizedSegments.join("/");
+        if (/\.md$/i.test(labPath)) {
+          const branchParam = params.get("branch") ? `&branch=${encodeURIComponent(params.get("branch"))}` : "";
+          return `./lab.html?path=${encodeURIComponent(labPath)}${branchParam}${relativeFragment ? `#${relativeFragment}` : ""}`;
+        }
+      }
+      if (resolvedRelative.includes("..")) return "#";
+
+      const isLocalPreview = ["localhost", "127.0.0.1"].includes(window.location.hostname);
+      const isBranchAsset = /\.(?:png|jpe?g|gif|svg|webp|avif|pdf)$/i.test(relativePath);
+      const isSafeRelative = !trimmed.startsWith("../") && !trimmed.includes("..");
+      return (!isLocalPreview && isBranchAsset && isSafeRelative) ? contentUrl(resolvedRelative) : resolvedRelative;
+    }
+
+    function renderInlineMarkdown(value, basePath) {
+      const htmlTokens = [];
+      const escapedValue = String(value).replace(/<\/?p(?:\s+align="center")?\s*>|<img\s+([^>]+)>/gi, (match, attributes) => {
+        let safeTag = "";
+        if (/^<\/p/i.test(match)) {
+          safeTag = "</p>";
+        } else if (/^<p/i.test(match)) {
+          safeTag = /align\s*=\s*"center"/i.test(match) ? '<p align="center">' : "<p>";
+        } else {
+          const src = attributes.match(/\bsrc="([^"]*)"/i)?.[1];
+          const alt = attributes.match(/\balt="([^"]*)"/i)?.[1] ?? "";
+          const width = attributes.match(/\bwidth="(\d+)"/i)?.[1];
+          if (!src) return match;
+          safeTag = `<img src="${escapeHtml(resolveMarkdownUrl(src, basePath))}" alt="${escapeHtml(alt)}"${width ? ` width="${width}"` : ""}>`;
+        }
+        const token = `\u0000HTML${htmlTokens.length}\u0000`;
+        htmlTokens.push(safeTag);
+        return token;
+      });
+
+      return escapeHtml(escapedValue)
+        .replace(/&lt;(https?:\/\/[^&\s]+)&gt;/gi, (_, url) => {
+          const resolved = decodeMarkdownUrl(url);
+          const rendered = escapeHtml(resolved);
+          return `<a href="${rendered}" target="_blank" rel="noopener" aria-label="${rendered} (opens in a new tab)">${rendered}</a>`;
+        })
+        .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => {
+          const resolvedSrc = resolveMarkdownUrl(decodeMarkdownUrl(src), basePath);
+          return `<img src="${escapeHtml(resolvedSrc)}" alt="${alt}">`;
+        })
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) => {
+          const resolved = resolveMarkdownUrl(decodeMarkdownUrl(href), basePath, true);
+          const isExternal = /^(?:https?:|mailto:|tel:)/i.test(resolved);
+          const accessibleLabel = decodeMarkdownUrl(label).replace(/[*_~`]/g, "");
+          const attrs = isExternal ? ` target="_blank" rel="noopener" aria-label="${escapeHtml(accessibleLabel)} (opens in a new tab)"` : "";
+          return `<a href="${escapeHtml(resolved)}"${attrs}>${label}</a>`;
+        })
+        .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/`([^`]+)`/g, "<code>$1</code>")
+        .replace(/\u0000HTML(\d+)\u0000/g, (_, index) => htmlTokens[index]);
+    }
+
+    function parseFrontMatter(source) {
+      const match = source.match(/^---\s*([\s\S]*?)\s*---/);
+      const fields = {};
+      if (!match) return fields;
+      match[1].split(/\r?\n/).forEach(line => {
+        const item = line.match(/^([A-Za-z_]+):\s*(.*)$/);
+        if (!item) return;
+        const key = item[1];
+        let value = item[2].trim();
+        if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+          value = value.slice(1, -1);
+        }
+        fields[key] = value;
+      });
+      return fields;
+    }
+
+    function renderMarkdown(source, basePath, nested = false) {
+      const lines = (nested ? source : source.replace(/^---[\s\S]*?---\s*/, "")).split(/\r?\n/);
+      const blocks = [];
+      let paragraph = [];
+      let code = [];
+      let inCode = false;
+      let table = [];
+      let listItems = [];
+      let quote = [];
+      let codeIndent = "";
+      let htmlBlock = [];
+      const headingIds = new Map();
+
+      function getHeadingId(value) {
+        const baseId = value
+          .replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1")
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+          .replace(/[`*_~]/g, "")
+          .toLowerCase()
+          .normalize("NFKD")
+          .replace(/[\u0300-\u036f]/g, "")
+          .replace(/[^\p{Letter}\p{Number} -]+/gu, "")
+          .replace(/[\u2012-\u2015\u2212\uFE58\uFE63\uFF0D]/g, "")
+          .replace(/ /g, "-")
+          .replace(/^-+|-+$/g, "") || "heading";
+        const count = headingIds.get(baseId) || 0;
+        headingIds.set(baseId, count + 1);
+        return count ? `${baseId}-${count}` : baseId;
+      }
+
+      function flushParagraph() {
+        if (!paragraph.length) return;
+        const joined = paragraph
+          .map((entry, position) => position === paragraph.length - 1
+            ? entry.text
+            : `${entry.text}${entry.hardBreak ? "\u0000BR\u0000" : " "}`)
+          .join("");
+        blocks.push(`<p>${renderInlineMarkdown(joined, basePath).replace(/\u0000BR\u0000/g, "<br>")}</p>`);
+        paragraph = [];
+      }
+      function flushTable() {
+        if (!table.length) return;
+        blocks.push(renderTable(table.join("\n"), basePath));
+        table = [];
+      }
+      function flushList() {
+        if (!listItems.length) return;
+        function renderListGroup(startIndex, indent) {
+          const currentType = listItems[startIndex].type;
+          const listTag = currentType === "ol" ? "ol" : "ul";
+          const renderedItems = [];
+          let position = startIndex;
+          while (position < listItems.length) {
+            const current = listItems[position];
+            if (current.indent < indent) break;
+            if (current.indent > indent) {
+              const nested = renderListGroup(position, current.indent);
+              if (renderedItems.length) {
+                renderedItems[renderedItems.length - 1] = renderedItems[renderedItems.length - 1].replace(/<\/li>$/, `${nested.html}</li>`);
+              }
+              position = nested.nextIndex;
+              continue;
+            }
+            if (current.type !== currentType) break;
+            let itemPosition = position + 1;
+            const childBlocks = [];
+            while (itemPosition < listItems.length && listItems[itemPosition].indent > indent) {
+              const nested = renderListGroup(itemPosition, listItems[itemPosition].indent);
+              childBlocks.push(nested.html);
+              itemPosition = nested.nextIndex;
+            }
+            renderedItems.push(`<li>${renderInlineMarkdown(current.text, basePath)}${childBlocks.join("")}</li>`);
+            position = itemPosition;
+          }
+          const startAttr = listTag === "ol" && listItems[startIndex].start > 1 ? ` start="${listItems[startIndex].start}"` : "";
+          return { html: `<${listTag}${startAttr}>${renderedItems.join("")}</${listTag}>`, nextIndex: position };
+        }
+        let index = 0;
+        while (index < listItems.length) {
+          const group = renderListGroup(index, listItems[index].indent);
+          blocks.push(group.html);
+          index = group.nextIndex;
+        }
+        listItems = [];
+      }
+      function flushQuote() {
+        if (!quote.length) return;
+        const alert = quote[0].match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]$/i);
+        const content = alert ? quote.slice(1) : quote;
+        const label = alert ? `<p><strong>${alert[1][0] + alert[1].slice(1).toLowerCase()}</strong></p>` : "";
+        blocks.push(`<blockquote>${label}${renderMarkdown(content.join("\n"), basePath, true)}</blockquote>`);
+        quote = [];
+      }
+      function flushAll() {
+        flushParagraph();
+        flushTable();
+        flushList();
+        flushQuote();
+      }
+
+      for (let index = 0; index < lines.length; index += 1) {
+        const line = lines[index];
+        if (/^\s*<!--.*?-->\s*$/.test(line) || /^\s*<!--/.test(line) || /^\s*-->/.test(line)) continue;
+
+        const fence = line.match(/^(\s*)```/);
+        if (fence) {
+          if (inCode) {
+            blocks.push(`<pre><code>${escapeHtml(code.join("\n"))}</code></pre>`);
+            code = [];
+            inCode = false;
+            codeIndent = "";
+          } else {
+            flushAll();
+            inCode = true;
+            codeIndent = fence[1];
+          }
+          continue;
+        }
+        if (inCode) {
+          code.push(line.startsWith(codeIndent) ? line.slice(codeIndent.length) : line);
+          continue;
+        }
+        if (htmlBlock.length) {
+          htmlBlock.push(line);
+          if (/^\s*<\/p>\s*$/i.test(line)) {
+            blocks.push(renderInlineMarkdown(htmlBlock.join(" "), basePath));
+            htmlBlock = [];
+          }
+          continue;
+        }
+        if (/^\s*<p\s+align="center">\s*$/i.test(line)) {
+          flushAll();
+          htmlBlock = [line];
+          continue;
+        }
+        if (/^\s*<!--.*-->\s*$/.test(line)) continue;
+        if (!line.trim()) {
+          const nextNonEmpty = lines.slice(index + 1).find(nextLine => nextLine.trim());
+          if (nextNonEmpty && /^\s*(?:[-*+]\s+|\d+[.)]\s+)/.test(nextNonEmpty)) {
+            continue;
+          }
+          flushAll();
+          continue;
+        }
+        const heading = line.match(/^(#{1,6})\s+(.+)$/);
+        if (heading) {
+          flushAll();
+          const headingLevel = heading[1].length;
+          const headingId = getHeadingId(heading[2]);
+          blocks.push(`<h${headingLevel} id="${headingId}">${renderInlineMarkdown(heading[2], basePath)}</h${headingLevel}>`);
+          continue;
+        }
+        const tableLine = line.replace(/^\s{1,4}(?=\|)/, "");
+        if (/^\|/.test(tableLine)) {
+          flushParagraph();
+          flushList();
+          flushQuote();
+          table.push(tableLine);
+          continue;
+        }
+        const unordered = line.match(/^(\s*)([-*+])\s+(.+)$/);
+        const ordered = line.match(/^(\s*)(\d+)[.)]\s+(.+)$/);
+        if (unordered || ordered) {
+          flushParagraph();
+          flushTable();
+          flushQuote();
+          const match = ordered || unordered;
+          listItems.push({
+            indent: match[1].length,
+            type: ordered ? "ol" : "ul",
+            start: ordered ? Number(match[2]) : 1,
+            text: match[3]
+          });
+          continue;
+        }
+        const alert = line.match(/^\s{0,4}>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(.*)$/i);
+        if (alert) {
+          flushParagraph();
+          flushTable();
+          flushList();
+          const alertKind = alert[1].toLowerCase();
+          const label = alert[1].charAt(0).toUpperCase() + alert[1].slice(1).toLowerCase();
+          const contentLines = [];
+          if (alert[2].trim()) contentLines.push(alert[2].trim());
+          let nextIndex = index + 1;
+          while (nextIndex < lines.length) {
+            const nextLine = lines[nextIndex];
+            if (!nextLine.trim()) {
+              if (contentLines.length) {
+                nextIndex += 1;
+                continue;
+              }
+              break;
+            }
+            const nextQuote = nextLine.match(/^\s{0,4}>\s?(.*)$/);
+            if (!nextQuote) break;
+            const nextText = nextQuote[1].trim();
+            if (!nextText) {
+              nextIndex += 1;
+              continue;
+            }
+            if (/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]/i.test(nextText)) break;
+            contentLines.push(nextText);
+            nextIndex += 1;
+          }
+          const content = contentLines.join("\n").trim();
+          blocks.push(`<blockquote class="markdown-alert markdown-alert-${alertKind}"><p><strong>${label}</strong>${content ? ` ${renderInlineMarkdown(content, basePath)}` : ""}</p></blockquote>`);
+          index = nextIndex - 1;
+          continue;
+        }
+        const quoted = line.match(/^\s{0,4}>\s?(.*)$/);
+        if (quoted) {
+          flushParagraph();
+          flushTable();
+          flushList();
+          quote.push(quoted[1]);
+          continue;
+        }
+        if (/^\s{0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+          flushAll();
+          blocks.push("<hr>");
+          continue;
+        }
+        flushTable();
+        flushList();
+        flushQuote();
+        paragraph.push({ text: line.trim(), hardBreak: /\S {2,}$/.test(line) });
+      }
+      if (htmlBlock.length) {
+        blocks.push(`<p>${renderInlineMarkdown(htmlBlock.join(" "), basePath)}</p>`);
+      }
+      flushAll();
+      return blocks.join("\n");
+    }
+
+    function renderTable(markdownTable, basePath) {
+      const rows = markdownTable.split("\n").filter(row => row.includes("|"));
+      const cleanRows = rows.filter(row => !/^\|\s*-/.test(row));
+      return `<table>${cleanRows.map((row, index) => {
+        const cells = row.replace(/^\||\|$/g, "").split("|").map(cell => cell.trim());
+        const tag = index === 0 ? "th" : "td";
+        return `<tr>${cells.map(cell => `<${tag}>${renderInlineMarkdown(cell, basePath)}</${tag}>`).join("")}</tr>`;
+      }).join("")}</table>`;
+    }
+
+    async function loadLab() {
+      if (!path) {
+        title.textContent = "Lab not found";
+        markdown.innerHTML = "<p>No lab path was provided.</p>";
+        repoLink.hidden = true;
+        deckLink.hidden = true;
+        return;
+      }
+
+      repoLink.href = repoUrl(path);
+      if (deck) {
+        deckLink.hidden = false;
+        deckLink.href = contentUrl(deck);
+      }
+
+      try {
+        const response = await fetch(contentUrl(path));
+        if (!response.ok) throw new Error(`Unable to load ${path}`);
+        const source = await response.text();
+        const metadata = parseFrontMatter(source);
+        const heading = source.match(/^#\s+(.+)$/m)?.[1]?.trim();
+        const fallbackDescription = source
+          .replace(/^---[\s\S]*?---\s*/, "")
+          .split(/\r?\n/)
+          .map(line => line.trim())
+          .find(line => line
+            && !line.startsWith("#")
+            && !line.startsWith("<!--")
+            && !line.startsWith("-->")
+            && !/^built by:/i.test(line));
+        const titleText = metadata.title || heading || "Power Series Lab";
+        document.title = (metadata.title || heading) ? `${titleText} | Power Series Lab` : "Power Series Lab";
+        title.textContent = titleText;
+        summary.textContent = metadata.description || fallbackDescription || "";
+        level.textContent = metadata.level || "-";
+        duration.textContent = metadata.estimated_duration || metadata.duration || "-";
+        persona.textContent = metadata.persona || "-";
+        const basePath = path.split("/").slice(0, -1).join("/") || ".";
+        markdown.innerHTML = renderMarkdown(source, basePath);
+      } catch (error) {
+        title.textContent = "Lab unavailable";
+        const message = (error && error.message) ? String(error.message) : "Unable to load this lab";
+        markdown.innerHTML = `<p>${escapeHtml(message)}. Use Open in repo to view the source.</p>`;
+      }
+    }
+
+    setTheme(document.documentElement.getAttribute("data-theme") || "light");
+    themeChoices.forEach(button => button.addEventListener("click", () => setTheme(button.dataset.themeChoice)));
+    loadLab();
+  </script>
+</body>
+</html>