diff --git a/guides/dev-guide.ts b/guides/dev-guide.ts
index 4cdaf2b99..e6d858860 100644
--- a/guides/dev-guide.ts
+++ b/guides/dev-guide.ts
@@ -339,6 +339,7 @@ async function runAgentTest(targetDir: string, guideName: string, guidedOnly = f
     numRuns: 1,
     skipEval: true,
     guidedOnly,
+    suiteConfig,
   });
 
   // 3. Grade agent output (unguided + guided)
diff --git a/guides/user-experience/context-sensitive-sticky-headers/expectations.md b/guides/user-experience/context-sensitive-sticky-headers/expectations.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/guides/user-experience/context-sensitive-sticky-headers/guide.md b/guides/user-experience/context-sensitive-sticky-headers/guide.md
deleted file mode 100644
index 0a3fa09e8..000000000
--- a/guides/user-experience/context-sensitive-sticky-headers/guide.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-name: context-sensitive-sticky-headers
-description: Build sticky section headers or navbars that visually transform when they're actually "stuck" at the top, collapsing, changing their color scheme, gaining a shadow, or switching to a more compact layout.
-web-feature-ids:
-  - container-scroll-state-queries
----
diff --git a/guides/user-experience/context-sensitive-sticky-headers/demo.html b/guides/user-experience/state-aware-sticky-headers/demo.html
similarity index 58%
rename from guides/user-experience/context-sensitive-sticky-headers/demo.html
rename to guides/user-experience/state-aware-sticky-headers/demo.html
index d5a4acb8b..2341c9220 100644
--- a/guides/user-experience/context-sensitive-sticky-headers/demo.html
+++ b/guides/user-experience/state-aware-sticky-headers/demo.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Context-Sensitive Sticky Headers</title>
+  <title>State-Aware Sticky Headers</title>
   <style>
     body {
       font-family: system-ui, sans-serif;
@@ -13,15 +13,6 @@
       color: #333;
     }
 
-    .scroller {
-      height: 400px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      margin: 20px;
-      background: #fff;
-      border-radius: 8px;
-    }
-
     .section {
       padding-bottom: 50px;
     }
@@ -31,6 +22,7 @@
       position: sticky;
       top: 0;
       container-type: scroll-state;
+      container-name: section-header;
       z-index: 10;
     }
 
@@ -40,19 +32,25 @@
       padding: 20px;
       font-size: 1.5rem;
       font-weight: bold;
-      transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s, color 0.3s;
+      transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
     }
 
     /* Target the inner header when the container is stuck */
