GitHub 风格

你是一个 GitHub Style 设计风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 使用渐变背景 bg-gradient-*
- 使用大圆角 rounded-2xl, rounded-3xl (头像除外)
- 使用重阴影 shadow-lg, shadow-xl
- 使用非语义化装饰色彩
- 使用衬线字体
- 使用过大字体或过宽间距
- 使用动感动画

## 必须遵守

- 蓝色 #0969da 作为主交互色
- 背景: #ffffff, #f6f8fa
- 文字: #1f2328 (主), #656d76 (次)
- 边框: border-[#d0d7de]
- 圆角: rounded-md (6px)
- 代码: font-mono bg-[#f6f8fa]

## 功能色语义

- 成功/合并: #1f883d (绿)
- 警告/等待: #9a6700 (黄)
- 危险/删除: #cf222e (红)
- 交互/链接: #0969da (蓝)

## 配色

灰度系统：
- 文字: #1f2328
- 次要文字: #656d76
- 浅文字: #8b949e
- 边框: #d0d7de
- 浅背景: #f6f8fa
- 背景: #ffffff
- 深色导航: #24292f

## Animation & Interaction Rules

- Extreme Utility: 交互以状态表达为先，避免位移/放大等吸睛动效，时长控制在 duration-75 到 150。
- Micro-Tactility: 按钮按下仅提供轻微确认（如 active:scale-[0.98] + 背景加深），不过度拟物。
- A11y Focus Rings: 焦点态必须提供清晰 ring（focus:ring-4 + 品牌蓝/绿透明度），不能只改边框色。
- Subtle Borders: 卡片 hover 优先微调背景与边框深浅，不使用明显投影。  

## 自检

每次生成代码后检查：
1. 没有使用渐变
2. 圆角统一 rounded-md
3. 阴影极轻或无
4. 颜色使用语义正确
5. 整体感觉简洁专业

/* GitHub Style 全局样式 */

:root {
  --gh-blue: #0969da;
  --gh-green: #1f883d;
  --gh-yellow: #9a6700;
  --gh-red: #cf222e;
  --gh-fg: #1f2328;
  --gh-fg-muted: #656d76;
  --gh-bg: #ffffff;
  --gh-bg-subtle: #f6f8fa;
  --gh-border: #d0d7de;
  --gh-nav-bg: #24292f;
}

/* 基础文字样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  color: var(--gh-fg);
  line-height: 1.5;
  font-size: 14px;
}

/* 代码块 */
.gh-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 85%;
  background: var(--gh-bg-subtle);
  border-radius: 6px;
  padding: 0.2em 0.4em;
}

/* 仓库名称链接 */
.gh-repo-link {
  color: var(--gh-blue);
  font-weight: 600;
  text-decoration: none;
}
.gh-repo-link:hover {
  text-decoration: underline;
}

/* 标签/徽章 */
.gh-label {
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: 2em;
}

/* 分隔线 */
.gh-divider {
  border: none;
  border: 1px solid var(--gh-border);
  margin: 1rem 0;
}
@keyframes github-style-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes github-style-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.github-style-card {
  position: relative;
  overflow: hidden;
}

.github-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(9, 105, 218, 0.05), transparent);
  pointer-events: none;
}

.github-style-card:hover::before {
  opacity: 1;
}

.github-style-gradient {
  background: linear-gradient(135deg, #0969da, #1f883d);
}

.github-style-gradient-text {
  background: linear-gradient(135deg, #0969da, #1f883d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.github-style-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(9, 105, 218, 0.08);
}

.github-style-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.github-style-animate-in {
  animation: github-style-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-[#d0d7de]",
    "radius": "rounded-md",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_1px_0_rgba(27,31,36,0.04)]",
    "md": "shadow-[0_1px_3px_rgba(27,31,36,0.12)]",
    "lg": "shadow-[0_3px_6px_rgba(140,149,159,0.15)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_1px_3px_rgba(27,31,36,0.12)]",
    "focus": "focus:shadow-[0_0_0_3px_rgba(9,105,218,0.3)]",
    "colored": {
      "blue": "shadow-[0_0_0_3px_rgba(9,105,218,0.3)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-150",
    "active": "active:bg-[#e8e8e8]",
    "hoverOpacity": "hover:bg-[#f6f8fa]"
  },
  "typography": {
    "heading": "font-semibold text-[#1f2328]",
    "body": "text-sm text-[#1f2328]",
    "mono": "font-mono text-sm text-[#1f2328]",
    "sizes": {
      "hero": "text-3xl md:text-4xl",
      "h1": "text-2xl md:text-3xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-6 md:py-8",
    "container": "px-4 md:px-6",
    "card": "p-3 md:p-4",
    "gap": {
      "sm": "gap-2",
      "md": "gap-3",
      "lg": "gap-4"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-[#f6f8fa]",
      "accent": [
        "bg-[#0969da]",
        "bg-[#1f883d]",
        "bg-[#cf222e]"
      ]
    },
    "text": {
      "primary": "text-[#1f2328]",
      "secondary": "text-[#656d76]",
      "muted": "text-[#8b949e]"
    },
    "button": {
      "primary": "bg-[#1f883d] text-white border border-[#1b7f37]",
      "secondary": "bg-[#f6f8fa] text-[#1f2328] border border-[#d0d7de]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "bg-gradient-to-b",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "font-serif",
      "text-4xl",
      "text-5xl",
      "text-6xl",
      "text-7xl",
      "blur-sm",
      "blur-md",
      "blur-lg"
    ],
    "patterns": [
      "^rounded-(?:2xl|3xl|full)",
      "^bg-gradient",
      "^shadow-(?:lg|xl|2xl)",
      "^text-(?:[4-9]xl)",
      "^blur-"
    ],
    "reasons": {
      "rounded-2xl": "GitHub uses consistent rounded-md (6px) corners",
      "rounded-full": "GitHub reserves rounded-full for avatars and labels only",
      "bg-gradient-to-r": "GitHub uses flat, solid colors without gradients",
      "shadow-lg": "GitHub uses minimal shadows; heavy shadows break the clean aesthetic",
      "font-serif": "GitHub uses system sans-serif and monospace fonts only",
      "blur-sm": "GitHub does not use blur effects; keep everything crisp"
    }
  },
  "required": {
    "button": [
      "rounded-md",
      "text-sm font-semibold",
      "border",
      "shadow-[0_1px_0_rgba(27,31,36,0.04)]",
      "transition-colors duration-150"
    ],
    "card": [
      "bg-white",
      "border border-[#d0d7de]",
      "rounded-md"
    ],
    "input": [
      "bg-[#f6f8fa]",
      "border border-[#d0d7de]",
      "rounded-md",
      "text-sm text-[#1f2328]",
      "focus:bg-white",
      "focus:border-[#0969da]",
      "focus:shadow-[0_0_0_3px_rgba(9,105,218,0.3)]",
      "focus:outline-none"
    ]
  }
}