Skeuomorphism

# Visual style: Skeuomorphism

A digital design style that simulates real-world objects through textures, lighting, and materials to mimic physical items, bringing familiarity and intuitive experiences.

## Philosophy
Skeuomorphism is a design approach that simulates the appearance and behavior of real-world objects, widely used in early iOS and digital products.

Core principles:
- Realistic simulation: Interface elements mimic the appearance and feel of real objects
- Material textures: Real material textures like leather, wood, and metal
- Light and shadow depth: Creating dimensionality through highlights and shadows
- Familiar intuition: Leveraging users' real-world knowledge to reduce learning costs

## Do
- Use real material textures (leather, wood, metal)
- Add realistic light and shadow effects
- Simulate physical button press feedback
- Use gradients to create dimensionality
- Add delicate edge highlights
- Simulate the form and proportions of real objects

## Don't
- Do NOT use flat solid color blocks
- Do NOT omit shadows and highlights
- Do NOT use overly simplified icons
- Do NOT ignore material and texture details

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

## Absolute Prohibitions

- Using flat solid color blocks
- Omitting shadow and highlight effects
- Using overly simplified icons
- Ignoring material and texture details

## Must Follow

- Gradient backgrounds bg-gradient-to-b from-gray-100 to-gray-300
- Complex shadows shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.8)]
- Border layers border border-gray-400
- Moderate radii rounded-lg
- Press feedback active:translate-y-[1px]

## Color Palette

- Use natural material tones
- Leather brown: #8b7355
- Wood beige: #d4c4a8
- Metal silver: #c0c0c0
- Paper white: #f5f5dc

## Light & Shadow Principles

- Top highlight (inset 0 1px 0 rgba(255,255,255,0.8))
- Bottom dark edge (inset 0 -1px 0 rgba(0,0,0,0.1))
- Outer drop shadow (0 4px 8px rgba(0,0,0,0.3))

## Animation & Interaction Rules

- Tactile Resistance: Active state uses short press and tighter outer shadow, simulating key damping, no bouncy scaling.
- Fixed Illuminant: Top highlight and bottom dark edge remain stable in hover and active, ensuring light source always comes from above.
- Texture Shimmer: Material layer allows slight background-position shift, expressing light changes on brushed metal or leather texture.
- Embossed Focus: Input focus prioritizes deepening inset shadow rather than strong outer glow outline.