diff --git a/BUILD-PLAN-issue-13.md b/BUILD-PLAN-issue-13.md
new file mode 100644
index 0000000..08b1ceb
--- /dev/null
+++ b/BUILD-PLAN-issue-13.md
@@ -0,0 +1,12 @@
+# BUILD-PLAN-issue-13.md — Modern CSS feature adoption scan
+
+**Card:** https://github.com/nujovich/mint-radar/issues/13
+
+**Decision:** PLAN already defined 4 concrete code milestones (planned). Decision not required.
+
+## Milestones
+
+- [ ] Milestone 1 — Extend audit prompt in lib/prompts.mjs with STEP 14: modern CSS feature scan (detect @property, @layer, @container, @supports, nesting, color-mix, @scope, :has()), report presence/absence with adoption suggestions
+- [ ] Milestone 2 — Add modernFeatures field to AuditReport type in lib/types.ts (Record<string, {used: boolean, suggestion?: string}>)
+- [ ] Milestone 3 — Wire modern features results in playground UI as "Modern CSS Adoption" section
+- [ ] Milestone 4 — Add test fixture with modern and legacy CSS and tests in lib/**tests**/
diff --git a/components/AuditView.tsx b/components/AuditView.tsx
index 2086793..8ab2b76 100644
--- a/components/AuditView.tsx
+++ b/components/AuditView.tsx
@@ -2,7 +2,10 @@
 
 import { useState } from 'react'
 import type { AuditReport, ColorDecision, UserDecisions } from '@/lib/types'
