瑞士海报风

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

## Absolutely Forbidden

- Decorative, script, or monospace fonts
- Rounded corners larger than rounded-sm (use rounded-none)
- Any shadows (shadow-sm, shadow-md, shadow-lg, etc.) - Swiss Poster has NO shadows
- Gradients of any kind
- Dashed borders (border-dashed) - use border-solid only
- Element spacing/gaps (gap-4, gap-6) - use gap-0 with border dividers
- Backdrop blur or glass effects
- Decorative elements or embellishments

## Must Follow

- Black and white as primary palette: #000000, #ffffff
- Accent color blocks: red #ff0000, blue #0057b8, yellow #ffcc00
- Extra bold sans-serif: font-sans font-black
- All uppercase: uppercase tracking-widest
- Sharp edges: rounded-none everywhere
- 12-column grid alignment: grid-cols-12 with asymmetric splits
- Borders as dividers: border-2 border-[#000000]
- Zero gaps: gap-0, elements butt against each other
- Extreme type scale contrast (160px heading vs 10px label)
- Non-symmetric layouts (3/9, 8/4 column splits)

## Color Palette

Primary:
- Black: #000000 (text, borders, backgrounds)
- White: #ffffff (backgrounds)
- Red: #ff0000 (color blocks, hover states)
- Blue: #0057b8 (color blocks)
- Yellow: #ffcc00 (color blocks)

## Special Elements

- 12-column grid system with visible structural lines
- Asymmetric column splits (not 6/6 - use 3/9, 8/4, etc.)
- Color block backgrounds (full sections in red/blue/yellow)
- Visible grid column markers
- Extreme font size contrasts (160px vs 10px)
- Edge-to-edge button groups (gap-0, border-0)
- Vertical text using writing-mode: vertical-lr
- Section borders as visual separators instead of spacing

## Animation & Interaction Rules

- Absolute Objectivity: Zero `translate`, `scale`, or `shadow` changes on any interactive element. Swiss Poster communicates through color and typography alone — motion is visual noise that undermines the grid's authority.
- Snap Transitions: All state changes use `transition-none` — color flips are instantaneous, like ink stamped onto paper in a single press. Never use `duration-100` or any timed transition.
- Color Block Invasion: Hover replaces the entire background with solid black `hover:bg-[#000000]` and text inverts to `hover:text-[#ffffff] transition-none`. The color block takes over completely — no partial fills, no gradients.
- Typographic Highlighting: The year/category label activates to `group-hover:text-[#ff0000] transition-none` on hover — the red typographic accent fires like a stamp imprint, the only color note in a black-and-white composition.

/* Swiss Poster Global Styles */

:root {
  --sp-black: #000000;
  --sp-white: #ffffff;
  --sp-red: #ff0000;
  --sp-blue: #0057b8;
  --sp-yellow: #ffcc00;
}

/* Structural grid overlay for development */
.sp-grid-overlay {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: calc(100% / 12) 100px;
}

/* Color block accents */
.sp-block-red { background-color: var(--sp-red); }
.sp-block-blue { background-color: var(--sp-blue); }
.sp-block-yellow { background-color: var(--sp-yellow); }

/* Tight tracking for poster headings */
.sp-tight { letter-spacing: -0.05em; }

/* Structural divider line */
.sp-divider {
  border: 2px solid var(--sp-black);
}

/* Vertical text for sidebar labels */
.sp-vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  letter-spacing: 0.5em;
}

/* Asymmetric grid helper - 3/9 split */
.sp-grid-3-9 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.sp-grid-3-9 > :first-child { grid-column: span 3; }
.sp-grid-3-9 > :last-child { grid-column: span 9; }

/* Edge-to-edge buttons */
.sp-button-group {
  display: flex;
  gap: 0;
}
.sp-button-group > * + * {
  border: 0;
}
@keyframes swiss-poster-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.swiss-poster-card {
  position: relative;
  overflow: hidden;
}

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

.swiss-poster-card:hover::before {
  opacity: 1;
}

.swiss-poster-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(0, 0, 0, 0.08);
}

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

.swiss-poster-animate-in {
  animation: swiss-poster-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-2",
    "color": "border-[#000000]",
    "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-100 ease-out",
    "active": "active:scale-[0.98]",
    "hoverTranslate": "hover:-translate-y-0.5"
  },
  "typography": {
    "heading": "font-sans font-black uppercase tracking-tighter",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-6xl md:text-[10rem] lg:text-[12rem]",
      "h1": "text-5xl md:text-7xl lg:text-8xl",
      "h2": "text-3xl md:text-5xl lg:text-6xl",
      "h3": "text-xl md:text-2xl lg:text-3xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-0",
    "container": "px-0",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-0",
      "md": "gap-0",
      "lg": "gap-0"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#ffffff]",
      "secondary": "bg-[#f5f5f5]",
      "accent": [
        "bg-[#ff0000]",
        "bg-[#0057b8]",
        "bg-[#ffcc00]"
      ]
    },
    "text": {
      "primary": "text-[#000000]",
      "secondary": "text-[#000000]/70",
      "muted": "text-[#000000]/30"
    },
    "button": {
      "primary": "bg-[#000000] text-[#ffffff]",
      "secondary": "bg-[#ff0000] text-[#ffffff]",
      "danger": "bg-[#ff0000] text-[#ffffff]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-md",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "bg-gradient-to-br",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "backdrop-blur",
      "backdrop-blur-sm",
      "font-serif",
      "font-mono",
      "border-dashed",
      "gap-4",
      "gap-6",
      "gap-8"
    ],
    "patterns": [
      "^rounded-(?:md|lg|xl|2xl|full)$",
      "^bg-gradient-",
      "^shadow-(?:sm|md|lg|xl|2xl)$",
      "^backdrop-blur",
      "^font-serif$",
      "^font-mono$"
    ],
    "reasons": {
      "rounded-lg": "Swiss Poster uses sharp edges only (rounded-none) - geometric precision",
      "bg-gradient-to-r": "Swiss Poster uses flat solid color blocks only, no gradients",
      "shadow-md": "Swiss Poster does not use shadows at all - relies on borders and color blocks for hierarchy",
      "backdrop-blur": "Swiss Poster is clean and opaque, no blur or glass effects",
      "font-serif": "Swiss Poster uses sans-serif only (Helvetica/Akzidenz-Grotesk tradition)",
      "font-mono": "Swiss Poster uses sans-serif only - monospace breaks the typographic tradition",
      "border-dashed": "Swiss Poster uses solid borders only - dashed lines break the clean grid aesthetic",
      "gap-4": "Swiss Poster uses gap-0 - elements butt against each other with borders as separators"
    }
  },
  "required": {
    "button": [
      "rounded-none",
      "font-sans font-black uppercase tracking-widest",
      "border-2 border-[#000000]",
      "transition-all duration-100 ease-out"
    ],
    "card": [
      "rounded-none",
      "bg-[#ffffff]",
      "border-2 border-[#000000]"
    ],
    "input": [
      "rounded-none",
      "border-0 border-2 border-[#000000]",
      "bg-transparent",
      "font-sans font-bold",
      "focus:outline-none"
    ]
  }
}