diff --git a/.agents/skills/impeccable/reference/editorial.md b/.agents/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.agents/skills/impeccable/reference/editorial.md
+++ b/.agents/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.agents/skills/impeccable/scripts/live-accept.mjs b/.agents/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.agents/skills/impeccable/scripts/live-accept.mjs
+++ b/.agents/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.claude/skills/impeccable/reference/editorial.md b/.claude/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.claude/skills/impeccable/reference/editorial.md
+++ b/.claude/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.claude/skills/impeccable/scripts/live-accept.mjs b/.claude/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.claude/skills/impeccable/scripts/live-accept.mjs
+++ b/.claude/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.cursor/skills/impeccable/reference/editorial.md b/.cursor/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.cursor/skills/impeccable/reference/editorial.md
+++ b/.cursor/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.cursor/skills/impeccable/scripts/live-accept.mjs b/.cursor/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.cursor/skills/impeccable/scripts/live-accept.mjs
+++ b/.cursor/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.gemini/skills/impeccable/reference/editorial.md b/.gemini/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.gemini/skills/impeccable/reference/editorial.md
+++ b/.gemini/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.gemini/skills/impeccable/scripts/live-accept.mjs b/.gemini/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.gemini/skills/impeccable/scripts/live-accept.mjs
+++ b/.gemini/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.github/skills/impeccable/reference/editorial.md b/.github/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.github/skills/impeccable/reference/editorial.md
+++ b/.github/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.github/skills/impeccable/scripts/live-accept.mjs b/.github/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.github/skills/impeccable/scripts/live-accept.mjs
+++ b/.github/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.kiro/skills/impeccable/reference/editorial.md b/.kiro/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.kiro/skills/impeccable/reference/editorial.md
+++ b/.kiro/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.kiro/skills/impeccable/scripts/live-accept.mjs b/.kiro/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.kiro/skills/impeccable/scripts/live-accept.mjs
+++ b/.kiro/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.opencode/skills/impeccable/reference/editorial.md b/.opencode/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.opencode/skills/impeccable/reference/editorial.md
+++ b/.opencode/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.opencode/skills/impeccable/scripts/live-accept.mjs b/.opencode/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.opencode/skills/impeccable/scripts/live-accept.mjs
+++ b/.opencode/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.pi/skills/impeccable/reference/editorial.md b/.pi/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.pi/skills/impeccable/reference/editorial.md
+++ b/.pi/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.pi/skills/impeccable/scripts/live-accept.mjs b/.pi/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.pi/skills/impeccable/scripts/live-accept.mjs
+++ b/.pi/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.rovodev/skills/impeccable/reference/editorial.md b/.rovodev/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.rovodev/skills/impeccable/reference/editorial.md
+++ b/.rovodev/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.rovodev/skills/impeccable/scripts/live-accept.mjs b/.rovodev/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.rovodev/skills/impeccable/scripts/live-accept.mjs
+++ b/.rovodev/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.trae-cn/skills/impeccable/reference/editorial.md b/.trae-cn/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.trae-cn/skills/impeccable/reference/editorial.md
+++ b/.trae-cn/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.trae-cn/skills/impeccable/scripts/live-accept.mjs b/.trae-cn/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.trae-cn/skills/impeccable/scripts/live-accept.mjs
+++ b/.trae-cn/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/.trae/skills/impeccable/reference/editorial.md b/.trae/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/.trae/skills/impeccable/reference/editorial.md
+++ b/.trae/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/.trae/skills/impeccable/scripts/live-accept.mjs b/.trae/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/.trae/skills/impeccable/scripts/live-accept.mjs
+++ b/.trae/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/package.json b/package.json
index 647f69d7f..0e5cba6e8 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "dev": "bun run server/index.js",
     "preview": "bun run build && wrangler pages dev",
     "deploy": "bun run build && wrangler pages deploy build/",
-    "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
+    "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-accept.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
     "prepack": "cp README.md README.repo.md && cp README.npm.md README.md",
     "postpack": "cp README.repo.md README.md && rm README.repo.md",
     "screenshot": "bun run scripts/screenshot-antipatterns.js",