-import { collectLintGroups } from '@/lib/audit-summary.mjs'
+import {
+  collectLintGroups,
+  collectModernFeatures,
+} from '@/lib/audit-summary.mjs'
 
 interface Props {
   audit: AuditReport
@@ -53,6 +56,8 @@ export default function AuditView({ audit, onResolve }: Props) {
   const motionDurations = audit.motion?.durations?.suggestedScale ?? {}
   const motionEasings = audit.motion?.easings?.suggestedScale ?? {}
   const lintGroups = collectLintGroups(audit)
+  const modernFeatures = collectModernFeatures(audit)
+  const adoptedFeatureCount = modernFeatures.filter((f) => f.used).length
 
   const chaosColor =
     audit.chaosScore <= 3
@@ -882,6 +887,87 @@ export default function AuditView({ audit, onResolve }: Props) {
         </section>
       )}
 
+      {/* Modern CSS adoption */}
+      {modernFeatures.length > 0 && (
+        <section>
+          <SectionLabel>
+            Modern CSS Adoption — {adoptedFeatureCount} of{' '}
+            {modernFeatures.length} adopted
+          </SectionLabel>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {modernFeatures.map((feature) => (
+              <div
+                key={feature.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: 12,
+                  padding: '10px 14px',
+                  borderRadius: 8,
+                  background: 'var(--panel)',
+                  border: '1px solid var(--border)',
+                }}
+              >
+                <span
+                  style={{
+                    flexShrink: 0,
+                    width: 12,
+                    height: 12,
+                    marginTop: 3,
+                    borderRadius: '50%',
+                    background: feature.used ? '#4ade80' : 'var(--surface-2)',
+                    border: feature.used ? 'none' : '1px solid var(--border)',
+                  }}
+                />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'baseline',
+                      gap: 8,
+                    }}
+                  >
+                    <code
+                      style={{
+                        fontSize: 12,
+                        fontFamily: 'var(--mono)',
+                        color: 'var(--text)',
+                      }}
+                    >
+                      {feature.label}
+                    </code>
+                    <span
+                      style={{
+                        fontSize: 10,
+                        fontWeight: 600,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em',
+                        color: feature.used ? '#4ade80' : 'var(--text-faint)',
+                      }}
+                    >
+                      {feature.used ? 'adopted' : 'not adopted'}
+                    </span>
+                  </div>
+                  {!feature.used && feature.suggestion && (
+                    <div
+                      style={{
+                        fontSize: 11,
+                        color: 'var(--text-muted)',
+                        lineHeight: 1.55,
+                        marginTop: 3,
+                      }}
+                    >
+                      {feature.suggestion}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
       {/* CTA */}
       <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
         <button
diff --git a/lib/__fixtures__/modern-features.css b/lib/__fixtures__/modern-features.css
new file mode 100644
index 0000000..9f3f26b
--- /dev/null
+++ b/lib/__fixtures__/modern-features.css
@@ -0,0 +1,78 @@
+/* Fixture for STEP 14 - modern CSS feature adoption scan.
+   Uses all eight tracked modern features plus a legacy block
+   that exercises none of them (so every id reports used: false
+   there and the scan can suggest adoption). */
+
+/* property: typed custom property registration. */
+@property --brand-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #6366f1;
+}
+
+/* layer: cascade layers in statement form. */
+@layer reset, base, components;
+
+/* layer: cascade layers in block form. */
+@layer base {
+  body {
+    margin: 0;
+    font-family: system-ui;
+  }
+}
+
+/* container: container-type plus a container query. */
+.product-card {
+  container-type: inline-size;
+}
+
+@container (min-width: 400px) {
+  .product-card {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* supports: feature query. */
+@supports (display: grid) {
+  .product-grid {
+    display: grid;
+  }
+}
+
+/* nesting: native CSS nesting with the & selector. */
+.alert {
+  padding: 1rem;
+
+  & .alert-title {
+    font-weight: 600;
+  }
+}
+
+/* color-mix: runtime color derivation. */
+.theme-accent {
+  background-color: color-mix(in srgb, #6366f1 50%, white);
+}
+
+/* scope: scoped component styles. */
+@scope (.pricing) {
+  .price {
+    color: var(--brand-color);
+  }
+}
+
+/* has: relational pseudo-class. */
+.gallery:has(> img) {
+  display: grid;
+}
+
+/* Legacy block: no modern features, so every tracked id is absent here. */
+.legacy-sidebar {
+  float: left;
+  width: 240px;
+}
+
+.legacy-clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
diff --git a/lib/__tests__/audit-summary.test.mjs b/lib/__tests__/audit-summary.test.mjs
index e0d43d4..2333ed3 100644
--- a/lib/__tests__/audit-summary.test.mjs
+++ b/lib/__tests__/audit-summary.test.mjs
@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { formatLintSummary, collectLintGroups } from '../audit-summary.mjs'
+import {
+  formatLintSummary,
+  collectLintGroups,
+  collectModernFeatures,
+} from '../audit-summary.mjs'
 
 describe('formatLintSummary', () => {
   it('returns empty string when no linting fields are present', () => {
@@ -125,3 +129,85 @@ describe('collectLintGroups', () => {
     ])
   })
 })
+
+describe('collectModernFeatures', () => {
+  it('returns an empty array when modernFeatures is absent', () => {
+    expect(collectModernFeatures({ brand: 'x' })).toEqual([])
+  })
+
+  it('returns an empty array when modernFeatures is an empty object', () => {
+    expect(collectModernFeatures({ modernFeatures: {} })).toEqual([])
+  })
+
+  it('returns all eight features in a stable order with labels', () => {
+    const features = collectModernFeatures({
+      modernFeatures: {
+        property: { used: true },
+        layer: { used: false },
+        container: { used: false },
+        supports: { used: true },
+        nesting: { used: false },
+        'color-mix': { used: false },
+        scope: { used: false },
+        has: { used: true },
+      },
+    })
+    expect(features.map((f) => f.id)).toEqual([
+      'property',
+      'layer',
+      'container',
+      'supports',
+      'nesting',
+      'color-mix',
+      'scope',
+      'has',
+    ])
+    expect(features.map((f) => f.label)).toEqual([
+      '@property',
+      '@layer',
+      '@container',
+      '@supports',
+      'Nesting',
+      'color-mix()',
+      '@scope',
+      ':has()',
+    ])
+  })
+
+  it('normalizes used to a boolean and carries suggestion only when not used', () => {
+    const features = collectModernFeatures({
+      modernFeatures: {
+        property: { used: true, suggestion: 'should be ignored' },
+        layer: {
+          used: false,
+          suggestion: 'Consider @layer to organize the cascade',
+        },
+      },
+    })
+    expect(features[0]).toEqual({
+      id: 'property',
+      label: '@property',
+      used: true,
+      suggestion: 'should be ignored',
+    })
+    expect(features[1]).toEqual({
+      id: 'layer',
+      label: '@layer',
+      used: false,
+      suggestion: 'Consider @layer to organize the cascade',
+    })
+  })
+
+  it('defaults a missing feature entry to unused without a suggestion', () => {
+    const features = collectModernFeatures({
+      modernFeatures: { property: { used: true } },
+    })
+    const layer = features.find((f) => f.id === 'layer')
+    expect(layer).toEqual({
+      id: 'layer',
+      label: '@layer',
+      used: false,
+      suggestion: undefined,
+    })
+  })
+})
diff --git a/lib/__tests__/css-auditor.test.mjs b/lib/__tests__/css-auditor.test.mjs
index 6f1c35b..9104fa6 100644
--- a/lib/__tests__/css-auditor.test.mjs
+++ b/lib/__tests__/css-auditor.test.mjs
@@ -659,3 +659,106 @@ describe('CssAuditor propertyTypeIssues integration', () => {
     expect(result.propertyTypeIssues).toBeUndefined()
   })
 })
+
+describe('buildAuditPrompt modern features', () => {
+  it('includes STEP 14 for modern CSS feature scan', () => {
+    const css = 'body { color: red; }'
+    const prompt = buildAuditPrompt(css)
+    expect(prompt.content).toContain('STEP 14')
+    expect(prompt.content).toContain('MODERN CSS FEATURE SCAN')
+  })
+
+  it('documents all eight tracked feature ids', () => {
+    const css = 'body { color: red; }'
+    const prompt = buildAuditPrompt(css)
+    for (const id of [
+      'property',
+      'layer',
+      'container',
+      'supports',
+      'nesting',
+      'color-mix',
+      'scope',
+      'has',
+    ]) {
+      expect(prompt.content).toContain('"' + id + '"')
+    }
+  })
+
+  it('instructs LLM to record used flags and adoption suggestions', () => {
+    const css = 'body { color: red; }'
+    const prompt = buildAuditPrompt(css)
+    expect(prompt.content).toContain('"used"')
+    expect(prompt.content).toContain('"suggestion"')
+  })
+
+  it('includes modernFeatures in the output example', () => {
+    const css = 'body { color: red; }'
+    const prompt = buildAuditPrompt(css)
+    expect(prompt.content).toContain('modernFeatures')
+    expect(prompt.content).toContain('"color-mix"')
+  })
+})
+
+describe('CssAuditor modernFeatures integration', () => {
+  const baseReport = {
+    brand: 'test',
+    chaosScore: 3,
+    summary: '',
+    colorClusters: [],
+    fonts: [],
+    spacing: { found: [], suggestedScale: {}, nonScaleValues: [] },
+    lineHeights: { found: [], suggestedScale: {}, unitlessMix: false },
+    layoutA11yIssues: [],
+    modernPracticeIssues: [],
+    adoptionSuggestions: [],
+    overflowSafetyIssues: [],
+    propertyTypeIssues: [],
+  }
+
+  const auditWith = async (report) => {
+    const sendPromptSpy = vi.fn().mockResolvedValue(JSON.stringify(report))
+    const auditor = new CssAuditor(
+      { sendPrompt: sendPromptSpy },
+      { maxTokens: { audit: 3000, parse: 4000, export: 6000 } }
+    )
+    return auditor.audit({ content: 'test', system: 'sys' })
+  }
+
+  it('audit parses response with modernFeatures', async () => {
+    const modernFeatures = {
+      property: { used: true },
+      layer: {
+        used: false,
+        suggestion: 'No @layer rules found - consider organizing the cascade',
+      },
+      container: { used: true },
+      supports: { used: true },
+      nesting: {
+        used: false,
+        suggestion: 'Consider native CSS nesting to reduce selector repetition',
+      },
+      'color-mix': {
+        used: false,
+        suggestion: 'Consider color-mix() for runtime derivation',
+      },
+      scope: {
+        used: false,
+        suggestion: 'Consider @scope to avoid selector leakage',
+      },
+      has: { used: true },
+    }
+    const result = await auditWith({ ...baseReport, modernFeatures })
+    expect(result.modernFeatures).toEqual(modernFeatures)
+  })
+
+  it('audit handles empty modernFeatures object', async () => {
+    const result = await auditWith({ ...baseReport, modernFeatures: {} })
+    expect(result.modernFeatures).toEqual({})
+  })
+
+  it('audit handles missing modernFeatures gracefully', async () => {
+    const result = await auditWith(baseReport)
+    expect(result.modernFeatures).toBeUndefined()
+  })
+})
diff --git a/lib/__tests__/prompts.test.mjs b/lib/__tests__/prompts.test.mjs
index 0edee3b..484fe76 100644
--- a/lib/__tests__/prompts.test.mjs
+++ b/lib/__tests__/prompts.test.mjs
@@ -153,7 +153,7 @@ describe('buildAuditPrompt', () => {
     expect(content).toContain('</example>')
   })
 
-  it('includes all thirteen analysis steps', () => {
+  it('includes all fourteen analysis steps', () => {
     const content = buildAuditPrompt(css).content
     expect(content).toContain('STEP 1')
     expect(content).toContain('STEP 2')
@@ -168,6 +168,7 @@ describe('buildAuditPrompt', () => {
     expect(content).toContain('STEP 11')
     expect(content).toContain('STEP 12')
     expect(content).toContain('STEP 13')
+    expect(content).toContain('STEP 14')
   })
 
   it('covers all required JSON output fields in the example', () => {
@@ -181,6 +182,7 @@ describe('buildAuditPrompt', () => {
     expect(content).toContain('"lineHeights"')
     expect(content).toContain('"motion"')
     expect(content).toContain('"propertyTypeIssues"')
+    expect(content).toContain('"modernFeatures"')
   })
 
   it('includes all allowed semantic color names', () => {
@@ -610,3 +612,29 @@ describe('buildAuditPrompt lint issue contract', () => {
     }
   )
 })
+
+describe('buildAuditPrompt with the modern features fixture', () => {
+  const fixture = readFileSync(
+    new URL('../__fixtures__/modern-features.css', import.meta.url),
+    'utf8'
+  )
+
+  it('embeds the fixture CSS in the prompt', () => {
+    const content = buildAuditPrompt(fixture).content
+    expect(content).toContain('@layer reset, base, components')
+    expect(content).toContain('container-type: inline-size')
+    expect(content).toContain('color-mix(in srgb')
+    expect(content).toContain('@scope (.pricing)')
+    expect(content).toContain('.gallery:has(> img)')
+    expect(content).toContain('.legacy-sidebar')
+  })
+
+  it('preserves modern feature anchors through preprocessing', () => {
+    const processed = preprocessCss(fixture)
+    expect(processed).toContain('@property --brand-color')
+    expect(processed).toContain('@container (min-width: 400px)')
+    expect(processed).toContain('@supports (display: grid)')
+    expect(processed).toContain('& .alert-title')
+    expect(processed).not.toContain('/*')
+  })
+})
diff --git a/lib/audit-summary.mjs b/lib/audit-summary.mjs
index e7bc6fc..ce3b035 100644
--- a/lib/audit-summary.mjs
+++ b/lib/audit-summary.mjs
@@ -1,6 +1,17 @@
 // Shared, dependency-free helpers for summarizing an AuditReport.
 // Imported by the CLI (bin/mint-ds.mjs) and the web AuditView; keep it build-step free.
 
+const MODERN_FEATURES = [
+  { id: 'property', label: '@property' },
+  { id: 'layer', label: '@layer' },
+  { id: 'container', label: '@container' },
+  { id: 'supports', label: '@supports' },
+  { id: 'nesting', label: 'Nesting' },
+  { id: 'color-mix', label: 'color-mix()' },
+  { id: 'scope', label: '@scope' },
+  { id: 'has', label: ':has()' },
+]
+
 const LINT_CATEGORIES = [
   {
     key: 'layoutA11yIssues',
@@ -56,3 +67,22 @@ export function collectLintGroups(audit) {
   }
   return groups
 }
+
+/**
+ * Normalize the `modernFeatures` object into a stable, display-ready list.
+ * Returns one entry per feature ({ id, label, used, suggestion }) in a fixed
+ * order; [] when the audit carries no modernFeatures data.
+ */
+export function collectModernFeatures(audit) {
+  if (!audit?.modernFeatures) return []
+  if (Object.keys(audit.modernFeatures).length === 0) return []
+  return MODERN_FEATURES.map(({ id, label }) => {
+    const status = audit.modernFeatures[id] ?? { used: false }
+    return {
+      id,
+      label,
+      used: Boolean(status.used),
+      suggestion: status.suggestion,
+    }
+  })
+}
diff --git a/lib/prompts.mjs b/lib/prompts.mjs
index e90d3ee..d13152b 100644
--- a/lib/prompts.mjs
+++ b/lib/prompts.mjs
@@ -242,7 +242,26 @@ Scan every var() usage of a registered property for a fallback whose type contra
 13c. FOREIGN CONTEXT USAGE
 A registered property assigned to a CSS property its declared syntax cannot satisfy — a <length> property used in \`color\`, or a <color> property used in \`width\`. Report only when the mismatch is unambiguous from this stylesheet alone; skip any var() whose value may come from another stylesheet or from JavaScript. Record these with "rule": "property-type-mismatch" and "severity": "suggestion".
 
-Only report up to 8 propertyTypeIssues total. Prioritize invalid-initial-value, then fallback-type-mismatch, then property-type-mismatch. If the CSS contains no @property registrations, record an empty array.</instructions>
+Only report up to 8 propertyTypeIssues total. Prioritize invalid-initial-value, then fallback-type-mismatch, then property-type-mismatch. If the CSS contains no @property registrations, record an empty array.
+
+STEP 14 — MODERN CSS FEATURE SCAN
+Scan the CSS source for usage of modern CSS features. For each feature id below, detect whether the feature is present (used) or absent, and record it in the "modernFeatures" object with:
+- "used": true when the feature appears anywhere in the CSS source, false when it does not
+- "suggestion": include ONLY when "used" is false — a one-sentence adoption recommendation where the feature would apply (omit this field entirely when "used" is true)
+
+Feature ids and what to detect:
+- "property": @property at-rules registering typed custom properties
+- "layer": @layer cascade layers (statement or block form)
+- "container": @container queries or container-type / container-name declarations
+- "supports": @supports feature-query blocks
+- "nesting": native CSS nesting (a style rule nested inside another rule, with or without the & selector)
+- "color-mix": color-mix() function usage
+- "scope": @scope at-rules for scoped styles
+- "has": the :has() relational pseudo-class
+
+Record all eight feature ids every time, even when used is false. Suggestions are informational only and never contribute to the chaos score.
+
+</instructions>
 
 <output_format>
 Return ONLY a valid JSON object matching the structure in the example below. No markdown fences, no backticks, no text before or after the JSON.
@@ -316,7 +335,17 @@ Return ONLY a valid JSON object matching the structure in the example below. No
     { "selector": "@property --spacing-unit", "property": "initial-value", "rule": "invalid-initial-value", "severity": "warning", "reason": "Registered as \`<length>\` but \`initial-value: red\` is a \`<color>\` — the browser rejects this registration entirely", "propertyName": "--spacing-unit", "declaredSyntax": "<length>" },
     { "selector": ".button", "property": "background-color", "rule": "fallback-type-mismatch", "severity": "warning", "reason": "\`--my-color\` is registered as \`<color>\` but falls back to \`14px\` — the fallback can never apply", "propertyName": "--my-color", "declaredSyntax": "<color>" },
     { "selector": ".card", "property": "color", "rule": "property-type-mismatch", "severity": "suggestion", "reason": "\`--spacing-unit\` is registered as \`<length>\` but is used as a color value", "propertyName": "--spacing-unit", "declaredSyntax": "<length>" }
-  ]
+  ],
+  "modernFeatures": {
+    "property": { "used": true },
+    "layer": { "used": false, "suggestion": "No @layer rules found — consider organizing the cascade into reset, base, components, and utilities layers" },
+    "container": { "used": false, "suggestion": "No container queries found — consider @container for component-responsive behavior instead of media queries" },
+    "supports": { "used": true },
+    "nesting": { "used": false, "suggestion": "No CSS nesting found — consider native nesting to reduce selector repetition and improve readability" },
+    "color-mix": { "used": false, "suggestion": "No color-mix() usage found — consider it for runtime color derivation instead of precomputed color shades" },
+    "scope": { "used": false, "suggestion": "No @scope rules found — consider scoping component styles with @scope to avoid selector leakage" },
+    "has": { "used": true }
+  }
 }
 </example>
 </output_format>`
diff --git a/lib/types.ts b/lib/types.ts
index 7171834..df93672 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -169,6 +169,22 @@ export interface PropertyTypeIssue {
   declaredSyntax: string // the @property syntax descriptor, e.g. '<color>'
 }
 
+export interface ModernFeatureStatus {
+  used: boolean
+  suggestion?: string
+}
+
+export interface ModernFeatures {
+  property: ModernFeatureStatus // @property at-rules registering typed custom properties
+  layer: ModernFeatureStatus // @layer cascade layers (statement or block form)
+  container: ModernFeatureStatus // @container queries / container-type / container-name
+  supports: ModernFeatureStatus // @supports feature-query blocks
+  nesting: ModernFeatureStatus // native CSS nesting
+  'color-mix': ModernFeatureStatus // color-mix() function usage
+  scope: ModernFeatureStatus // @scope at-rules for scoped styles
+  has: ModernFeatureStatus // :has() relational pseudo-class
+}
+
 export interface AuditReport {
   brand: string
   chaosScore: number
@@ -183,6 +199,7 @@ export interface AuditReport {
   adoptionSuggestions?: AdoptionSuggestion[]
   overflowSafetyIssues?: OverflowSafetyIssue[]
   propertyTypeIssues?: PropertyTypeIssue[]
+  modernFeatures?: ModernFeatures
 }
 
 export interface ColorDecision {