分屏布局

You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines

## Must Follow

- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content

## Layout Patterns

50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width

60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side

Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls

## Panel Content

Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content

Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy

## Responsive

Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios

## Self-Check

After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth

## Animation & Interaction Rules

- Counter-Weight Focus: hover one panel while the opposite panel gently desaturates or fades in prominence.
- Sharp Editorial Cuts: button hover uses direct black-white inversion with short duration and no gradient easing tricks.
- Screen-Spanning Lines: center divider or split seam can briefly intensify on focus change, but motion stays minimal.
- Static Text: descriptive text blocks must stay position-stable; avoid translate or scale on body copy.

/* Split Screen Global Styles */

/* Base split container */
.split-screen {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .split-screen {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ratio variants */
.split-screen-60-40 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-60-40 {
    grid-template-columns: 60fr 40fr;
  }
}

.split-screen-40-60 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-40-60 {
    grid-template-columns: 40fr 60fr;
  }
}

/* Panel styles */
.split-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

@media (min-width: 1024px) {
  .split-panel {
    padding: 4rem;
  }
}

/* Sticky scroll effect */
.split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Diagonal split */
.split-diagonal {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

@media (min-width: 1024px) {
  .split-diagonal {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  }
}

/* Hover reveal effect */
.split-hover-left:hover ~ .split-hover-right {
  flex: 0.3;
}

.split-hover-right:hover {
  flex: 0.7;
}

.split-hover-left, .split-hover-right {
  flex: 0.5;
  transition: flex 0.5s ease;
}
/* Split Screen Design Tokens */
:root {
  --split-screen-primary: #0f0f0f;
  --split-screen-secondary: #ffffff;
  --split-screen-accent: #ff4757;
  --split-screen-glow: rgba(15, 15, 15, 0.3);
}

@keyframes split-screen-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.split-screen-card {
  position: relative;
  overflow: hidden;
}

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

.split-screen-card:hover::before {
  opacity: 1;
}

.split-screen-gradient {
  background: linear-gradient(135deg, #0f0f0f, #ff4757);
}

.split-screen-gradient-text {
  background: linear-gradient(135deg, #0f0f0f, #ff4757);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.split-screen-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(15, 15, 15, 0.08);
}

.split-screen-animate-in {
  animation: split-screen-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-0",
    "color": "border-zinc-300",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-500",
    "active": "active:scale-95",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-bold tracking-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-0",
    "container": "px-8 md:px-12 lg:px-16",
    "card": "p-8 lg:p-16",
    "gap": {
      "sm": "gap-2 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-black",
      "secondary": "bg-white",
      "accent": [
        "bg-[#ff4757]",
        "bg-[#2ed573]",
        "bg-[#1e90ff]",
        "bg-[#ffa502]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-zinc-900",
      "muted": "text-zinc-500"
    },
    "button": {
      "primary": "bg-black text-white",
      "secondary": "bg-white text-black border-2 border-black"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl"
    ],
    "patterns": [
      "^rounded-(?!none)",
      "^shadow-(?!none)"
    ],
    "reasons": {
      "rounded-lg": "Split Screen uses sharp edges for strong visual dividers",
      "shadow-lg": "Split Screen relies on contrast between panels, not shadows"
    }
  },
  "required": {
    "button": [
      "px-8 py-4",
      "font-semibold",
      "transition-colors"
    ],
    "card": [
      "min-h-[50vh] lg:min-h-screen",
      "flex flex-col justify-center"
    ],
    "input": [
      "bg-transparent",
      "border-2 border-zinc-300",
      "text-lg",
      "focus:outline-none focus:border-black",
      "transition-colors"
    ]
  }
}