diff --git a/source/skills/impeccable/reference/editorial.md b/source/skills/impeccable/reference/editorial.md
index 50bc0ec3b..11dc39602 100644
--- a/source/skills/impeccable/reference/editorial.md
+++ b/source/skills/impeccable/reference/editorial.md
@@ -51,6 +51,16 @@ Editorial has permission for Committed, Full palette, and Drenched strategies. U
 - Don't center everything. Left-aligned in asymmetric compositions feels more designed.
 - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` — breakpoint-free responsiveness.
 
+## Imagery
+
+Editorial register leans on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+- **For greenfield work without local assets, reach for stock imagery** from Unsplash (`https://images.unsplash.com/photo-{id}?w=…&q=80`), Pexels, or similar. A well-chosen Unsplash photo is a valid deliverable — colored placeholder blocks are not.
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel".
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one.
+- **Don't stop at zero** when the brief implies imagery. A moto forum without motorcycle photos, a restaurant without food, a hotel without a view — these read as stubs, not as editorial restraint.
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish".
+
 ## Motion
 
 - One well-orchestrated page-load with staggered reveals beats scattered micro-interactions.
diff --git a/source/skills/impeccable/scripts/live-accept.mjs b/source/skills/impeccable/scripts/live-accept.mjs
index b93b60f6b..af22180aa 100644
--- a/source/skills/impeccable/scripts/live-accept.mjs
+++ b/source/skills/impeccable/scripts/live-accept.mjs
@@ -192,91 +192,117 @@ function findMarkerBlock(id, lines) {
 }
 
 /**
- * Extract the original element content from within the variant wrapper.
- * Returns an array of lines (still indented as stored in the wrapper).
- *
- * CSS inside a <style> block can reference `data-impeccable-variant="N"` via
- * `@scope`, which would falsely match the HTML div we're looking for — so skip
- * style regions entirely.
+ * Join wrapper lines into a single string with `<style>` elements removed so
+ * marker matching and div-depth tracking aren't confused by:
+ *   - CSS `@scope ([data-impeccable-variant="N"])` strings that look like the
+ *     HTML marker we're searching for
+ *   - JSX self-closing `<style ... />` (no separate `</style>` to close on)
+ *   - Same-line `<style>…</style>` blocks
+ *   - Multi-line `<style>\n…\n</style>` blocks
  */
