用途：css-debug 是一个系统化 CSS 调试技能，帮助开发者按流程定位并修复 CSS 问题，而不是靠猜测。它把问题分为特异性、继承、布局、层叠、自定义属性、包含与性能等类别，并给出对应的诊断技术。
主要能力：
- 特异性分析：计算选择器权重，检查源码顺序、@layer 与 !important 的影响，用 :where() 归零或 @layer 控制优先级。
- 继承追踪：沿 DOM 向上查找继承属性来源，并区分不继承属性（如 background、border、padding、display、opacity）。
- 布局调试：诊断溢出、意外尺寸、外边距折叠，检查 box-sizing、flex/grid 尺寸、min-width 与 contain。
- 层叠上下文：列出创建层叠上下文的条件，强调 z-index 只在同一上下文内比较，可用 isolation: isolate 建立显式上下文。
- 自定义属性：追踪 --var 声明、继承、@property 注册与 var() 回退。
- 性能：识别布局抖动、CLS 与绘制开销，建议只动画 transform/opacity，使用 contain、content-visibility 与 aspect-ratio。
使用方式：按六步工作流执行——分类问题、隔离范围、应用诊断技术、定位根因、应用修复、验证无回归。隔离时可用 outline 技术，例如 * { outline: 1px solid red; }，或给元素加 data-debug 属性配合 [data-debug] 规则可视化盒模型；outline 不影响布局，优于 border。输出采用结构化诊断格式：BUG、CATEGORY、ROOT CAUSE、FILE、BEFORE、AFTER、WHY。
适用场景：样式被覆盖、子元素值异常、页面横向滚动、元素尺寸错误、z-index 失效、变量不解析、动画卡顿与 CLS 等。
限制：资料未提供安装命令、平台支持、收费与价格信息；该技能依赖人工或 AI 按流程诊断，不保证自动修复所有问题。