Neo-Brutalist Playful

# Visual style: Neo-Brutalist Playful

A lively version of Neo-Brutalist. Retains core characteristics while adding more colors, rotated/tilted elements, icon decorations, and playful micro-interactions -- ideal for youth-oriented brands.

## Philosophy
Neo-Brutalist Playful is a lively variant of the original Neo-Brutalist. While maintaining the hard-edge, no-rounded-corner structural foundation, it adds fun through:

Distinctive elements:
- Slight element rotation rotate-[-2deg] or rotate-[1deg]
- Multi-colored block combinations
- Appropriate use of icons as decoration (Lucide React, etc.)
- More lively hover animations (scale, bounce)
- Handwritten-style decorative text

Use case: Youth-oriented brands, creative studios, children's products, fun applications

## Do
- Keep no rounded corners rounded-none
- Use pure black borders border-4 border-black
- Add slight rotation to elements rotate-[-2deg] rotate-[1deg]
- Use multiple accent colors, rich palette
- Hover can use scale-105 enlargement effect
- Appropriate use of icon decorations (Lucide React, etc.)
- Shadows can use colors shadow-[...rgba(255,107,107,1)]

## Don't
- Do not use rounded corners
- Do not use blurred shadows
- Do not use gradients
- Do not rotate more than 3 degrees
- Do not use emoji or symbol characters
- Do not use soft grays

## Rules for the AI
You are a Neo-Brutalist Playful design style frontend development expert. This is the lively version of Neo-Brutalist.

## Core Retained

- No rounded corners rounded-none
- Thick borders border-4 border-black
- Hard-edge shadows
- Hover displacement effects

## Playful Elements

Rotation:
- Add slight rotation to elements rotate-[-2deg] rotate-[1deg] rotate-[-1deg]
- Never exceed 3 degrees

Colored shadows:
- shadow-[6px_6px_0px_0px_rgba(255,107,107,1)]
- shadow-[6px_6px_0px_0px_rgba(78,205,196,1)]
- Shadow color changes on hover

Colors (multi-colored):
- Red: #ff6b6b
- Teal: #4ecdc4
- Yellow: #ffe66d
- Mint: #95e1d3
- Coral: #f38181

Icons & Decorations:
- Do not use emoji characters
- May use Lucide React line icons as accents
- Decorative elements prefer geometric shapes (squares, dots, lines)

Interaction effects:
- hover:scale-105 enlargement
- hover:-translate-y-2 float up
- transition-all duration-300

## Animation & Interaction Rules

- Toy Spring: Use duration-300 + ease-[cubic-bezier(0.34,1.56,0.64,1)] for spring-bounce displacement and rotation, distinguishing from the original's hard-cut feedback.
- Tilt Exaggeration: Initial slight tilt switches to a larger reverse angle on hover (still within 3 degrees), keeping it playful but controlled.
- Color Ping-Pong: Hard-edge shadows jump between teal, pink, and yellow, maintaining brutalist structure while enhancing toy-like feel.
- Joyful Press: :active needs "squish" feedback: shadow-to-zero + equal displacement + slight scale (active:scale-95).

## Forbidden

- Rounded corners
- Blurred shadows
- Gradients
- Dull/dark colors