赛璐璐动画风

You are designing in Cel Shading (Toon Shading) style.
- All elements MUST have 3px solid black borders: border-[3px] border-[#1a1a2e]
- Use hard offset shadows ONLY: shadow-[3px_3px_0_#1a1a2e] or shadow-[4px_4px_0_#1a1a2e]
- NO gradients, NO blur shadows, NO soft edges
- Flat saturated colors: #e63946, #4ea8de, #2ecc71, #f1c40f
- Text is always bold/black weight and uppercase
- Light background #fafaf5 with dark ink outlines
- Think "video game menu" or "cartoon UI"

## Animation & Interaction Rules

- Anime Physics: Use extremely short transitions (duration-75) to simulate 2D animation keyframes. Avoid silky smooth easing.
- Squash & Stretch: On :active, use cartoon physics — active:scale-x-110 active:scale-y-90 — combined with translate toward click direction.
- Zero-Blur Impact: On :active, hard shadow (shadow-[4px_4px_0_#1a1a2e]) must instantly snap to zero (active:shadow-none), creating a strong physical "hit" sensation.
- Toon Highlight: On hover, a white diagonal stripe (bg-white/30 -skew-x-12) sweeps across the button via translate-x from off-screen to [200%], simulating cel shading's hard specular highlight.
- Hover Lift: Elements can hover:-translate-y-1 with expanded shadow to "charge up" before clicking.

/* Cel Shading */
:root {
  --cel-bg: #fafaf5;
  --cel-ink: #1a1a2e;
  --cel-red: #e63946;
  --cel-blue: #4ea8de;
  --cel-green: #2ecc71;
  --cel-yellow: #f1c40f;
  --cel-purple: #9b59b6;
}

/* 高光扫过动画 */
.cel-shine {
  position: relative;
  overflow: hidden;
}

.cel-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -2rem;
  width: 2rem;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-12deg);
  transition: transform 0.3s linear;
}

.cel-shine:hover::after {
  transform: skewX(-12deg) translateX(400%);
}

/* 硬击动画 */
.cel-impact:active {
  transform: scaleX(1.1) scaleY(0.9) translate(2px, 4px);
  box-shadow: none !important;
  transition-duration: 75ms;
}
@keyframes cel-shading-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.cel-shading-gradient {
  background: linear-gradient(135deg, #1a1a2e, #e63946);
}

.cel-shading-gradient-text {
  background: linear-gradient(135deg, #1a1a2e, #e63946);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cel-shading-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 46, 0.08);
}

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

.cel-shading-animate-in {
  animation: cel-shading-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-[3px]",
    "color": "border-[#1a1a2e]",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[2px_2px_0_#1a1a2e]",
    "md": "shadow-[3px_3px_0_#1a1a2e]",
    "lg": "shadow-[4px_4px_0_#1a1a2e]",
    "none": "shadow-none",
    "hover": "hover:shadow-[1px_1px_0_#1a1a2e]",
    "focus": "focus:shadow-[3px_3px_0_#1a1a2e]",
    "colored": {
      "red": "shadow-[3px_3px_0_#e63946]",
      "blue": "shadow-[3px_3px_0_#4ea8de]",
      "green": "shadow-[3px_3px_0_#2ecc71]",
      "yellow": "shadow-[3px_3px_0_#f1c40f]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-150",
    "active": "active:translate-x-1 active:translate-y-1 active:shadow-none",
    "hoverTranslate": "hover:translate-x-0.5 hover:translate-y-0.5"
  },
  "typography": {
    "heading": "font-black uppercase tracking-tight",
    "body": "font-bold",
    "mono": "font-mono font-bold",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20",
    "container": "px-4 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-3",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#fafaf5]",
      "secondary": "bg-white",
      "accent": [
        "bg-[#e63946]",
        "bg-[#4ea8de]",
        "bg-[#2ecc71]",
        "bg-[#f1c40f]"
      ]
    },
    "text": {
      "primary": "text-[#1a1a2e]",
      "secondary": "text-[#1a1a2e]/60",
      "muted": "text-[#1a1a2e]/40"
    },
    "button": {
      "primary": "bg-[#e63946] text-white",
      "secondary": "bg-[#4ea8de] text-white",
      "danger": "bg-[#1a1a2e] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "bg-gradient-to-br",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "border",
      "border-[1px]",
      "font-light",
      "font-extralight",
      "font-thin",
      "opacity-50",
      "opacity-30"
    ],
    "patterns": [
      "^shadow-(?:sm|md|lg|xl|2xl)$",
      "^bg-gradient",
      "^rounded-(?:lg|xl|2xl|3xl|full)$",
      "^font-(?:light|extralight|thin)$"
    ],
    "reasons": {
      "shadow-md": "Only hard offset shadows allowed, no blur shadows",
      "bg-gradient-to-r": "Flat solid colors only, no gradients",
      "rounded-lg": "Sharp corners (rounded-none) for cartoon panel aesthetic",
      "font-light": "Bold and black weights only for impactful text"
    }
  },
  "required": {
    "button": [
      "border-[3px]",
      "border-[#1a1a2e]",
      "font-black",
      "uppercase"
    ],
    "card": [
      "border-[3px]",
      "border-[#1a1a2e]",
      "shadow-[3px_3px_0_#1a1a2e]"
    ],
    "input": [
      "border-[3px]",
      "border-[#1a1a2e]",
      "focus:outline-none"
    ]
  }
}