Cyberpunk Neon

# Visual style: Cyberpunk Neon

A futuristic cyberpunk style with neon glow effects, dark backgrounds, and high-tech UI elements. Ideal for games, tech products, and creative studios.

## Philosophy
Cyberpunk Neon style draws from cyberpunk sci-fi aesthetics, creating a futuristic feel through neon glow, dark backgrounds, and high contrast.

Core principles:
- Neon glow: Core elements stand out with glow effects
- Dark dominance: Near-black backgrounds make neon colors more striking
- High-tech feel: Grids, scanlines, and other elements enhance the tech atmosphere
- Color impact: Cyan, magenta, yellow, and other high-saturation colors

## Do
- Use dark backgrounds bg-[#0a0a0f] or bg-gray-950
- Use shadow-[0_0_20px_rgba(0,255,255,0.5)] to create glow effects
- Text glow with [text-shadow:0_0_10px_currentColor]
- Glowing borders with border border-cyan-400 shadow-[0_0_10px_rgba(0,255,255,0.3)]
- Use scanline background effects for tech feel
- Enhance glow on button hover hover:shadow-[0_0_30px_rgba(0,255,255,0.7)]
- Gradient text bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent

## Don't
- Do not use light/white backgrounds
- Do not use low-saturation colors
- Do not use regular shadows like shadow-md (must use glow shadows)
- Do not use warm color schemes (unless for warning/error colors)
- Do not use overly large border radius rounded-2xl, rounded-3xl
- Do not use soft/warm design language

## Rules for the AI
STYLE: Cyberpunk Neon
TYPE: Futuristic sci-fi interface

MUST USE:
- Dark background: bg-[#0a0a0f] or bg-gray-950
- Neon glow shadows: shadow-[0_0_20px_rgba(0,255,255,0.5)]
- Text glow: style={{textShadow: '0 0 10px currentColor'}}
- Glowing borders: border border-cyan-400 shadow-[0_0_10px...]
- High saturation colors: cyan-400, fuchsia-500, yellow-400
- font-mono for tech text
- uppercase tracking-wider for labels

MUST AVOID:
- Light/white backgrounds
- Low saturation colors
- Regular shadows (shadow-md)
- Warm color schemes
- Large rounded corners (rounded-2xl+)
- Soft/friendly design language

COLOR RULES:
- Primary: Cyan (#00ffff)
- Accent: Magenta (#ff00ff)
- Background: Near-black (#0a0a0f)
- Text: White with glow
- Borders: Primary color with glow

SPECIAL EFFECTS:
- Scan line overlay for tech feel
- Pulsing elements with animate-pulse
- Glow intensifies on hover

---

## Animation Rules

### Interaction Physics
- **Unstable Neon**: Glow effects may pulse subtly. Use `animate-pulse` sparingly. NO high-frequency flickering that hurts readability.
- **Glitch Press**: Active state uses OFFSET translation + color inversion, NOT scale. Example: `active:translate-x-[2px] active:-translate-y-[1px] active:text-fuchsia-400`
- **CRT Scanline**: Cards increase scanline density/visibility on hover, simulating terminal scanning.
- **Fast & Raw**: Standard interactions use `duration-100` to `duration-150`. Only scan sweeps may use up to `duration-300`.

### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Button hover | 100-150ms | ease-out |
| Glow pulse | 2-3s | ease-in-out (loop) |
| Scan sweep | 150-300ms | ease-out |
| Glitch press | instant | — |

---

## Typography

| Element | Classes |
|---------|---------|
| Headers | font-mono font-bold uppercase tracking-[0.2em] |
| Labels | text-xs font-mono uppercase tracking-wider |
| Body | font-mono text-sm |
| Code/Data | font-mono tabular-nums |

---

## Forbidden Patterns

| Pattern | Reason |
|---------|--------|
| Light/white backgrounds | Destroys neon visibility |
| Low saturation colors | Loses cyberpunk intensity |
| shadow-md, shadow-lg | No blur shadows — only glow |
| Warm color schemes | Contradicts cold tech aesthetic |
| rounded-2xl, rounded-3xl | Too soft, not technical enough |
| Soft/friendly language | Breaks immersion |
| scale transforms on active | Use glitch offset instead |

---

## Self-Verification Checklist

Before outputting code, verify:
- [ ] Background is near-black (#0a0a0f or bg-gray-950)
- [ ] Neon glows use shadow-[0_0_Xpx_rgba(...)] format
- [ ] Text has textShadow glow effect where appropriate
- [ ] High saturation colors only (cyan, magenta, yellow, green)
- [ ] font-mono for all text elements
- [ ] Active states use glitch offset, NOT scale
- [ ] Rounded corners are rounded-sm or rounded-none
- [ ] Transitions are fast: duration-100 to duration-150