macOS Vibrancy

# Visual style: macOS Vibrancy

Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.

## Philosophy
macOS Vibrancy is the Web adaptation of Apple's desktop application design language. Its core is restraint, not spectacle.

Core principles:
- Hierarchy through color: No gradients or glow, depth comes purely from background shade progression (#1c1c1e -> #2c2c2e -> #3a3a3c)
- System-level blur: Sidebar uses backdrop-blur to let underlying content subtly show through, simulating NSVisualEffectView
- Typography-driven: Serif headings + sans-serif body + monospace code, three typefaces each with a clear role
- 1px philosophy: All separators are 1px semi-transparent borders, no shadows for depth
- No decoration: No gradients, no glow, no animations. Content is the decoration

## Do
- Use three-depth dark gray system: #1c1c1e (deepest) -> #2c2c2e -> #3a3a3c (lightest)
- Sidebar uses backdrop-blur-xl with bg-[#1c1c1e]/80 for vibrancy effect
- All borders are 1px border-white/8 to border-white/12, never thicker
- Headings use serif font (Georgia, serif), body uses system sans-serif
- Transitions are subtle: duration-200 ease-out, colors only
- Active nav items use slightly lighter background bg-white/8 to bg-white/12
- Code blocks use monospace font with bg-[#1c1c1e] background
- System accent color #0a84ff for interactive highlights

## Don't
- No gradients on any element (backgrounds are solid dark grays)
- No glow effects, no box-shadow larger than 2px spread
- No decorative animations (pulse, bounce, spin)
- No rounded-3xl or rounded-full (max rounded-xl)
- No bright accent colors as backgrounds (only for text highlights)
- No borders thicker than 1px

## Rules for the AI
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-r border-white/8
- Middle panel: bg-[#2c2c2e], border-r 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)