侘寂风

You are designing in Wabi-Sabi style.
- Warm paper-toned backgrounds: #f7f3ec, #f2ede4
- Ink-like text color: #3a3a3a
- Muted natural accents: moss green #8a9a7b, tea brown #b5a78c
- Always use serif fonts (font-serif)
- Extreme whitespace: py-32, large gaps between sections
- Ultra-thin borders: border-[#d4cdc5]/30
- Slow transitions: duration-500 or longer
- No bold colors, no heavy shadows, no decorative elements
- Embrace asymmetry and imperfection
- Think "zen garden" and "ceramic pottery"

## Animation & Interaction Rules
- Absolute Stillness: 侘寂的核心是静谧。绝对禁止使用任何 `translate`（位移）、`scale`（缩放）或弹簧动画。元素必须像石头一样静静待在原处。
- Shadowless Void: 放弃所有营造现代立体感的 `box-shadow`。界面的层次仅通过大量留白和非常微弱的边框线来表达。
- Dust Breathing: 所有交互必须极其极其缓慢。强制使用 `duration-1000` 甚至更长的过渡时间（如 `duration-[1500ms]`），配合 `ease-in-out`。让背景颜色的加深看起来像自然光线缓慢变暗。
- Ink Fading: 悬停（Hover）时，文本的颜色不要发生突变，而是通过改变透明度（如从 `opacity-60` 缓慢过渡到 `opacity-100`），模拟墨迹在时间中的显现。

/* Wabi-Sabi */
:root {
  --wabi-bg: #f7f3ec;
  --wabi-surface: #f2ede4;
  --wabi-text: #3a3a3a;
  --wabi-muted: #8a8278;
  --wabi-moss: #8a9a7b;
  --wabi-tea: #b5a78c;
  --wabi-clay: #8b6f4e;
  --wabi-border: #d4cdc5;
}
@keyframes wabi-sabi-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.wabi-sabi-card {
  position: relative;
  overflow: hidden;
}

.wabi-sabi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(58, 58, 58, 0.05), transparent);
  pointer-events: none;
}

.wabi-sabi-card:hover::before {
  opacity: 1;
}

.wabi-sabi-gradient {
  background: linear-gradient(135deg, #3a3a3a, #8a9a7b);
}

.wabi-sabi-gradient-text {
  background: linear-gradient(135deg, #3a3a3a, #8a9a7b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wabi-sabi-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(58, 58, 58, 0.08);
}

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

.wabi-sabi-animate-in {
  animation: wabi-sabi-fade-in 0.5s ease-out both;
}

.wabi-sabi-focus { outline: 2px solid var(--wabi-sabi-primary, currentColor); outline-offset: 2px; }

/* Responsive utilities */
@media (prefers-reduced-motion: reduce) {
  .wabi-sabi-animate-in {
    animation: none;
  }
}

@media (min-width: 768px) {
  .wabi-sabi-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
}

/* Print styles */
@media print {
  .wabi-sabi-gradient,
  .wabi-sabi-frosted {
    background: none;
    backdrop-filter: none;
  }
}

{
  "border": {
    "width": "border",
    "color": "border-[#d4cdc5]/30",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-sm",
    "lg": "shadow-md",
    "none": "shadow-none",
    "hover": "hover:shadow-sm",
    "focus": "focus:ring-1 focus:ring-[#8a9a7b]/20",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-opacity duration-1000",
    "active": "active:opacity-80"
  },
  "typography": {
    "heading": "font-serif font-light tracking-wide",
    "body": "font-serif font-light",
    "mono": "font-mono font-light",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-6xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32 lg:py-40",
    "container": "px-8 md:px-16 lg:px-24",
    "card": "p-8 md:p-10",
    "gap": {
      "sm": "gap-6",
      "md": "gap-10",
      "lg": "gap-16"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#f7f3ec]",
      "secondary": "bg-[#f2ede4]",
      "accent": [
        "bg-[#8a9a7b]/10",
        "bg-[#b5a78c]/10",
        "bg-[#8b6f4e]/10"
      ]
    },
    "text": {
      "primary": "text-[#3a3a3a]",
      "secondary": "text-[#8a8278]",
      "muted": "text-[#b5a78c]"
    },
    "button": {
      "primary": "bg-transparent border border-[#3a3a3a]/30 text-[#3a3a3a]",
      "secondary": "bg-transparent border border-[#d4cdc5] text-[#8a8278]",
      "danger": "bg-transparent border border-[#8b6f4e] text-[#8b6f4e]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-black",
      "bg-gray-900",
      "bg-slate-900",
      "font-black",
      "font-extrabold",
      "font-bold",
      "border-4",
      "border-[3px]",
      "border-[4px]",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "text-6xl",
      "text-7xl",
      "text-8xl",
      "animate-bounce",
      "animate-spin",
      "animate-pulse"
    ],
    "patterns": [
      "^bg-(?:black|gray-9|slate-9)",
      "^font-(?:black|extrabold|bold)$",
      "^shadow-(?:lg|xl|2xl)$",
      "^bg-gradient",
      "^animate-(?:bounce|spin|pulse)$",
      "^text-(?:[6-9]xl|\\dxl)$"
    ],
    "reasons": {
      "bg-black": "Wabi-sabi uses warm paper tones, not pure darkness",
      "font-black": "Only light and extralight weights convey wabi-sabi restraint",
      "shadow-lg": "Shadows must be minimal or absent for quiet aesthetic",
      "bg-gradient-to-r": "No gradients; use flat, natural tones",
      "animate-bounce": "No energetic animations; only slow fades allowed"
    }
  },
  "required": {
    "button": [
      "bg-transparent",
      "transition-colors",
      "duration-500"
    ],
    "card": [
      "transition-colors"
    ],
    "input": [
      "bg-transparent",
      "focus:outline-none"
    ]
  }
}