像素艺术风

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

## 绝对禁止

- 使用任何圆角 rounded-*（必须 rounded-none）
- 使用渐变 bg-gradient-*
- 使用柔和阴影 shadow-lg, shadow-xl
- 使用细边框 border, border-2
- 使用非 8-bit 调色板的颜色

## 必须遵守

- 无圆角 rounded-none
- 粗边框 border-4 border-[#1a1c2c]
- 硬边阴影 shadow-[4px_4px_0_#1a1c2c]
- 8-bit 调色板配色
- 大写字母 uppercase
- 按钮按下效果

## 配色（PICO-8 调色板）

主色调：
- 深蓝黑: #1a1c2c
- 浅灰: #f4f4f4

强调色：
- 红色: #ff004d
- 绿色: #00e436
- 蓝色: #29adff
- 黄色: #ffec27
- 橙色: #ffa300
- 粉色: #ff77a8
- 紫色: #7e2553

## 阴影

标准阴影：shadow-[4px_4px_0_#1a1c2c]
悬停阴影：shadow-[2px_2px_0_#1a1c2c]
彩色阴影：shadow-[4px_4px_0_#ff004d]

## 按钮交互

正常：shadow-[4px_4px_0_#1a1c2c]
悬停：translate-x-1 translate-y-1 shadow-[2px_2px_0_#1a1c2c]
按下：translate-x-1 translate-y-1 shadow-none

## 自检

每次生成代码后检查：
1. 没有任何圆角
2. 使用粗边框 border-4
3. 使用硬边阴影
4. 配色来自 8-bit 调色板
5. 整体感觉复古像素化

## Animation & Interaction Rules

- Absolute Zero: Every element must use `transition-none` — pixel games run on a state machine, not an animation engine. All visual changes are instantaneous hard cuts with no easing.
- Palette Swap: Hover replaces the primary palette color with another 8-bit color directly (e.g., `hover:bg-[#29adff]` replacing red with blue). Never use opacity transitions or intermediate states.
- Pixel Perfect Drop: Active state must be `active:translate-x-[4px] active:translate-y-[4px] active:shadow-none` — the pixel displacement amount MUST exactly equal the shadow offset. Mismatched values break the illusion.
- Outline Focus: Focus state uses inner color shadow instead of modern ring glow: `focus:shadow-[inset_0_0_0_3px_#29adff]`.

/* Pixel Art 全局样式 */

:root {
  --pixel-dark: #1a1c2c;
  --pixel-light: #f4f4f4;
  --pixel-red: #ff004d;
  --pixel-green: #00e436;
  --pixel-blue: #29adff;
  --pixel-yellow: #ffec27;
  --pixel-orange: #ffa300;
  --pixel-pink: #ff77a8;
  --pixel-purple: #7e2553;
}

/* 像素化渲染 */
.pixel-render {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 像素字体（需要引入 Press Start 2P 字体） */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.pixel-font {
  font-family: 'Press Start 2P', monospace;
}

/* 像素边框 */
.pixel-border {
  border: 4px solid var(--pixel-dark);
  border-radius: 0;
}

/* 像素阴影 */
.pixel-shadow {
  box-shadow: 4px 4px 0 var(--pixel-dark);
}

/* 像素按钮效果 */
.pixel-button {
  border: 4px solid var(--pixel-dark);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--pixel-dark);
  transition: all 0.1s ease;
}

.pixel-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--pixel-dark);
}

.pixel-button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* 像素闪烁动画 */
@keyframes pixel-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.pixel-blink {
  animation: pixel-blink 1s step-end infinite;
}
.pixel-art-card {
  position: relative;
  overflow: hidden;
}

.pixel-art-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 28, 44, 0.05), transparent);
  pointer-events: none;
}

.pixel-art-card:hover::before {
  opacity: 1;
}

.pixel-art-gradient {
  background: linear-gradient(135deg, #1a1c2c, #ff004d);
}

.pixel-art-gradient-text {
  background: linear-gradient(135deg, #1a1c2c, #ff004d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pixel-art-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 28, 44, 0.08);
}

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

.pixel-art-animate-in {
  animation: pixel-art-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-4",
    "color": "border-[#1a1c2c]",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[2px_2px_0_#1a1c2c]",
    "md": "shadow-[4px_4px_0_#1a1c2c]",
    "lg": "shadow-[6px_6px_0_#1a1c2c]",
    "none": "shadow-none",
    "hover": "hover:shadow-[2px_2px_0_#1a1c2c]",
    "focus": "focus:shadow-[4px_4px_0_#1a1c2c]",
    "colored": {
      "red": "shadow-[4px_4px_0_#ff004d]",
      "green": "shadow-[4px_4px_0_#00e436]",
      "blue": "shadow-[4px_4px_0_#29adff]",
      "yellow": "shadow-[4px_4px_0_#ffec27]"
    }
  },
  "interaction": {
    "transition": "transition-transform duration-100",
    "active": "active:translate-x-1 active:translate-y-1 active:shadow-none",
    "hoverTranslate": "hover:translate-x-1 hover:translate-y-1"
  },
  "typography": {
    "heading": "font-bold uppercase tracking-wider text-[#1a1c2c]",
    "body": "text-[#1a1c2c]",
    "mono": "font-mono text-[#1a1c2c]",
    "sizes": {
      "hero": "text-3xl md:text-5xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-base",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20",
    "container": "px-4 md:px-8",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#f4f4f4]",
      "secondary": "bg-white",
      "accent": [
        "bg-[#ff004d]",
        "bg-[#00e436]",
        "bg-[#29adff]",
        "bg-[#ffec27]"
      ]
    },
    "text": {
      "primary": "text-[#1a1c2c]",
      "secondary": "text-[#5f574f]",
      "muted": "text-[#8b8680]"
    },
    "button": {
      "primary": "bg-[#ff004d] text-white",
      "secondary": "bg-[#29adff] text-white",
      "danger": "bg-[#ff004d] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-gradient-to-r",
      "bg-gradient-to-br"
    ],
    "patterns": [
      "^rounded-(?:sm|md|lg|xl|2xl|3xl|full)",
      "^shadow-(?:lg|xl|2xl)",
      "^bg-gradient"
    ],
    "reasons": {
      "rounded-lg": "Pixel art style requires sharp corners (rounded-none)",
      "rounded-full": "Pixel art style requires sharp corners (rounded-none)",
      "shadow-lg": "Pixel art style uses hard-edge pixel shadows",
      "bg-gradient-to-r": "Pixel art style uses solid 8-bit colors, not gradients"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "bg-[#ff004d]",
      "border-4 border-[#1a1c2c]",
      "rounded-none",
      "text-white font-bold uppercase",
      "shadow-[4px_4px_0_#1a1c2c]",
      "hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0_#1a1c2c]",
      "active:translate-x-1 active:translate-y-1 active:shadow-none",
      "transition-all duration-100"
    ],
    "card": [
      "bg-white",
      "border-4 border-[#1a1c2c]",
      "rounded-none",
      "shadow-[4px_4px_0_#1a1c2c]"
    ],
    "input": [
      "bg-white",
      "border-4 border-[#1a1c2c]",
      "rounded-none",
      "text-[#1a1c2c] placeholder-[#8b8680]",
      "focus:outline-none focus:shadow-[inset_0_0_0_2px_#29adff]",
      "transition-all"
    ]
  }
}