-function extractOriginal(lines, block) {
-  let inOriginal = false;
+function stripStyleAndJoin(lines, block) {
+  const out = [];
   let inStyle = false;
-  let depth = 0;
-  const content = [];
-
   for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
+    let line = lines[i];
 
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
 
-    if (!inOriginal && line.includes('data-impeccable-variant="original"')) {
-      inOriginal = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="original">
-    }
-
-    if (inOriginal) {
-      // Count div opens/closes to find the matching </div>
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // this is the closing </div> of the original wrapper
-      content.push(line);
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
   }
+  return out.join('\n');
+}
 
-  return content;
+/**
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
+ */
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
+  if (!openMatch) return null;
+
+  const tagName = openMatch[1];
+  const innerStart = openMatch.index + openMatch[0].length;
+
+  // Match any opener or closer of this tag name after innerStart.
+  // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
+  const tagRe = new RegExp('<(?:/)?' + tagName + '\\b[^>]*>', 'g');
+  tagRe.lastIndex = innerStart;
+
+  let depth = 1;
+  let m;
+  while ((m = tagRe.exec(text))) {
+    const isClose = m[0].startsWith('</');
+    const isSelfClose = !isClose && /\/\s*>$/.test(m[0]);
+    if (isClose) {
+      depth--;
+      if (depth === 0) return text.slice(innerStart, m.index);
+    } else if (!isSelfClose) {
+      depth++;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract the original element content from within the variant wrapper.
+ * Returns an array of lines.
+ */
+function extractOriginal(lines, block) {
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
+  if (inner === null) return [];
+  return inner.split('\n');
 }
 
 /**
  * Extract a specific variant's inner content (stripping the wrapper div).
  * Returns an array of lines, or null if not found.
- *
- * Skip <style> blocks — see extractOriginal for why.
  */
 function extractVariant(lines, block, variantNum) {
-  let inVariant = false;
-  let inStyle = false;
-  let depth = 0;
-  const content = [];
-
-  for (let i = block.start; i <= block.end; i++) {
-    const line = lines[i];
-
-    if (!inStyle && /<style[\s>]/.test(line)) { inStyle = true; continue; }
-    if (inStyle) {
-      if (line.trimStart().startsWith('</style>')) inStyle = false;
-      continue;
-    }
-
-    if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) {
-      inVariant = true;
-      depth = 1;
-      continue; // skip the opening <div data-impeccable-variant="N">
-    }
-
-    if (inVariant) {
-      const opens = (line.match(/<div[\s>]/g) || []).length;
-      const closes = (line.match(/<\/div\s*>/g) || []).length;
-      depth += opens - closes;
-
-      if (depth <= 0) break; // closing </div> of the variant wrapper
-      content.push(line);
-    }
-  }
-
-  return content.length > 0 ? content : null;
+  const text = stripStyleAndJoin(lines, block);
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
+  if (inner === null) return null;
+  const result = inner.split('\n');
+  // Collapse a lone empty leading/trailing line (common after string splice).
+  while (result.length > 1 && result[0].trim() === '') result.shift();
+  while (result.length > 1 && result[result.length - 1].trim() === '') result.pop();
+  return result.length > 0 ? result : null;
 }
 
 /**
  * Extract the colocated <style> block content (between the style tags).
  * Returns an array of CSS lines, or null if no style block found.
+ *
+ * Handles three shapes of `<style data-impeccable-css="ID" ...>`:
+ *   1. Self-closing: `<style ... />` — no body; return null (nothing to carbonize).
+ *   2. Same-line open+close: `<style>...</style>` — return the inner content.
+ *   3. Multi-line: `<style>` on one line, `</style>` on a later line — return
+ *      the lines between them.
  */
 function extractCss(lines, block, id) {
   const styleAttr = 'data-impeccable-css="' + id + '"';
@@ -287,6 +313,14 @@ function extractCss(lines, block, id) {
     const line = lines[i];
 
     if (!inStyle && line.includes(styleAttr)) {
+      // Self-closing: nothing to carbonize.
+      if (/<style\b[^>]*\/\s*>/.test(line)) return null;
+      // Same-line open + close: extract inner text.
+      const sameLine = line.match(/<style\b[^>]*>([\s\S]*?)<\/style\s*>/);
+      if (sameLine) {
+        const inner = sameLine[1];
+        return inner.length > 0 ? inner.split('\n') : null;
+      }
       inStyle = true;
       continue; // skip the <style> opening tag
     }
diff --git a/tests/live-accept.test.mjs b/tests/live-accept.test.mjs
new file mode 100644
index 000000000..91fb905a0
--- /dev/null
+++ b/tests/live-accept.test.mjs
@@ -0,0 +1,149 @@
+/**
+ * Tests for live-accept.mjs — the deterministic accept/discard helper.
+ * Run with: node --test tests/live-accept.test.mjs
+ */
+
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtempSync, writeFileSync, readFileSync, rmSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { tmpdir } from 'node:os';
+import { fileURLToPath } from 'node:url';
+import { execFileSync } from 'node:child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ACCEPT = resolve(__dirname, '..', 'source/skills/impeccable/scripts/live-accept.mjs');
+
+function runAccept(cwd, args) {
+  try {
+    const out = execFileSync('node', [ACCEPT, ...args], {
+      cwd,
+      encoding: 'utf-8',
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+    return JSON.parse(out.trim());
+  } catch (err) {
+    const body = err.stdout?.toString().trim() || err.stderr?.toString().trim() || '';
+    return JSON.parse(body || '{}');
+  }
+}
+
+describe('live-accept — style-element edge cases', () => {
+  let tmp;
+  beforeEach(() => { tmp = mkdtempSync(join(tmpdir(), 'impeccable-accept-test-')); });
+  afterEach(() => { rmSync(tmp, { recursive: true, force: true }); });
+
+  // Historical bug: extractVariant flipped into "inStyle" mode on <style and
+  // scanned for </style> line-by-line. JSX self-closing <style ... /> has no
+  // separate closer, so it got stuck forever and missed data-impeccable-variant
+  // divs that came after.
+  it('finds the accepted variant after a JSX self-closing <style /> block', () => {
+    const html = `<body>
+  <!-- impeccable-variants-start SELFC -->
+  <div data-impeccable-variants="SELFC" data-impeccable-variant-count="3" style="display: contents">
+    <div data-impeccable-variant="original">
+      <p class="hook">original text</p>
+    </div>
+    <style data-impeccable-css="SELFC" dangerouslySetInnerHTML={{ __html: '@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }' }} />
+    <div data-impeccable-variant="1">
+      <p class="hook">variant one</p>
+    </div>
+    <div data-impeccable-variant="2" style="display: none">
+      <p class="hook">variant two</p>
+    </div>
+    <div data-impeccable-variant="3" style="display: none">
+      <p class="hook">variant three</p>
+    </div>
+  </div>
+  <!-- impeccable-variants-end SELFC -->
+</body>`;
+    writeFileSync(join(tmp, 'page.html'), html);
+
+    const result = runAccept(tmp, ['--id', 'SELFC', '--variant', '2']);
+    assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
+
+    const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
+    // Self-closing style has no extractable CSS body, so there's nothing to carbonize —
+    // no carbonize block, no data-impeccable-variant wrapper (it would serve no purpose).
+    assert.ok(!after.includes('impeccable-carbonize-start'), 'no carbonize block (self-closing style has no body)');
+    assert.ok(!after.includes('impeccable-variants-start'), 'variant markers removed');
+    assert.ok(after.includes('variant two'), 'variant 2 content kept');
+    assert.ok(!after.includes('variant three'), 'other variant content dropped');
+    assert.ok(!after.includes('variant one'), 'other variant content dropped');
+    assert.ok(!after.includes('original text'), 'original content dropped');
+  });
+
+  // Variant: same-line <style>…</style> block should also be treated as a
+  // single skipped unit; the line has both open and close tags.
+  it('finds the accepted variant after a single-line <style>…</style> block', () => {
+    const html = `<body>
+  <!-- impeccable-variants-start ONELINE -->
+  <div data-impeccable-variants="ONELINE" data-impeccable-variant-count="3" style="display: contents">
+    <div data-impeccable-variant="original"><p class="hook">original</p></div>
+    <style data-impeccable-css="ONELINE">@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }</style>
+    <div data-impeccable-variant="1"><p class="hook">variant one</p></div>
+    <div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
+    <div data-impeccable-variant="3" style="display: none"><p class="hook">variant three</p></div>
+  </div>
+  <!-- impeccable-variants-end ONELINE -->
+</body>`;
+    writeFileSync(join(tmp, 'page.html'), html);
+
+    const result = runAccept(tmp, ['--id', 'ONELINE', '--variant', '3']);
+    assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
+
+    const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
+    assert.ok(after.includes('data-impeccable-variant="3"'), 'accepted wrapper for variant 3 present');
+    assert.ok(after.includes('variant three'), 'variant 3 content kept');
+    assert.ok(!after.includes('variant two'), 'other variant content dropped');
+  });
+
+  // Baseline: the standard multi-line <style>...</style> case must keep working.
+  it('finds the accepted variant after a multi-line <style>…</style> block (regression baseline)', () => {
+    const html = `<body>
+  <!-- impeccable-variants-start MULTI -->
+  <div data-impeccable-variants="MULTI" data-impeccable-variant-count="3" style="display: contents">
+    <div data-impeccable-variant="original"><p class="hook">original</p></div>
+    <style data-impeccable-css="MULTI">
+      @scope ([data-impeccable-variant="1"]) { .hook { color: red; } }
+      @scope ([data-impeccable-variant="2"]) { .hook { color: green; } }
+    </style>
+    <div data-impeccable-variant="1"><p class="hook">variant one</p></div>
+    <div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
+  </div>
+  <!-- impeccable-variants-end MULTI -->
+</body>`;
+    writeFileSync(join(tmp, 'page.html'), html);
+
+    const result = runAccept(tmp, ['--id', 'MULTI', '--variant', '1']);
+    assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
+
+    const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
+    assert.ok(after.includes('data-impeccable-variant="1"'), 'accepted wrapper for variant 1 present');
+    assert.ok(after.includes('variant one'), 'variant 1 content kept');
+  });
+
+  // Discard must restore the original element after a self-closing <style />,
+  // proving extractOriginal also survives the style pattern.
+  it('discard restores the original element after a JSX self-closing <style />', () => {
+    const html = `<body>
+  <!-- impeccable-variants-start DISC -->
+  <div data-impeccable-variants="DISC" data-impeccable-variant-count="2" style="display: contents">
+    <div data-impeccable-variant="original"><p class="hook">ORIGINAL CONTENT</p></div>
+    <style data-impeccable-css="DISC" dangerouslySetInnerHTML={{ __html: '@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }' }} />
+    <div data-impeccable-variant="1"><p class="hook">variant one</p></div>
+    <div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
+  </div>
+  <!-- impeccable-variants-end DISC -->
+</body>`;
+    writeFileSync(join(tmp, 'page.html'), html);
+
+    const result = runAccept(tmp, ['--id', 'DISC', '--discard']);
+    assert.equal(result.handled, true, `discard should succeed: ${JSON.stringify(result)}`);
+
+    const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
+    assert.ok(after.includes('ORIGINAL CONTENT'), 'original restored');
+    assert.ok(!after.includes('impeccable-variants-start'), 'wrapper markers gone');
+    assert.ok(!after.includes('variant one'), 'variants dropped');
+  });
+});