macOS 毛玻璃

You are a macOS Vibrancy design style frontend expert. All code must follow these constraints:

## Absolute Rules

- Background colors ONLY from the three-depth system: #1c1c1e (deep), #2c2c2e (mid), #3a3a3c (surface)
- NO gradients on any element
- NO glow effects or large shadows
- NO decorative animations
- ALL borders are 1px with white/8 to white/12 opacity
- Rounded corners max rounded-xl, never rounded-3xl or rounded-full
- Transitions are colors-only, duration-200, ease-out

## Typography

- Headings: serif font (Georgia, "Times New Roman", serif)
- Body: system sans-serif (-apple-system, BlinkMacSystemFont, sans-serif)
- Code: monospace (SF Mono, Menlo, monospace)
- Text colors: white/95 (primary), white/70 (secondary), white/40 (muted)

## Layout

- Three-panel structure: sidebar (darkest) | middle panel | content (lightest)
- Sidebar: bg-[#1c1c1e]/80 backdrop-blur-xl, border border-white/8
- Middle panel: bg-[#2c2c2e], border border-white/8
- Content: bg-[#2c2c2e] or bg-[#3a3a3c]

## Interaction

- Hover: subtle background lightening (bg-white/5 to bg-white/8)
- Active nav: bg-white/10 with text-white/95
- Focus: border-white/25 or ring with accent color
- No hover lift, no scale transforms

## Self-Check

1. No gradients anywhere
2. No shadows larger than 2px
3. Only 1px borders
4. Three-depth gray system used correctly
5. Serif headings, sans-serif body
6. Transitions are subtle (duration-200, colors only)

/* macOS Vibrancy Global Styles */

:root {
  --mv-bg-deep: #1c1c1e;
  --mv-bg-mid: #2c2c2e;
  --mv-bg-surface: #3a3a3c;
  --mv-border: rgba(255, 255, 255, 0.08);
  --mv-text: rgba(255, 255, 255, 0.95);
  --mv-text-secondary: rgba(255, 255, 255, 0.7);
  --mv-text-muted: rgba(255, 255, 255, 0.4);
  --mv-accent: #0a84ff;
}

.mv-sidebar {
  background: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--mv-border);
}

.mv-panel {
  background: var(--mv-bg-mid);
  border: 1px solid var(--mv-border);
}
@keyframes macos-vibrancy-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.macos-vibrancy-card {
  position: relative;
  overflow: hidden;
}

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

.macos-vibrancy-card:hover::before {
  opacity: 1;
}

.macos-vibrancy-gradient {
  background: linear-gradient(135deg, #3a3a3c, #0a84ff);
}

.macos-vibrancy-gradient-text {
  background: linear-gradient(135deg, #3a3a3c, #0a84ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.macos-vibrancy-animate-in {
  animation: macos-vibrancy-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-white/10",
    "radius": "rounded-xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-[0_1px_0_rgba(255,255,255,0.05)]",
    "lg": "shadow-[0_2px_8px_rgba(0,0,0,0.3)]",
    "none": "shadow-none",
    "hover": "hover:shadow-none",
    "focus": "focus:shadow-[0_0_0_2px_rgba(100,100,255,0.3)]",
    "colored": {
      "inner": "shadow-none",
      "glow": "shadow-none",
      "blue": "shadow-[0_0_0_2px_rgba(50,130,246,0.4)]",
      "green": "shadow-[0_0_0_2px_rgba(52,199,89,0.4)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-200 ease-out",
    "active": "active:opacity-80",
    "hoverOpacity": "hover:bg-white/8"
  },
  "typography": {
    "heading": "font-serif font-semibold text-white/95",
    "body": "text-white/70",
    "mono": "font-mono text-white/80",
    "sizes": {
      "hero": "text-3xl md:text-5xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-2xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16",
    "container": "px-4 md:px-6",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-2",
      "md": "gap-4",
      "lg": "gap-6"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#1c1c1e]",
      "secondary": "bg-[#2c2c2e]",
      "accent": [
        "bg-[#3a3a3c]",
        "bg-blue-600",
        "bg-indigo-600"
      ]
    },
    "text": {
      "primary": "text-white/95",
      "secondary": "text-white/70",
      "muted": "text-white/40"
    },
    "button": {
      "primary": "bg-[#3a3a3c] text-white/90",
      "secondary": "bg-transparent text-white/70 border border-white/12"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "bg-gradient-to-l",
      "shadow-xl",
      "shadow-2xl",
      "shadow-lg",
      "rounded-3xl",
      "rounded-full",
      "text-yellow-400",
      "text-pink-500",
      "text-green-400",
      "animate-pulse",
      "animate-bounce",
      "border-2",
      "border-4"
    ],
    "patterns": [
      "^bg-gradient",
      "^shadow-(xl|2xl|lg)$",
      "^rounded-(3xl|full)$",
      "^animate-",
      "^border-[2-9]$"
    ],
    "reasons": {
      "bg-gradient-to-r": "macOS Vibrancy uses solid dark backgrounds, not gradients",
      "shadow-xl": "macOS Vibrancy uses minimal shadows, depth comes from background layers",
      "rounded-3xl": "macOS Vibrancy uses moderate rounding (rounded-lg to rounded-xl)",
      "animate-pulse": "macOS Vibrancy avoids decorative animations",
      "border-2": "macOS Vibrancy uses 1px borders only"
    }
  },
  "required": {
    "button": [
      "bg-[#3a3a3c] text-white/90",
      "rounded-lg",
      "transition-colors duration-200"
    ],
    "card": [
      "bg-[#2c2c2e]",
      "border border-white/8",
      "rounded-xl"
    ],
    "input": [
      "bg-[#1c1c1e]",
      "border border-white/10",
      "rounded-lg",
      "text-white/90 placeholder-white/30",
      "focus:outline-none focus:border-white/25",
      "transition-colors duration-200"
    ]
  }
}