日系清新风

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

## Absolutely Forbidden

- Heavy borders (border-2 or thicker)
- Neon or high-saturation colors
- Dark or black backgrounds
- Bold/heavy font weights (font-bold, font-semibold, font-black)
- Sharp corners (rounded-none, rounded-sm)
- Uppercase text
- Visible shadows (shadow-lg, shadow-xl)
- Crowded layouts without extreme whitespace

## Must Follow

- Rice-white background: bg-[#fafaf8] with optional linen texture
- Ma-based extreme whitespace: py-32+ between sections (this is THE core principle)
- Hairline borders only: border with opacity-30/40, warm neutral #d4d4cf
- Font weight: font-extralight or font-light exclusively
- Single botanical SVG line drawing accent per section
- Bottom-line only inputs with floating labels
- No shadows anywhere -- forms float in whitespace
- Slow transitions: duration-500 for meditative feel
- Warm neutral colors: #d4d4cf borders, #b0b8c4 muted text

## Color Palette

Primary:
- Sky Blue: #64b5f6
- Rice White: #fafaf8
- Mint Green: #98d8c8
- Gentle Pink: #ffb7c5
- Powder Blue: #b8d4e3
- Text: #4a5568
- Secondary text: #7a8a9e
- Muted: #b0b8c4
- Border: #d4d4cf

## Unique Elements

- Ma-based extreme whitespace (py-32+ sections)
- Hairline 0.5px borders at 30% opacity
- Botanical line-drawing SVG accents (one per section)
- Bottom-line only input fields with floating labels
- Linen/paper texture background pattern

## Animation & Interaction Rules

- Weightless Float: hover 仅允许极轻上浮（约 0.5px），避免重阴影和大位移。
- Airy Transitions: 颜色变化采用 duration-500 + ease-in-out，像晨雾中缓慢显现。
- Subtle Focus: 表单 focus 只调整发丝级边框颜色，不使用粗 ring 或强 glow。
- Tactile Click: active 态优先微调透明度和背景层，不使用明显缩放。

/* Japanese Fresh Global Styles */

:root {
  --jf-sky: #64b5f6;
  --jf-rice: #fafaf8;
  --jf-mint: #98d8c8;
  --jf-pink: #ffb7c5;
  --jf-powder: #b8d4e3;
  --jf-text: #4a5568;
  --jf-muted: #b0b8c4;
  --jf-border: #d4d4cf;
}

/* Linen paper texture */
.jf-linen {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' fill='%23fafaf8'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23e8e8e4' opacity='0.12'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8e8e4' opacity='0.08'/%3E%3C/svg%3E");
}

/* Hairline divider */
.jf-divider {
  height: 0.5px;
  background: var(--jf-border);
  opacity: 0.4;
}

/* Bottom-line input focus */
.jf-input-underline {
  border: none;
  border: 1px solid var(--jf-border);
  border-radius: 0;
  background: transparent;
}
.jf-input-underline:focus {
  border-color: var(--jf-sky);
  box-shadow: none;
  outline: none;
}

/* Ma-based section spacing */
.jf-ma-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/* Botanical SVG accent */
.jf-botanical {
  opacity: 0.12;
  stroke: var(--jf-muted);
  fill: none;
  stroke-width: 0.7;
}
@keyframes japanese-fresh-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.japanese-fresh-card {
  position: relative;
  overflow: hidden;
}

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

.japanese-fresh-card:hover::before {
  opacity: 1;
}

.japanese-fresh-gradient {
  background: linear-gradient(135deg, #64b5f6, #98d8c8);
}

.japanese-fresh-gradient-text {
  background: linear-gradient(135deg, #64b5f6, #98d8c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.japanese-fresh-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(100, 181, 246, 0.08);
}

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

.japanese-fresh-animate-in {
  animation: japanese-fresh-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-[#d4d4cf]",
    "radius": "rounded-xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-[0_1px_3px_rgba(0,0,0,0.03)]",
    "lg": "shadow-[0_2px_6px_rgba(0,0,0,0.04)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_2px_8px_rgba(0,0,0,0.05)]",
    "focus": "focus:shadow-[0_0_0_2px_rgba(100,181,246,0.08)]",
    "colored": {
      "blue": "shadow-[0_1px_4px_rgba(100,181,246,0.1)]",
      "mint": "shadow-[0_1px_4px_rgba(152,216,200,0.1)]",
      "pink": "shadow-[0_1px_4px_rgba(255,183,197,0.1)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-in-out",
    "active": "active:scale-[0.99]",
    "hoverScale": "hover:brightness-[1.02]",
    "hoverTranslate": "hover:-translate-y-px"
  },
  "typography": {
    "heading": "font-sans font-extralight text-[#4a5568] tracking-wide",
    "body": "font-sans font-light text-[#6b7280] leading-relaxed",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-6xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-base md:text-lg",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32 lg:py-40",
    "container": "px-8 md:px-12 lg:px-20",
    "card": "p-8 md:p-10",
    "gap": {
      "sm": "gap-4 md:gap-6",
      "md": "gap-8 md:gap-12",
      "lg": "gap-12 md:gap-20"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#fafaf8]",
      "secondary": "bg-white",
      "accent": [
        "bg-[#64b5f6]",
        "bg-[#98d8c8]",
        "bg-[#ffb7c5]",
        "bg-[#b8d4e3]"
      ]
    },
    "text": {
      "primary": "text-[#4a5568]",
      "secondary": "text-[#7a8a9e]",
      "muted": "text-[#b0b8c4]"
    },
    "button": {
      "primary": "bg-[#64b5f6]/90 text-white",
      "secondary": "bg-white text-[#7a8a9e] border-[#d4d4cf]",
      "danger": "bg-[#ffb7c5]/80 text-white"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "border-2",
      "border-4",
      "font-bold",
      "font-black",
      "font-extrabold",
      "bg-[#0f0f1a]",
      "bg-black",
      "bg-[#1a1a1a]",
      "shadow-[0_0_",
      "text-[#ff006e]",
      "uppercase",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "tracking-widest"
    ],
    "patterns": [
      "^rounded-(?:none|sm)$",
      "^border-[2-9]$",
      "^font-(?:bold|black|extrabold|semibold)$",
      "^bg-(?:black|\\[#0)",
      "^uppercase$",
      "^shadow-(?:lg|xl|2xl)$"
    ],
    "reasons": {
      "rounded-none": "Japanese Fresh uses gentle curves inspired by natural forms, never sharp corners",
      "border-2": "Japanese Fresh uses only hairline borders (0.5-1px) for wabi-sabi delicacy",
      "font-bold": "Japanese Fresh uses light/extralight font weights to embody Ma and restraint",
      "bg-black": "Japanese Fresh uses warm off-white and natural tones only, darkness disrupts serenity",
      "uppercase": "Japanese Fresh avoids uppercase for a quieter, more contemplative reading experience",
      "shadow-lg": "Japanese Fresh avoids visible shadows; forms float in whitespace without weight"
    }
  },
  "required": {
    "button": [
      "rounded-lg",
      "font-sans font-light",
      "border border-[#d4d4cf]/40",
      "transition-all duration-500 ease-in-out"
    ],
    "card": [
      "bg-white",
      "rounded-xl",
      "border border-[#d4d4cf]/30"
    ],
    "input": [
      "border border-[#d4d4cf]",
      "bg-transparent",
      "font-sans font-light",
      "focus:outline-none"
    ]
  }
}