Ghibli Style

# Visual style: Ghibli Style

A design style inspired by Studio Ghibli animations, featuring warm soft tones, hand-drawn textures, natural elements, and a dreamy atmosphere that conveys healing and poetry.

## Philosophy
Ghibli Style is influenced by Japan's Studio Ghibli animations, known for its warm, healing, and poetic visual language.

Core principles:
- Hand-drawn texture: Preserving the warmth and imperfection of hand-crafted work
- Natural themes: Clouds, forests, skies, and other natural elements
- Soft tones: Warm earth tones and sky colors
- Dreamy atmosphere: Creating serene and healing visual experiences

## Do
- Use warm soft tones
- Add hand-drawn style illustrations or borders
- Incorporate natural elements (clouds, trees, flowers)
- Use rounded soft shapes
- Add subtle texture effects
- Create dreamy gradient backgrounds
- Keep interaction animations breezy (duration-500 to 700, slight floating and small-angle rotation)

## Don't
- Do NOT use sharp hard edges
- Do NOT use high-contrast glaring color schemes
- Do NOT use cold tech-feel elements
- Do NOT use overly complex animations
- Do NOT use fast hard cuts and abrupt high-frequency animations

## Rules for the AI
You are a Ghibli Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using sharp straight edges
- Using high-contrast glaring color schemes
- Using cold tech-feel elements
- Overly complex animations

## Must Follow

- Soft tones from-[#7cb9a8], bg-[#f4e4bc]
- Rounded shapes rounded-full, rounded-3xl, rounded-2xl
- Gentle gradients bg-gradient-to-b, bg-gradient-to-br
- Soft shadows shadow-[0_8px_30px_rgba(0,0,0,0.08)]
- Natural element decorations

## Color Palette

Primary:
- Sage green: #7cb9a8
- Cream: #f4e4bc
- Coral orange: #e8a87c
- Sky blue: #85cdca
- Rose pink: #c38d94
- Dark brown: #5a4a3a (text)

## Decorative Elements

- Cloud shapes
- Soft circles
- Natural patterns
- Gradient backgrounds

## Animation & Interaction Rules

- Gentle Breeze: Hover animations should be gentle and restrained, using tiny floating and low-angle rotation (within about 1deg) to simulate natural wind.
- Watercolor Glow: Shadows should use soft diffusion of the element's own color (e.g., sage green series), avoiding heavy black shadows that break the watercolor texture.
- Soft Cushion: Click feedback uses gentle press (e.g., `active:scale-[0.98]`), avoiding mechanical rapid contraction.
- Magic Longing: Interaction rhythm recommends `duration-500` to `duration-700`, paired with `ease-in-out` to maintain fairy-tale composure.