水彩艺术风

You are a Watercolor Art design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Sharp edges (rounded-none, rounded-sm)
- Hard offset shadows (shadow-[Npx_Npx_0px])
- Thick borders (border-2 or higher)
- Neon or highly saturated colors
- Monospace fonts (font-mono)
- Uppercase text (uppercase)
- Pure black backgrounds (bg-black)

## Must Follow

- Warm paper background bg-[#faf6f0]
- Rose pink as primary color #d4a0a0
- Serif fonts font-serif with generous tracking
- Soft organic corners rounded-2xl (buttons) / rounded-3xl (cards)
- Ultra-soft shadows using rgba with low opacity (0.08-0.18)
- Delicate borders with 15-25% opacity
- Radial gradient backgrounds for watercolor wash effects
- Generous whitespace throughout

## Color Palette

Primary:
- Rose Wash: #d4a0a0
- Warm Paper: #faf6f0
- Cerulean: #7bb8d4
- Sage Green: #8cc5a8
- Lavender Bloom: #c3a0d4
- Ochre Gold: #e8c87a
- Text: #5a3e3e

## Unique Elements

- Paper grain texture overlay (feTurbulence SVG filter)
- Radial gradient buttons simulating pigment pooling
- Watercolor wash section backgrounds (multiple radial-gradients)
- Botanical watercolor accent decorations (leaf/flower shapes)
- Organic blob-like border-radius values

## Animation & Interaction Rules

- Pigment Bloom: Abandon hard 3D translate on hover. The core interaction simulates "watercolor bleeding." Use a large, soft, same-palette colored shadow that spreads outward on hover (e.g., `hover:shadow-[0_10px_40px_rgba(212,160,160,0.5)]`), like pigment dissolving on wet paper. Never use `hover:scale` or `hover:-translate-y`.
- Damp Paper Effect: On card hover, shift background opacity or tint slightly (e.g., `bg-[#faf6f0]/80` → `bg-[#faf6f0]/95`), simulating paper absorbing moisture.
- Liquid Slowness: Watercolor flows slowly. Enforce long transitions: `duration-500` or `duration-700` with `ease-in-out`.
- Soft Press: On `:active`, do not use aggressive scale-down. Add a subtle inset shadow (`active:shadow-[inset_0_2px_4px_rgba(90,62,62,0.1)]`) to simulate a brush pressing gently on damp paper surface.

/* Watercolor Art Global Styles */

:root {
  --wc-rose: #d4a0a0;
  --wc-paper: #faf6f0;
  --wc-cerulean: #7bb8d4;
  --wc-sage: #8cc5a8;
  --wc-lavender: #c3a0d4;
  --wc-ochre: #e8c87a;
  --wc-text: #5a3e3e;
}

/* Paper grain texture overlay */
.wc-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Watercolor wash section background */
.wc-wash {
  position: relative;
  overflow: hidden;
}
.wc-wash::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 30% 50%, var(--wc-rose) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 30%, var(--wc-cerulean) 0%, transparent 50%);
  opacity: 0.06;
  pointer-events: none;
}

/* Organic bleeding edge border radius */
.wc-bleed {
  border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
}

/* Botanical accent decoration */
.wc-botanical::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--wc-sage);
  opacity: 0.12;
  border-radius: 0 100% 0 100%;
  filter: blur(4px);
}
@keyframes watercolor-art-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes watercolor-art-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.watercolor-art-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(212, 160, 160, 0.08);
}

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

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

{
  "border": {
    "width": "border",
    "color": "border-[#d4a0a0]/15",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_12px_rgba(212,160,160,0.08)]",
    "md": "shadow-[0_4px_20px_rgba(212,160,160,0.12)]",
    "lg": "shadow-[0_8px_32px_rgba(212,160,160,0.18)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_8px_32px_rgba(212,160,160,0.18)]",
    "focus": "focus:shadow-[0_0_0_3px_rgba(212,160,160,0.10)]",
    "colored": {
      "rose": "shadow-[0_4px_20px_rgba(212,160,160,0.15)]",
      "cerulean": "shadow-[0_4px_20px_rgba(123,184,212,0.15)]",
      "sage": "shadow-[0_4px_20px_rgba(140,197,168,0.15)]",
      "lavender": "shadow-[0_4px_20px_rgba(195,160,212,0.15)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-in-out",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-[1.02]",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-serif font-semibold tracking-wide",
    "body": "font-serif",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-6 md:px-12 lg:px-16",
    "card": "p-6 md:p-8 lg:p-10",
    "gap": {
      "sm": "gap-4 md:gap-5",
      "md": "gap-6 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#faf6f0]",
      "secondary": "bg-[#f3ede4]",
      "accent": [
        "bg-[#d4a0a0]/15",
        "bg-[#7bb8d4]/15",
        "bg-[#8cc5a8]/15",
        "bg-[#c3a0d4]/15"
      ]
    },
    "text": {
      "primary": "text-[#5a3e3e]",
      "secondary": "text-[#d4a0a0]",
      "muted": "text-[#5a3e3e]/40"
    },
    "button": {
      "primary": "bg-[#d4a0a0] text-[#5a3e3e] shadow-[0_4px_20px_rgba(212,160,160,0.25)]",
      "secondary": "bg-[#7bb8d4]/70 text-[#2a4a5a] shadow-[0_4px_20px_rgba(123,184,212,0.20)]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "shadow-[2px_2px_0px",
      "shadow-[3px_3px_0px",
      "shadow-[4px_4px_0px",
      "font-mono",
      "bg-black",
      "bg-[#0a0a1a]",
      "border-2",
      "border-4",
      "uppercase"
    ],
    "patterns": [
      "^shadow-\\[\\d+px_\\d+px_0px",
      "^font-mono$",
      "^bg-black$",
      "^border-[2-4]$",
      "^uppercase$"
    ],
    "reasons": {
      "font-mono": "Watercolor Art uses serif fonts for elegance, not monospace",
      "bg-black": "Watercolor Art uses warm paper backgrounds (#faf6f0), never dark",
      "rounded-none": "Watercolor Art uses soft organic corners (2xl/3xl), never sharp edges",
      "uppercase": "Watercolor Art uses elegant mixed-case, never aggressive uppercase",
      "border-2": "Watercolor Art uses delicate single-pixel borders with low opacity"
    }
  },
  "required": {
    "button": [
      "rounded-2xl",
      "font-serif",
      "transition-all duration-500 ease-in-out"
    ],
    "card": [
      "rounded-3xl",
      "bg-[#faf6f0]",
      "border border-[#d4a0a0]/15"
    ],
    "input": [
      "rounded-2xl",
      "border border-[#d4a0a0]/20",
      "bg-[#faf6f0]",
      "font-serif",
      "focus:outline-none"
    ]
  }
}