-    @container scroll-state(stuck: top) {
+    @container section-header scroll-state(stuck: top) {
       .sticky-header {
         background: #0056b3;
         color: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
-        padding: 10px 20px; /* Switch to a more compact layout */
+        box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
       }
     }
 
+    /* Fallback styles for browsers without scroll-state support */
+    .sticky-container.is-stuck .sticky-header {
+      background: #0056b3;
+      color: white;
+      box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
+    }
+
     .content {
       padding: 20px;
       line-height: 1.6;
@@ -61,8 +59,11 @@
 </head>
 <body>
 
-  <div class="scroller">
-    <div class="section">
+  <nav>
+    <div class="logo">Logo</div>
+  </nav>
+
+  <div class="section">
       <div class="sticky-container">
         <div class="sticky-header">
           Section 1
@@ -97,7 +98,43 @@
         <p>Suspendisse dictum feugiat nisl ut dapibus.</p>
       </div>
     </div>
-  </div>
 
+  <script>
+    // JS Fallback for browsers that don't support scroll-state queries
+    if (!CSS.supports('container-type', 'scroll-state')) {
+      function getScrollParent(node) {
+        if (node == null || node === document.body || node === document.documentElement) {
+          return null; // default to viewport
+        }
+        if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
+          const overflow = getComputedStyle(node).overflow;
+          if (overflow !== 'visible' && overflow !== 'clip') {
+            return node;
+          }
+        }
+        return getScrollParent(node.parentNode);
+      }
+
+      document.querySelectorAll('.sticky-container').forEach(container => {
+        const root = getScrollParent(container);
+        
+        const topOffset = parseFloat(getComputedStyle(container).top) || 0;
+        
+        const observer = new IntersectionObserver(
+          ([e]) => {
+            // Toggle class when element moves above the top edge
+            e.target.classList.toggle('is-stuck', e.intersectionRatio < 1);
+          },
+          { 
+            root: root,
+            threshold: [1],
+            rootMargin: `-${topOffset + 1}px 0px 0px 0px`
+          }
+        );
+        
+        observer.observe(container);
+      });
+    }
+  </script>
 </body>
 </html>
diff --git a/guides/user-experience/state-aware-sticky-headers/expectations.md b/guides/user-experience/state-aware-sticky-headers/expectations.md
new file mode 100644
index 000000000..30384d212
--- /dev/null
+++ b/guides/user-experience/state-aware-sticky-headers/expectations.md
@@ -0,0 +1,7 @@
+- The header container uses `position: sticky` to remain at the top of the scroller.
+- The header container defines `container-type: scroll-state` to enable scroll state queries.
+- The header container defines `container-name: section-header` to avoid collisions.
+- The header visual style changes (e.g., background color or box-shadow) when it is stuck at the top.
+- The visual style changes are implemented using the `@container scroll-state(stuck: top)` query.
+- A functional JavaScript fallback using `IntersectionObserver` is provided for browsers that do not support scroll-state queries.
+- The fallback markup and script must be present in the rendered output.
diff --git a/guides/user-experience/state-aware-sticky-headers/grader.ts b/guides/user-experience/state-aware-sticky-headers/grader.ts
new file mode 100644
index 000000000..e41d2d71c
--- /dev/null
+++ b/guides/user-experience/state-aware-sticky-headers/grader.ts
@@ -0,0 +1,291 @@
+import { test, expect } from '../../test-fixture.ts';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// Setup
+const targetFile = process.env.TARGET_FILE;
+if (!targetFile) {
+  throw new Error('TARGET_FILE environment variable not set.');
+}
+
+const filePath = path.resolve(targetFile);
+const targetDir = path.dirname(filePath);
+const demoName = path.basename(filePath);
+
+test.use({
+  launchOptions: {
+    args: ['--enable-experimental-web-platform-features'],
+  },
+});
+
+test.describe(`State-Aware Sticky Headers Expectations: ${demoName}`, () => {
+
+  test.beforeEach(async ({ page, TARGET_URL }) => {
+    if (TARGET_URL.startsWith('http://localhost/')) {
+      await page.route('http://localhost/**', async (route) => {
+        const requestPath = new URL(route.request().url()).pathname;
+        const localFilePath = path.join(targetDir, requestPath === '/' ? demoName : requestPath);
+
+        if (fs.existsSync(localFilePath)) {
+          await route.fulfill({ path: localFilePath });
+        } else {
+          await route.continue();
+        }
+      });
+    }
+    await page.goto(TARGET_URL);
+  });
+
+  test('Header container should use position: sticky', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const position = await elements.nth(i).evaluate(el => getComputedStyle(el).position);
+      expect(position).toBe('sticky');
+    }
+  });
+
+  test('Header container should define container-type: scroll-state', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const containerType = await elements.nth(i).evaluate(el => {
+        // @ts-ignore
+        return getComputedStyle(el).containerType || getComputedStyle(el).getPropertyValue('container-type');
+      });
+      expect(containerType).toContain('scroll-state');
+    }
+  });
+
+  test('Header container should define a container-name', async ({ page }) => {
+    const elements = page.locator('.sticky-container');
+    const count = await elements.count();
+    expect(count).toBeGreaterThan(0);
+    for (let i = 0; i < count; i++) {
+      const containerName = await elements.nth(i).evaluate(el => {
+        // @ts-ignore
+        return getComputedStyle(el).containerName || getComputedStyle(el).getPropertyValue('container-name');
+      });
+      expect(containerName).toBeTruthy();
+      expect(containerName).not.toBe('none');
+    }
+  });
+
+  test('Header visual style should change when stuck at the top', async ({ page }) => {
+    const header = page.locator('.sticky-header').first();
+    
+    // Ensure we start at the top (unstuck)
+    await page.evaluate(() => window.scrollTo(0, 0));
+    
+    // Wait for header to be at its natural position (top > 0)
+    await page.waitForFunction(() => {
+      const el = document.querySelector('.sticky-header');
+      if (!el) return false;
+      return el.getBoundingClientRect().top > 0;
+    }, { timeout: 5000 });
+
+    const headerRect = await header.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, height: r.height };
+    });
+
+    const initialStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Assert header is actually unstuck
+    expect(headerRect.top).toBeGreaterThan(0);
+
+    // Scroll to make it stick (past its natural position)
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+
+    // Wait for style change (polling)
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      
+      // Check for blue-ish color (high blue channel)
+      const rgb = style.backgroundColor.match(/\d+/g);
+      const isBlue = rgb ? (Number(rgb[2]) > Number(rgb[0]) && Number(rgb[2]) > Number(rgb[1]) && Number(rgb[2]) > 100) : false;
+      
+      // Check that background changed AND it is blue
+      return style.backgroundColor !== args.initialBg && isBlue;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+
+    const stuckStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Assert specific changes
+    expect(stuckStyles.backgroundColor).not.toBe(initialStyles.backgroundColor);
+    
+    const rgb = stuckStyles.backgroundColor.match(/\d+/g);
+    const isBlue = rgb ? (Number(rgb[2]) > Number(rgb[0]) && Number(rgb[2]) > Number(rgb[1]) && Number(rgb[2]) > 100) : false;
+    expect(isBlue).toBe(true);
+
+    // Scroll back to 0 and assert revert
+    await page.evaluate(() => window.scrollTo(0, 0));
+
+    // Wait for style to revert
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor === args.initialBg;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+  });
+
+  test('Visual style changes should be implemented using @container scroll-state(...)', async ({ page }) => {
+    const hasScrollStateQuery = await page.evaluate(() => {
+      const sheets = Array.from(document.styleSheets);
+      return sheets.some(sheet => {
+        try {
+          const rules = Array.from(sheet.cssRules);
+          return rules.some(rule => {
+            // @ts-ignore - conditionText might not be on all rules
+            const condition = rule.conditionText || '';
+            const normalized = condition.replace(/\s+/g, '');
+            const hasScrollState = normalized.includes('scroll-state');
+            const hasValidStuck = normalized.includes('stuck:top') || 
+                                  normalized.includes('stuck:inset-block-start') || 
+                                  normalized.includes('stuck:inset-inline-start');
+            
+            if (hasScrollState && hasValidStuck) {
+              return true;
+            }
+            
+            // Some browsers might not put it in conditionText but we can check the constructor name or other props
+            if (rule.constructor.name === 'CSSContainerRule') {
+               const cssText = rule.cssText.replace(/\s+/g, '');
+               const hasCssScrollState = cssText.includes('scroll-state');
+               const hasCssValidStuck = cssText.includes('stuck:top') || 
+                                        cssText.includes('stuck:inset-block-start') || 
+                                        cssText.includes('stuck:inset-inline-start');
+               return hasCssScrollState && hasCssValidStuck;
+            }
+            return false;
+          });
+        } catch (e) {
+          return false;
+        }
+      });
+    });
+    expect(hasScrollStateQuery).toBe(true);
+  });
+
+  test('Stuck styles must come from the container query, not JS', async ({ page }) => {
+    const header = page.locator('.sticky-header').first();
+    
+    const headerRect = await header.evaluate(el => {
+      const r = el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, height: r.height };
+    });
+
+    const initialStyles = await header.evaluate(el => {
+      const style = getComputedStyle(el);
+      return {
+        backgroundColor: style.backgroundColor,
+      };
+    });
+
+    // Scroll to stick (past its natural position)
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+
+    // Wait for style change
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor !== args.initialBg;
+    }, { selector: '.sticky-header', initialBg: initialStyles.backgroundColor }, { timeout: 5000 });
+
+    // Delete the container query rule (recursively)
+    await page.evaluate(() => {
+      function deleteRuleRecursive(ruleList: any, sheetOrParent: any) {
+        for (let i = ruleList.length - 1; i >= 0; i--) {
+          const r = ruleList[i];
+          // @ts-ignore
+          const condition = r.conditionText || '';
+          const normalized = condition.replace(/\s+/g, '');
+          
+          const hasValidStuck = normalized.includes('stuck:top') || 
+                                normalized.includes('stuck:inset-block-start') || 
+                                normalized.includes('stuck:inset-inline-start');
+          
+          if (normalized.includes('scroll-state') && hasValidStuck) {
+            // Delete the rule from its parent list
+            // @ts-ignore
+            sheetOrParent.deleteRule(i);
+          } else if (r.cssRules) {
+            deleteRuleRecursive(r.cssRules, r);
+          }
+        }
+      }
+
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          deleteRuleRecursive(sheet.cssRules, sheet);
+        } catch {}
+      }
+    });
+
+    // Assert styles revert to initial
+    await page.waitForFunction((args) => {
+      const el = document.querySelector(args.selector);
+      if (!el) return false;
+      const style = getComputedStyle(el);
+      return style.backgroundColor === args.initialBg;
+    }, { 
+      selector: '.sticky-header', 
+      initialBg: initialStyles.backgroundColor
+    }, { timeout: 5000 });
+
+    // Second arm: scroll away and back and verify it DOES NOT re-acquire stuck styles
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(300); // let any scroll handler run
+    
+    await page.evaluate((args) => {
+      window.scrollTo(0, args.top + args.height + 50);
+    }, headerRect);
+    await page.waitForTimeout(300);
+
+    const stillHasStuckLook = await header.evaluate((el, args) => {
+      const style = getComputedStyle(el);
+      return style.backgroundColor !== args.initialBg;
+    }, { initialBg: initialStyles.backgroundColor });
+
+    expect(stillHasStuckLook).toBe(false);
+  });  test('Existing navigation bar should remain intact', async ({ page }) => {
+    const nav = page.locator('nav').first();
+    await expect(nav).toBeVisible();
+    
+    const logo = page.locator('nav .logo');
+    await expect(logo).toBeVisible();
+    
+    const containerType = await nav.evaluate(el => {
+      // @ts-ignore
+      return getComputedStyle(el).containerType || getComputedStyle(el).getPropertyValue('container-type');
+    });
+    expect(containerType).not.toContain('scroll-state');
+  });
+
+});
diff --git a/guides/user-experience/state-aware-sticky-headers/guide.md b/guides/user-experience/state-aware-sticky-headers/guide.md
new file mode 100644
index 000000000..584a340c1
--- /dev/null
+++ b/guides/user-experience/state-aware-sticky-headers/guide.md
@@ -0,0 +1,131 @@
+---
+name: state-aware-sticky-headers
+description: Build sticky section headers or navbars that visually transform when they're actually "stuck" at the top, changing their color scheme or gaining a shadow.
+web-feature-ids:
+  - container-scroll-state-queries
+sources:
+  - https://webstatus.dev/features/container-scroll-state-queries
+---
+
+# State-Aware Sticky Headers
+
+Sticky headers are a common UI pattern, but they often need to change their appearance when they become "stuck" to maintain readability or save space. Traditional solutions required JavaScript scroll listeners, which can cause performance issues. Modern CSS allows you to handle this natively using **Scroll State Queries**.
+
+## Implementation Steps
+
+### 1. Create the Sticky Container
+You need a container that will act as the sticky element and the container for the scroll state query.
+
+```html
+<!-- Wrap in a section to define the containment area for the sticky element -->
+<div class="section">
+  <div class="sticky-container">
+    <div class="sticky-header">
+      Section Header
+    </div>
+  </div>
+  <div class="content">
+    <!-- Content goes here -->
+  </div>
+</div>
+```
+
+### 2. Apply CSS for Sticky Behavior and Container Type
+Set `container-type: scroll-state` on the `position: sticky` element, not on its scrollable ancestor. Always specify a `container-name`, since these queries may be nested and unnamed containers will collide. You can also combine it with size queries, e.g., `container-type: scroll-state inline-size`.
+
+```css
+.sticky-container {
+  position: sticky;
+  top: 0;
+  /* MANDATORY: Always specify a container name to avoid collisions if CQs are nested */
+  container-type: scroll-state;
+  container-name: section-header;
+  z-index: 10;
+}
+
+.sticky-header {
+  /* Base styles for the header */
+  background: #f0f0f0;
+  padding: 20px;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+```
+
+**Important:** The scroll state is queried by **descendants** of the scroll-state container. The styles in the `@container` query will not apply to the `.sticky-container` itself, but to its children (like `.sticky-header`). You cannot style the container element itself with its own scroll-state query.
+
+
+### 3. Target the Stuck State
+Use the `@container scroll-state(...)` query to apply styles when the header is stuck.
+
+```css
+/* Apply styles when the named container is stuck at the top */
+@container section-header scroll-state(stuck: top) {
+  .sticky-header {
+    background: #0056b3;
+    color: white;
+    box-shadow: 0 4px 6px rgb(0 0 0 / 0.15);
+  }
+}
+```
+
+**Tip:** You can also use logical properties like `stuck: inset-block-start` or `stuck: inset-inline-start` to better support internationalization (i18n) and right-to-left (RTL) layouts by querying flow-relative edges rather than physical ones.
+
+### Notes on Dimension Changes
+
+Without scroll anchoring disabled, changing layout-affecting properties (height, padding, font-size) when stuck can cause visual flickering. Scroll anchoring on the in-flow content below the sticky element adjusts the scroll offset to compensate for the layout change, which pushes the element back out of its stuck position and triggers an oscillation.
+
+Disable scroll anchoring on the scroll container to avoid this:
+
+```css
+:root {
+  overflow-anchor: none;
+}
+```
+
+Apply it to whichever element is the scroll container (typically `:root` for the document scroller). With this in place, you can freely change any property in the stuck state, including box-model properties and transforms.
+
+### Fallback strategies
+{{ BASELINE_STATUS("container-scroll-state-queries") }}
+
+Scroll state queries are a progressive enhancement. In browsers that do not support `container-type: scroll-state`, the header will still stick to the top (due to `position: sticky`), but it will not visually transform. For most use cases, this is the recommended approach.
+
+**Tip:** If your "stuck" styling requires a different background color for readability, consider setting your layout up so that the default styling works everywhere (Progressive Enhancement). If you must use a fallback, you can gate the `position: sticky` behaviour itself inside an `@supports (container-type: scroll-state)` query.
+
+If the visual transformation is absolutely critical to the design (e.g., the stuck state introduces a background or compaction without which the content is unreadable), you can implement a robust JavaScript fallback using `IntersectionObserver`. You must duplicate your CSS styles under an `.is-stuck` class. The following generic polyfill checks `getComputedStyle` to traverse up and find the correct scroll container (defaulting to the viewport), matching the behavior of `@container scroll-state(stuck: top)`:
+
+```javascript
+function getScrollParent(node) {
+  if (node == null || node === document.body || node === document.documentElement) {
+    return null; // default to viewport
+  }
+  if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
+    const overflow = getComputedStyle(node).overflow;
+    if (overflow !== 'visible' && overflow !== 'clip') {
+      return node;
+    }
+  }
+  return getScrollParent(node.parentNode);
+}
+
+document.querySelectorAll('.sticky-container').forEach(container => {
+  const root = getScrollParent(container);
+  
+  const topOffset = parseFloat(getComputedStyle(container).top) || 0;
+  
+  const observer = new IntersectionObserver(
+    ([e]) => {
+      // Toggle the fallback class on the sticky header container
+      e.target.classList.toggle('is-stuck', e.intersectionRatio < 1);
+    },
+    { 
+      root: root,
+      threshold: [1],
+      rootMargin: `-${topOffset + 1}px 0px 0px 0px` 
+    }
+  );
+  
+  observer.observe(container);
+});
+```
+
+*Note: This generic IntersectionObserver pattern can also be used as a polyfill for the `scroll-state(scrollable)` query.*
diff --git a/guides/user-experience/state-aware-sticky-headers/negative-demo.html b/guides/user-experience/state-aware-sticky-headers/negative-demo.html
new file mode 100644
index 000000000..1ad9da93c
--- /dev/null
+++ b/guides/user-experience/state-aware-sticky-headers/negative-demo.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Legacy Header Implementation</title>
+  <style>
+    body {
+      font-family: serif;
+      margin: 0;
+      padding: 0;
+      background: #fff;
+      color: #000;
+    }
+
+    .header-wrapper {
+      width: 100%;
+      z-index: 9999;
+    }
+
+    .header-content {
+      background: #ccc;
+      padding: 40px;
+      font-size: 32px;
+      text-align: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 10px;
+      font-size: 18px;
+      background: #222;
+      color: #fff;
+    }
+
+    .spacer {
+      height: 120px;
+      display: none;
+    }
+
+    .show-spacer {
+      display: block;
+    }
+
+    .content-area {
+      padding: 50px;
+      background: #eee;
+    }
+
+    .block {
+      height: 400px;
+      margin-bottom: 20px;
+      border: 5px solid red;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="header" class="header-wrapper">
+    <div class="header-content">
+      Old School Header
+    </div>
+  </div>
+  <div id="spacer" class="spacer"></div>
+
+  <div class="content-area">
+    <div class="block">Content Block 1</div>
+    <div class="block">Content Block 2</div>
+    <div class="block">Content Block 3</div>
+    <div class="block">Content Block 4</div>
+    <div class="block">Content Block 5</div>
+  </div>
+
+  <script>
+    window.onscroll = function() {
+      var header = document.getElementById("header");
+      var spacer = document.getElementById("spacer");
+      if (window.pageYOffset > 50) {
+        header.classList.add("fixed");
+        spacer.classList.add("show-spacer");
+        document.body.style.paddingTop = "10px";
+      } else {
+        header.classList.remove("fixed");
+        spacer.classList.remove("show-spacer");
+        document.body.style.paddingTop = "0px";
+      }
+    };
+  </script>
+</body>
+</html>
diff --git a/guides/user-experience/state-aware-sticky-headers/tasks/task.md b/guides/user-experience/state-aware-sticky-headers/tasks/task.md
new file mode 100644
index 000000000..71029b1fd
--- /dev/null
+++ b/guides/user-experience/state-aware-sticky-headers/tasks/task.md
@@ -0,0 +1,5 @@
+---
+base_app: daily-grind
+---
+- Add new section headers inside the main content area of the page (e.g., within the cards or sections). These headers should stick to the top when scrolling. Use the class `sticky-container` for the container and `sticky-header` for the header. To avoid collisions with the existing site navigation, use a named container. When the headers are stuck at the top, change their background color to blue and add a shadow. Ensure there is enough scrollable content *above* the first sticky header so that it is not stuck on initial page load. The implementation should assume the document/viewport is the scroll root.
+- Add sticky headers to the main sections of the page that stick to the top of the viewport as I scroll down. I want them to look compact and distinct when they are stuck, maybe a blue background with a shadow. Please use modern CSS container queries instead of Javascript so it's performant. Ensure there is enough scrollable content *above* the first sticky header so that it is not stuck on initial page load.
