---
version: alpha
name: meta.com
description: "Light product system built on #ffffff with #0457cb as the primary CTA accent. Type anchored in Optimistic VF at 64px / weight 500. Extracted automatically from https://meta.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  meta.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(4, 87, 203) as the high-saturation accent for primary actions.
  Generously rounded CTAs (24px) suggest approachable, content-first design alongside Optimistic VF as the primary typeface.
  A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page.
  Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "rgba(241, 244, 247, 0.698)"
  surface-2: "#f1f4f7"
  ink: "#1c1e21"
  ink-muted: "rgba(28, 30, 33, 0.65)"
  ink-subtle: "#65676b"
  primary: "#0457cb"
  on-primary: "#ffffff"
  primary-hover: "#385898"
  accent-glow: "#65676b"
  semantic-error: "#f0284a"
  semantic-success: "#31a24c"
  semantic-warning: "rgba(255, 226, 0, 0.15)"
  semantic-info: "#1876f2"

typography:
  display-xl:
    fontFamily: "Optimistic VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: 0
  display-md:
    fontFamily: "Optimistic VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  body:
    fontFamily: "Optimistic VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.34
    letterSpacing: 0
  button:
    fontFamily: "Optimistic VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.14px

rounded:
  none: 0px
  xs: 12px
  sm: 24px
  md: 32px
  lg: 100px
  xl: 999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 88px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 4px
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 4px 12px 4px 4px
  button-icon-button:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  input-text-input:
    backgroundColor: "transparent"
    textColor: "transparent"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"

extracted_at: "2026-06-11T05:01:33.780Z"
completeness: 75
scoreVersion: "v2"

---

# Design System — meta.com
> Extracted automatically by Prism from https://meta.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Optimistic VF) | "New season. New styles." |
| Color assertion | dual-accent | #0457cb |
| Whitespace | sparse | section rhythm 80px |
| Interaction | expressive | 200 keyframes, 12 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(4, 87, 203)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 12px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 80px between major bands. Card padding: 24px.
> - **Default radius**: 24px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

meta.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **Optimistic VF**, deployed with OpenType features enabled globally (`"ss01", "ss02"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. 

Body text reads in Near-Black (`#1c1e21`) — softened from pure black, a small but deliberate detail that lowers reading friction. **M Tricolor Blue** (`#0457cb`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation comes from a small, deliberate set of shadows (1 distinct), each a multi-layer stack — several blurred layers at varying offsets — used sparingly rather than across the whole UI. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with WDTH axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Optimistic VF
- Primary text: Near-Black (`#1c1e21`)
- Accent: M Tricolor Blue (`#0457cb`)
- Shadow system: 1 distinct elevation levels
- Custom fonts loaded: Optimistic VF, Optimistic Display, Optimistic Text, Segoe UI Historic, Fix for Mac Chrome 80, Optimistic Text Light, Optimistic Text Light Swap, Optimistic Text Normal, Optimistic Text Normal Swap, Optimistic Text Medium, Optimistic Text Medium Swap, Optimistic Text Bold, Optimistic Text Bold Swap, Optimistic Text ExtraBold, Optimistic Text ExtraBold Swap, Optimistic Text Viet Light, Optimistic Text Viet Light Swap, Optimistic Text Viet Normal, Optimistic Text Viet Normal Swap, Optimistic Text Viet Bold, Optimistic Text Viet Bold Swap, Optimistic Text Arbc Light, Optimistic Text Arbc Light Swap, Optimistic Text Arbc Normal, Optimistic Text Arbc Normal Swap, Optimistic Text Arbc Bold, Optimistic Text Arbc Bold Swap, Optimistic Display Light, Optimistic Display Light Swap, Optimistic Display Medium, Optimistic Display Medium Swap, Optimistic Display Semibold, Optimistic Display Semibold Swap, Optimistic Display Bold, Optimistic Display Bold Swap, Optimistic Display Viet Light, Optimistic Display Viet Light Swap, Optimistic Display Viet Medium, Optimistic Display Viet Medium Swap, Optimistic Display Viet Bold, Optimistic Display Viet Bold Swap, Optimistic Display Arbc Light, Optimistic Display Arbc Light Swap, Optimistic Display Arbc Medium, Optimistic Display Arbc Medium Swap, Optimistic Display Arbc Bold, Optimistic Display Arbc Bold Swap, Optimistic, Optimistic DM

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Transparent** (`transparent`): Surface / elevated background
- **Translucent Light Gray (70%)** (`rgba(241, 244, 247, 0.698)`): Surface / elevated background
- **Whitesmoke** (`#dadde1`): Surface / elevated background
- **Off-White** (`#efefef`): Surface / elevated background

### Text & Content
- **Near-Black** (`#1c1e21`): Primary body text
- **Text Badge Success Background** (`#31a24c`): Text (CSS var)
- **Text Input Outside Label** (`#000000`): Text (CSS var)
- **Text Highlight** (`rgba(24, 119, 242, 0.2)`): Text (CSS var)
- **Text Badge Critical Background** (`#e41e3f`): Text (CSS var)

### Accent & Interactive
- **Primary Button Background** (`#1b74e4`): Accent / interactive (CSS var)
- **Primary Web Focus Indicator** (`#d24294`): Accent / interactive (CSS var)
- **Primary Deemphasized Button Background** (`#e7f3ff`): Accent / interactive (CSS var)
- **Primary Icon** (`#050505`): Accent / interactive (CSS var)
- **Primary Deemphasized Button Pressed Overlay** (`rgba(25, 110, 255, 0.15)`): Accent / interactive (CSS var)
- **Primary Button Pressed** (`#77a7ff`): Accent / interactive (CSS var)
- **M Tricolor Blue** (`#0457cb`): Interactive / accent

### Border & Divider
- **Border Focused** (`#65676b`): Border (CSS var)
- **Divider On Color** (`#ced0d4`): Border (CSS var)

### Full Extracted Palette
**15 colors rendered on the page** + **296** more declared in design tokens (CSS custom properties — not necessarily painted). (19 categorized above + 292 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#385898` — #385898
- `#0a1317` — Jet Black
- `rgba(43, 61, 70, 0.68)` — Translucent Dark Gray (68%)
- `#5d6c7b` — Slate Gray
- `#606770` — Dim Gray
- `#647685` — Slate Gray
- `#767676` — Slate Grey
- `rgba(68, 86, 100, 0.5)` — Translucent Slate (50%)
- `#f0f0f0` — Off-White *(token)*
- `#67788a` — Slate Gray *(token)*
- `#a4a7ab` — Grey *(token)*
- `#b0b3b8` — Grey *(token)*
- `#483b0c` — #483b0c *(token)*
- `rgba(68, 73, 80, 0.15)` — Translucent Dark Gray (15%) *(token)*
- `#fff6a1` — Vibrant Yellow *(token)*
- `#f0f2f5` — Off-White *(token)*
- `#2851a3` — #2851a3 *(token)*
- `#8a8d91` — Grey *(token)*
- `#5e310e` — Chocolate *(token)*
- `#8595a4` — Cool Gray *(token)*
- `rgba(249, 115, 22, 0.5)` — Translucent #f97316 (50%) *(token)*
- `#0866ff` — #0866ff *(token)*
- `#1a441b` — #1a441b *(token)*
- `rgba(6, 182, 212, 0.2)` — Translucent Sky Bright (20%) *(token)*
- `rgba(59, 130, 246, 0.5)` — Translucent Ring Blue (50%) *(token)*
- `#00987c` — #00987c *(token)*
- `#3e56f4` — Royal Blue *(token)*
- `#080809` — Pure Black *(token)*
- `#ff66bf` — Hot Pink *(token)*
- `#147b29` — Forest Green *(token)*
- `rgba(45, 136, 255, 0.1)` — Translucent Ring Blue (10%) *(token)*
- `#007d1e` — Forest Green *(token)*
- *…+260 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` — (--always-dark-gradient)
- `linear-gradient(to top, #FFFFFF, rgba(255,255,255.9), rgba(255,255,255,.7), rgba(255,255,255,.4), rg…` — (--nav-bar-background-gradient)
- `linear-gradient(to top, #F0F2F5, rgba(240,242,245.9), rgba(240,242,245,.7), rgba(240,242,245,.4), rg…` — (--nav-bar-background-gradient-wash)

### CSS Custom Properties (Design Tokens)

**Border Radius Token**
- `--card-corner-radius`: `8px`
- `--button-corner-radius-large`: `12px`
- `--alert-banner-corner-radius`: `8px`
- `--list-cell-corner-radius`: `8px`

**Font Family Token**
- `--font-family-default`: `Helvetica, Arial, sans-serif`
- `--font-family-segoe`: `Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif`
- `--font-family-code`: `ui-monospace, Menlo, Consolas, Monaco, monospace`
- `--font-family-apple`: `system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`

**Spacing Token**
- `--chat-bubble-padding-vertical`: `8px`
- `--messenger-card-spacing`: `16px`
- `--menu-item-base-padding-horizontal`: `8px`
- `--text-input-padding-vertical`: `12px`

**Shadow Token**
- `--card-box-shadow`: `0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)`
- `--shadow-base`: `0 1px 2px rgba(0, 0, 0, 0.2)`
- `--shadow-2`: `rgba(0, 0, 0, 0.2)`
- `--scroll-shadow`: `0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset`

**Font Size Token**
- `--text-input-field-font-size`: `1rem`
- `--text-input-label-font-size-scale-multiplier`: `0.75`
- `--text-input-label-font-size`: `17px`

**Motion Token**
- `--glimmer-animation-duration`: `1000ms`
- `--fds-animation-swap-shuffle-in`: `cubic-bezier(0.14, 1, 0.34, 1)`
- `--glimmer-animation-timing-function`: `steps(10, end)`

**Error / Destructive**
- `--input-label-color-error`: `hsl(350, 87%, 55%)`
- `--badge-background-color-red`: `#e41e3f`

**Success**
- `--badge-background-color-green`: `#31A24C`

**Warning**
- `--badge-background-color-yellow`: `#F7B928`

**Text Color**
- `--chat-text-blockquote-color-text-primary-media`: `rgba(255, 255, 255, 0.7)`

**Font Weight Token**
- `--text-input-field-font-weight`: `500`
- `--text-input-label-font-weight`: `400`

**Background**
- `--chat-text-blockquote-color-background-line`: `rgba(0, 0, 0, 0.12)`

**Other tokens**
- `--stnbgo`: `0`
- `--text-badge-success-background`: `#31A24C`
- `--teal-primary`: `rgb(0,152,124)`
- `--text-input-outside-label`: `#000000`
- `--primary-button-background`: `#1B74E4`
- `--x1p0bgpc`: `-88px`
- `--primary-web-focus-indicator`: `#D24294`
- `--mcds-bg-surface-3`: `#E6EBEF`

## 3. Typography Rules

### Font Families
- **Primary**: `Optimistic VF`
- **Secondary**: `Optimistic Display`
- **Font 3**: `Optimistic Text`
- **Font 4**: `Segoe UI Historic`
- **Font 5**: `Fix for Mac Chrome 80`

### Custom Fonts Loaded
- **Optimistic VF** weight 200 800 (normal)
- **Optimistic Display** weight 200 (normal)
- **Optimistic Display** weight 300 (normal)
- **Optimistic Display** weight 500 (normal)
- **Optimistic Display** weight 700 (normal)
- **Optimistic Display** weight 800 (normal)
- **Optimistic Text** weight 400 (normal)
- **Optimistic Text** weight 500 (normal)
- **Optimistic Text** weight 700 (normal)
- **Segoe UI Historic** weight normal (normal)
- **Segoe UI Historic** weight 700 (normal)
- **Fix for Mac Chrome 80** weight 500 (normal)
- **Optimistic Text Light** weight 300 (normal)
- **Optimistic Text Light Swap** weight 300 (normal)
- **Optimistic Text Normal** weight 400 (normal)
- **Optimistic Text Normal Swap** weight 400 (normal)
- **Optimistic Text Medium** weight 500 (normal)
- **Optimistic Text Medium Swap** weight 500 (normal)
- **Optimistic Text Bold** weight 700 (normal)
- **Optimistic Text Bold Swap** weight 700 (normal)
- **Optimistic Text ExtraBold** weight 800 (normal)
- **Optimistic Text ExtraBold Swap** weight 800 (normal)
- **Optimistic Text Viet Light** weight 300 (normal)
- **Optimistic Text Viet Light Swap** weight 300 (normal)
- **Optimistic Text Viet Normal** weight 400 (normal)
- **Optimistic Text Viet Normal Swap** weight 400 (normal)
- **Optimistic Text Viet Bold** weight 700 (normal)
- **Optimistic Text Viet Bold Swap** weight 700 (normal)
- **Optimistic Text Arbc Light** weight 300 (normal)
- **Optimistic Text Arbc Light Swap** weight 300 (normal)
- **Optimistic Text Arbc Normal** weight 400 (normal)
- **Optimistic Text Arbc Normal Swap** weight 400 (normal)
- **Optimistic Text Arbc Bold** weight 700 (normal)
- **Optimistic Text Arbc Bold Swap** weight 700 (normal)
- **Optimistic Display Light** weight 300 (normal)
- **Optimistic Display Light Swap** weight 300 (normal)
- **Optimistic Display Medium** weight 500 (normal)
- **Optimistic Display Medium Swap** weight 500 (normal)
- **Optimistic Display Semibold** weight 600 (normal)
- **Optimistic Display Semibold Swap** weight 600 (normal)
- **Optimistic Display Bold** weight 700 (normal)
- **Optimistic Display Bold Swap** weight 700 (normal)
- **Optimistic Display Viet Light** weight 300 (normal)
- **Optimistic Display Viet Light Swap** weight 300 (normal)
- **Optimistic Display Viet Medium** weight 500 (normal)
- **Optimistic Display Viet Medium Swap** weight 500 (normal)
- **Optimistic Display Viet Bold** weight 700 (normal)
- **Optimistic Display Viet Bold Swap** weight 700 (normal)
- **Optimistic Display Arbc Light** weight 300 (normal)
- **Optimistic Display Arbc Light Swap** weight 300 (normal)
- **Optimistic Display Arbc Medium** weight 500 (normal)
- **Optimistic Display Arbc Medium Swap** weight 500 (normal)
- **Optimistic Display Arbc Bold** weight 700 (normal)
- **Optimistic Display Arbc Bold Swap** weight 700 (normal)
- **Optimistic** weight 300 800 (normal)
- **Optimistic DM** weight 300 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Optimistic VF | 64px | 500 | 1.16 | normal | Main headline (h2) |
| Sub-heading | Optimistic VF | 16px | 400 | 1.5 | -0.16px | Third-level heading (h3) |
| Button | Optimistic VF | 14px | 400 | 1.43 | -0.14px | Button label (14px) |
| Body | Optimistic VF | 12px | 400 | 1.34 | normal | Standard reading text |

### Font Weight Scale

CSS custom properties define 2 explicit weight steps:
- `--text-input-label-font-weight`: `400` — Regular
- `--text-input-field-font-weight`: `500` — Medium

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `48px`, `28px`, `24px`, `18px`, `16px`, `14px`, `12px`

> 4 size(s) detected outside the sampled hierarchy (48px, 28px, 24px, 18px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "ss01", "ss02", "liga", "clig", "cv01", "cv02";
}
```

**Variable font axes:**
- WDTH axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 4px
- Radius: 24px
- Font: 12px weight 400
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `transparent`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 4px 12px 4px 4px
- Radius: 24px
- Font: 12px weight 400
- Use: Status pills, tags, chips

**Icon Button**
- Background: `transparent`
- Text: `#1c1e21` `{colors.ink-muted}`
- Padding: 0px
- Radius: 999px
- Font: 12px weight 400
- Use: Toolbar/UI icons

**Pill**
- Background: `transparent`
- Text: `rgba(68, 86, 100, 0.5)`
- Padding: 10px 22px
- Radius: 100px
- Border: 2px solid rgba(10, 19, 23, 0.12)
- Font: 12px weight 400
- Use: Status pills, tags, chips

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `transparent`
- Padding: 0px
- Radius: 0px
- Border: 0px none rgb(118, 118, 118)
- Font: 16px weight 400
- Use: Text fields, search inputs
- Focus: color: `rgb(10, 19, 23)`, transform: `matrix(1, 0, 0, 1, 0, 0)`, outline: `rgb(10, 19, 23) none 3px`


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Input**:
  - **focus:** text transparent → #0a1317, transform applied
- **FooterLink**:
  - **hover:** text #0457cb → #0171e3

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(239, 239, 239)"
      fg: "rgb(0, 0, 0)"
      border: "2px outset rgb(0, 0, 0)"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0)"
    focus:
      bg: "transparent"
      fg: "rgb(10, 19, 23)"
  link:
    default:
      bg: "rgb(4, 87, 203)"
      fg: "rgb(255, 255, 255)"
      border: "2px solid rgba(0, 0, 0, 0)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(56, 88, 152)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(4, 87, 203)"
    hover:
      bg: "transparent"
      fg: "rgb(1, 113, 227)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Ghost`, `Pill`, `Icon Button`
- **DO NOT introduce new buttons variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
100%

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 10px |
| md | 16px |
| base | 22px |
| lg | 24px |
| xl | 32px |
| 2xl | 80px |
| 3xl | 88px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 12px | Tiny corners (badges, micro elements) |
| Sm | 24px | Buttons, inputs, small elements |
| Md | 32px | Cards, containers |
| Lg | 100px | Large rounded elements, pill segments |
| Xl | 999px | Category strips, featured containers |
| Full | 999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `24px` |
| Inputs & Forms | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 12px, 24px, 32px, 100px, 999px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~24px internal vertical padding (up to 24px) — **compact**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `88px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `16px` | Card padding, list-item spacing |
| **compact** | `10px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 64px
- **Logo:** ✓ present
- **Nav links:** 0 primary items
- **CTAs in nav:** 5
- **Clone instruction:** Build a static unknown navigation. Reserve 5 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 5 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1376×620px (aspect 2.22:1)
- **Gap:** 32px between cards
- **Content:** ✓ image + CTA
- **Image position:** left
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.22:1 aspect ratio. Each card has an image at the left.

### Pricing Table Pattern

- **Tier count:** 3 pricing tiers
- **Layout:** side-by-side (horizontal comparison)
- **Columns (desktop):** 3-up
- **Clone instruction:** Build a 3-column side-by-side pricing comparison.

### Footer Pattern

- **Columns:** 1
- **Links:** 60 total
- **Height:** 1545px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~60 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.12) 0px 8px 32px 0px`,<br>`rgba(0, 0, 0, 0.05) 0px 6px 16px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-in` | Ease In — Accelerating |
| `ease-in-out` | Ease In-Out — Symmetric |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--glimmer-animation-duration` | `1000ms` | Cinematic |
| `--fds-duration-extra-short-out` | `150ms` | Fast |
| `--fds-duration-extra-short-in` | `200ms` | Normal |
| `--fds-duration-extra-long-in` | `1000ms` | Cinematic |
| `--fds-duration-short-out` | `200ms` | Normal |
| `--fds-duration-none` | `0ms` | Instant |
| `--fds-duration-short-in` | `280ms` | Normal |
| `--fds-duration-long-out` | `350ms` | Slow |
| `--fds-duration-extra-long-out` | `1000ms` | Cinematic |
| `--fds-duration-extra-extra-short-in` | `100ms` | Fast |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.2s;
```

**All Props**
```css
transition: 0.3s ease-in-out;
```

**Background**
```css
transition: background-color 0.2s ease-out;
```

**Opacity**
```css
transition: opacity 0.25s ease-in;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `x11uh2n3-B` | Custom | stroke-dashoffset | UI transition |
| `x17x9eqa-B` | Scale | transform | UI transition |
| `x18re5ia-B` | Fade | opacity | UI transition |
| `x1a2jnmv-B` | Custom | stroke-dashoffset | UI transition |
| `x1ayzhmi-B` | Fade + Move | opacity, transform | UI transition |
| `x1dq47om-B` | Slide | transform | UI transition |
| `x1e5kmei-B` | Custom | background-position-x, background-position-y, background-size | UI transition |
| `x1gnlf15-B` | Fade + Move | opacity, transform | UI transition |
| `x1ofn8cw-B` | Custom | background-position-x, background-position-y | UI transition |
| `x1prjo1g-B` | Scale | transform | UI transition |
| `x1ql2n3s-B` | Custom | stroke-dashoffset | UI transition |
| `x1rp9ifn-B` | Rotate / Spin | transform | UI transition |
| `x1wh7uoa-B` | Fade + Move | opacity, transform | UI transition |
| `x5orj5x-B` | Slide | transform | UI transition |
| `xa0jybu-B` | Fade + Move | opacity, transform | UI transition |
| `xb4s9mv-B` | Custom | background-position-x, background-position-y | UI transition |
| `xct2g7x-B` | Scale | transform | UI transition |
| `xdyu7r2-B` | Fade | opacity | UI transition |
| `xepz06c-B` | Slide | transform | UI transition |
| `xfa266b-B` | Slide | transform | UI transition |

> *180 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 200 unique animations (200 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Near-Black (`#1c1e21`) for text — not pure black, it's warmer and more readable
- Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use M Tricolor Blue (`#0457cb`) as the primary accent — it's the brand's signature interactive color
- Use 24px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a left image — imagery is part of the card identity, not optional
- Place 3 pricing tiers side-by-side on desktop — direct comparison is the value prop

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 24px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(4, 87, 203)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(4, 87, 203)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 359px | Single column, compact spacing |
| Mobile | 459px | Single column, compact spacing |
| Mobile Large | 648px | Expanded mobile layout |
| Mobile Large | 719px | Expanded mobile layout |
| Mobile Large | 760px | Expanded mobile layout |
| Tablet | 1009px | Multi-column grids begin |
| Desktop | 1099px | Full feature layout |
| Desktop | 1267px | Full feature layout |
| Large Desktop | 1439px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | height | `64px` | `56px` |
| button | width | `auto` | `32px` |

### Collapsing Strategy
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 4px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Nav CTAs reduced** on mobile (5 → 0) — the design prioritizes content over conversion buttons at small sizes.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(40px) saturate(3) brightness(1.2)`).
- **Clip-path shapes** — 2 non-rectangular cut(s).
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: glassmorphism (9 layers), non-rectangular shapes (2)

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://lookaside.fbsbx.com/elementpath/media/?media_id=2061885777588768&version=1781121548&transcode_extension=webp
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.84:1 (landscape (16:9-ish))
- Rendered size: 1440×783px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 7 (64%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (18%)
- Ultra-wide (>2.3): 2 (18%)

**Media Format Mix:**
- WebP: 1 (optimized photo/illustration hybrid)

**Average rendered image size:** 791×441px
**Above-fold image count:** 4 / 11

**Decorative Patterns Detected:**
- 6 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#1c1e21`)
- Accent: M Tricolor Blue (`#0457cb`)
- Border: Translucent Pure Black (40%) (`rgba(0, 0, 0, 0.4)`)
- Font: Optimistic VF
- Body: 12px weight 400

### Example Component Prompts
- "Create the primary CTA button: `#0457cb` background, `#1c1e21` text, 24px border-radius, 4px padding, 500 weight, Optimistic VF font."
- "Build navigation: relative on `#ffffff`. Optimistic VF 12px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Optimistic VF, weight range 400–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: M Tricolor Blue (`#0457cb`) is the sole interactive color. On hover → #385898 (`#385898`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.08,0.52,0.52,1)`. Timing: 100ms for micro-interactions, 350ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `24px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-2: #f1f4f7;
  --ca-ink-muted: #1c1e21;
  --ca-accent-glow: #65676b;
  --ca-primary: #0457cb;
  --ca-primary-hover: #385898;
  --ca-semantic-error: #f0284a;
  --ca-semantic-success: #31a24c;
  --ca-semantic-warning: #ffe200;
  --ca-semantic-info: #1876f2;
}

/* Typography */
:root {
  --ca-font-primary: "Optimistic VF", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-button: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 10px;
  --ca-space-md: 16px;
  --ca-space-base: 22px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 80px;
  --ca-space-3xl: 88px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 12px;
  --ca-radius-sm: 24px;
  --ca-radius-md: 32px;
  --ca-radius-lg: 100px;
  --ca-radius-xl: 999px;
  --ca-radius-full: 999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 6702px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: main
    classes: ["x1n2onr6", "x1vjfegm", "xwnajww", "xh7uebp"]
    height: 5045px
    width: full-bleed
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["xixxii4", "x47corl", "x1q2oy4v", "xjbys53"]
    height: 836px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~24px
  - section: unknown
    tag: div
    classes: ["xixxii4", "x47corl", "x1q2oy4v", "xjbys53"]
    height: 836px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~24px
  - section: footer
    tag: footer
    classes: ["x1n2onr6", "x1ja2u2z"]
    height: 1545px
    width: full-bleed
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "New season. New styles."
    - "Explore the Meta Store"
    - "Designed for sport"
    - "Advanced. Inside and out."
    - "Meta Quest brings the magic of virtual reality"
    - "Why buy from Meta"
  sub-headings:
    - "AI glasses"
    - "Free 30-day returns"
  ctas:
    - "FR"
    - "Sign up"
    - "France (English)"
  navigation:
    - "AI glasses"
    - "Meta Quest"
    - "Apps and games"
    - "Explore Meta"
    - "Support"
  footer-links:
    - "Terms"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 5
    avg-ratio: 3.44
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Meta"
      - "Oakley Meta Vanguard and Ray-Ban Meta Wayfarer AI glasses"
      - "Meta Quest 3S headset"
  hero:
    count: 4
    avg-ratio: 2.17
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Ray-Ban Meta Gen 2 Blayzer Optics glasses"
  product:
    count: 2
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Close-up of the Oakley Meta Vanguard performance glasses"
      - "Close-up of Oakley Meta HSTN glasses with black frames and A"
  thumbnail:
    count: 5
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Facebook Meta.com social media"
      - "Threads Meta.com social media"
      - "Instagram Meta.com social media"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `4px` · radius `24px` · weight `400`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 6 · **docs** 2 · **blog** 3 · **social** 9 · **footer** 14 · **other** 26

**Signals:** 10/60 links carry a featured image · device mockups detected: laptop ×2 · dominant link roles: inline-link (26), footer-link (16), content-card (8).


---
## Extraction Completeness: 75/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 10 | 20 | 4 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 1649 vars |
| Responsive Breakpoints | 5 | 5 | 9 breakpoints |
| Variable Fonts | 5 | 5 | WDTH axes |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Optimistic VF, Optimistic Display, Optimistic Text)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 1649 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | Medium | 4 typography roles inferred |
| §4 Components | Low | 2 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 9 breakpoints detected |
| §9b Photography | High | 11 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

1 font file(s) captured (179KB total). When running `prism add`, fonts are saved to `extractions/meta.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Optimistic VF';
  /* src: url('/fonts/Optimistic-VF.woff2') format('woff2-variations'); */
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display';
  /* src: url('/fonts/Optimistic-Display.woff2') format('woff2'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display';
  /* src: url('/fonts/Optimistic-Display.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display';
  /* src: url('/fonts/Optimistic-Display.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display';
  /* src: url('/fonts/Optimistic-Display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display';
  /* src: url('/fonts/Optimistic-Display.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text';
  /* src: url('/fonts/Optimistic-Text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text';
  /* src: url('/fonts/Optimistic-Text.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text';
  /* src: url('/fonts/Optimistic-Text.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI Historic';
  /* src: url('/fonts/Segoe-UI-Historic.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI Historic';
  /* src: url('/fonts/Segoe-UI-Historic.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fix for Mac Chrome 80';
  /* src: url('/fonts/Fix-for-Mac-Chrome-80.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Light';
  /* src: url('/fonts/Optimistic-Text-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Light Swap';
  /* src: url('/fonts/Optimistic-Text-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Normal';
  /* src: url('/fonts/Optimistic-Text-Normal.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Normal Swap';
  /* src: url('/fonts/Optimistic-Text-Normal-Swap.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Medium';
  /* src: url('/fonts/Optimistic-Text-Medium.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Medium Swap';
  /* src: url('/fonts/Optimistic-Text-Medium-Swap.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Bold';
  /* src: url('/fonts/Optimistic-Text-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Bold Swap';
  /* src: url('/fonts/Optimistic-Text-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text ExtraBold';
  /* src: url('/fonts/Optimistic-Text-ExtraBold.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text ExtraBold Swap';
  /* src: url('/fonts/Optimistic-Text-ExtraBold-Swap.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Viet Light';
  /* src: url('/fonts/Optimistic-Text-Viet-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Viet Light Swap';
  /* src: url('/fonts/Optimistic-Text-Viet-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Viet Normal';
  /* src: url('/fonts/Optimistic-Text-Viet-Normal.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Viet Normal Swap';
  /* src: url('/fonts/Optimistic-Text-Viet-Normal-Swap.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Viet Bold';
  /* src: url('/fonts/Optimistic-Text-Viet-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Viet Bold Swap';
  /* src: url('/fonts/Optimistic-Text-Viet-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Arbc Light';
  /* src: url('/fonts/Optimistic-Text-Arbc-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Arbc Light Swap';
  /* src: url('/fonts/Optimistic-Text-Arbc-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Arbc Normal';
  /* src: url('/fonts/Optimistic-Text-Arbc-Normal.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Arbc Normal Swap';
  /* src: url('/fonts/Optimistic-Text-Arbc-Normal-Swap.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Text Arbc Bold';
  /* src: url('/fonts/Optimistic-Text-Arbc-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Text Arbc Bold Swap';
  /* src: url('/fonts/Optimistic-Text-Arbc-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Light';
  /* src: url('/fonts/Optimistic-Display-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Light Swap';
  /* src: url('/fonts/Optimistic-Display-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Medium';
  /* src: url('/fonts/Optimistic-Display-Medium.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Medium Swap';
  /* src: url('/fonts/Optimistic-Display-Medium-Swap.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Semibold';
  /* src: url('/fonts/Optimistic-Display-Semibold.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Semibold Swap';
  /* src: url('/fonts/Optimistic-Display-Semibold-Swap.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Bold';
  /* src: url('/fonts/Optimistic-Display-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Bold Swap';
  /* src: url('/fonts/Optimistic-Display-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Viet Light';
  /* src: url('/fonts/Optimistic-Display-Viet-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Viet Light Swap';
  /* src: url('/fonts/Optimistic-Display-Viet-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Viet Medium';
  /* src: url('/fonts/Optimistic-Display-Viet-Medium.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Viet Medium Swap';
  /* src: url('/fonts/Optimistic-Display-Viet-Medium-Swap.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Viet Bold';
  /* src: url('/fonts/Optimistic-Display-Viet-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Viet Bold Swap';
  /* src: url('/fonts/Optimistic-Display-Viet-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Arbc Light';
  /* src: url('/fonts/Optimistic-Display-Arbc-Light.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Arbc Light Swap';
  /* src: url('/fonts/Optimistic-Display-Arbc-Light-Swap.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Arbc Medium';
  /* src: url('/fonts/Optimistic-Display-Arbc-Medium.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Arbc Medium Swap';
  /* src: url('/fonts/Optimistic-Display-Arbc-Medium-Swap.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic Display Arbc Bold';
  /* src: url('/fonts/Optimistic-Display-Arbc-Bold.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Optimistic Display Arbc Bold Swap';
  /* src: url('/fonts/Optimistic-Display-Arbc-Bold-Swap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic';
  /* src: url('/fonts/Optimistic.woff2') format('woff2-variations'); */
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic DM';
  /* src: url('/fonts/Optimistic-DM.woff2') format('woff2-variations'); */
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic';
  /* src: url('/fonts/Optimistic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic';
  /* src: url('/fonts/Optimistic.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic';
  /* src: url('/fonts/Optimistic.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic';
  /* src: url('/fonts/Optimistic.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic DM';
  /* src: url('/fonts/Optimistic-DM.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic DM';
  /* src: url('/fonts/Optimistic-DM.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic DM';
  /* src: url('/fonts/Optimistic-DM.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optimistic DM';
  /* src: url('/fonts/Optimistic-DM.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**405 @keyframes found** — these are the real animation definitions:

```
@keyframes x11uh2n3-B { ... }
@keyframes x17x9eqa-B { ... }
@keyframes x18re5ia-B { ... }
@keyframes x1a2jnmv-B { ... }
@keyframes x1ayzhmi-B { ... }
@keyframes x1dq47om-B { ... }
@keyframes x1e5kmei-B { ... }
@keyframes x1gnlf15-B { ... }
@keyframes x1ofn8cw-B { ... }
@keyframes x1prjo1g-B { ... }
@keyframes x1ql2n3s-B { ... }
@keyframes x1rp9ifn-B { ... }
@keyframes x1wh7uoa-B { ... }
@keyframes x5orj5x-B { ... }
@keyframes xa0jybu-B { ... }
@keyframes xb4s9mv-B { ... }
@keyframes xct2g7x-B { ... }
@keyframes xdyu7r2-B { ... }
@keyframes xepz06c-B { ... }
@keyframes xfa266b-B { ... }
@keyframes xi7h17f-B { ... }
@keyframes xm9i9jz-B { ... }
@keyframes xqng64z-B { ... }
@keyframes xqpjlbf-B { ... }
@keyframes xxe9hqe-B { ... }
@keyframes x10hy23f-B { ... }
@keyframes x10p3mwt-B { ... }
@keyframes x11n990g-B { ... }
@keyframes x11qf95d-B { ... }
@keyframes x122imku-B { ... }
@keyframes x12gbam3-B { ... }
@keyframes x12zu2tw-B { ... }
@keyframes x134v1xh-B { ... }
@keyframes x13f3g3z-B { ... }
@keyframes x13h2ri6-B { ... }
@keyframes x13iqtiu-B { ... }
@keyframes x13o1s23-B { ... }
@keyframes x14h38ek-B { ... }
@keyframes x15b941j-B { ... }
@keyframes x15fe748-B { ... }
@keyframes x162kelk-B { ... }
@keyframes x16dvpri-B { ... }
@keyframes x16e58t8-B { ... }
@keyframes x16mh4a0-B { ... }
@keyframes x16wqvv7-B { ... }
@keyframes x17jfkp3-B { ... }
@keyframes x17jjf1f-B { ... }
@keyframes x17jkpnd-B { ... }
@keyframes x17qceat-B { ... }
@keyframes x17t1eie-B { ... }
@keyframes x18z2xhc-B { ... }
@keyframes x1941mlr-B { ... }
@keyframes x19992v7-B { ... }
@keyframes x1a0t17s-B { ... }
@keyframes x1amuitr-B { ... }
@keyframes x1au9btt-B { ... }
@keyframes x1b5zhbi-B { ... }
@keyframes x1bo0rid-B { ... }
@keyframes x1bt8ye9-B { ... }
@keyframes x1bz70j3-B { ... }
@keyframes x1cb0228-B { ... }
@keyframes x1cdi11e-B { ... }
@keyframes x1cgexlj-B { ... }
@keyframes x1d02p50-B { ... }
@keyframes x1d6p7sg-B { ... }
@keyframes x1dczz02-B { ... }
@keyframes x1dt3o2o-B { ... }
@keyframes x1dttmnj-B { ... }
@keyframes x1ducqm7-B { ... }
@keyframes x1dv7npo-B { ... }
@keyframes x1e76n0x-B { ... }
@keyframes x1eda6j4-B { ... }
@keyframes x1eeoaws-B { ... }
@keyframes x1f6c42h-B { ... }
@keyframes x1f6cfk9-B { ... }
@keyframes x1fvlf2d-B { ... }
@keyframes x1g1nehv-B { ... }
@keyframes x1g2bfg7-B { ... }
@keyframes x1glc8v1-B { ... }
@keyframes x1glz76c-B { ... }
@keyframes x1gwdymx-B { ... }
@keyframes x1h06q2e-B { ... }
@keyframes x1hnsx2a-B { ... }
@keyframes x1hommyq-B { ... }
@keyframes x1hzbq9e-B { ... }
@keyframes x1i50id3-B { ... }
@keyframes x1iidg4s-B { ... }
@keyframes x1ilz389-B { ... }
@keyframes x1ioerbq-B { ... }
@keyframes x1iz1at6-B { ... }
@keyframes x1jn504y-B { ... }
@keyframes x1k6ogz6-B { ... }
@keyframes x1kicvpn-B { ... }
@keyframes x1kn22rf-B { ... }
@keyframes x1l548pc-B { ... }
@keyframes x1l9pw95-B { ... }
@keyframes x1lc970s-B { ... }
@keyframes x1lf1w26-B { ... }
@keyframes x1llolng-B { ... }
@keyframes x1lyzqu8-B { ... }
@keyframes x1m8w7c4-B { ... }
@keyframes x1mi9bte-B { ... }
@keyframes x1n29qb0-B { ... }
@keyframes x1nea2ps-B { ... }
@keyframes x1o2cvu9-B { ... }
@keyframes x1o38rka-B { ... }
@keyframes x1ojl3eo-B { ... }
@keyframes x1om8q5l-B { ... }
@keyframes x1pyf5go-B { ... }
@keyframes x1qaa5b8-B { ... }
@keyframes x1qbh088-B { ... }
@keyframes x1qcpmhj-B { ... }
@keyframes x1qe6f9p-B { ... }
@keyframes x1qrb0n5-B { ... }
@keyframes x1qy7vz2-B { ... }
@keyframes x1rutv7r-B { ... }
@keyframes x1rxwnei-B { ... }
@keyframes x1su1mo5-B { ... }
@keyframes x1sxsfc9-B { ... }
@keyframes x1t65o8e-B { ... }
@keyframes x1tky18x-B { ... }
@keyframes x1tnbox3-B { ... }
@keyframes x1u38n1b-B { ... }
@keyframes x1u5jowz-B { ... }
@keyframes x1uim2ro-B { ... }
@keyframes x1v6v46-B { ... }
@keyframes x1wc8ddo-B { ... }
@keyframes x1wtgnkq-B { ... }
@keyframes x1wv65fh-B { ... }
@keyframes x1wwg3pb-B { ... }
@keyframes x1wwg65c-B { ... }
@keyframes x1x235tc-B { ... }
@keyframes x1x35vq8-B { ... }
@keyframes x1xe4odj-B { ... }
@keyframes x1xih44t-B { ... }
@keyframes x1xkg3e2-B { ... }
@keyframes x1xpv006-B { ... }
@keyframes x1y4ubdb-B { ... }
@keyframes x1y6kkbj-B { ... }
@keyframes x1yayaqy-B { ... }
@keyframes x1ydxjbf-B { ... }
@keyframes x1yhv99v-B { ... }
@keyframes x1yicmcf-B { ... }
@keyframes x1yitzd3-B { ... }
@keyframes x1ylzpt7-B { ... }
@keyframes x26tqgn-B { ... }
@keyframes x2un0yo-B { ... }
@keyframes x30e9mo-B { ... }
@keyframes x36x7p0-B { ... }
@keyframes x3euffx-B { ... }
@keyframes x3meebn-B { ... }
@keyframes x44muo0-B { ... }
@keyframes x4m3fz-B { ... }
@keyframes x4pf8vx-B { ... }
@keyframes x4que31-B { ... }
@keyframes x510bz0-B { ... }
@keyframes x5ed7rf-B { ... }
@keyframes x5z2mxd-B { ... }
@keyframes x62wqjc-B { ... }
@keyframes x6a0n3x-B { ... }
@keyframes x6emwj5-B { ... }
@keyframes x6l6vjv-B { ... }
@keyframes x6lyuyf-B { ... }
@keyframes x6s4mmu-B { ... }
@keyframes x6vgncg-B { ... }
@keyframes x6ypnfw-B { ... }
@keyframes x72gtye-B { ... }
@keyframes x7lut5q-B { ... }
@keyframes x7o79ul-B { ... }
@keyframes x8k8xhn-B { ... }
@keyframes x94mwlt-B { ... }
@keyframes x95vr6w-B { ... }
@keyframes x9brfyo-B { ... }
@keyframes x9m8y1u-B { ... }
@keyframes x9o82i9-B { ... }
@keyframes x9uonht-B { ... }
@keyframes xa23vs7-B { ... }
@keyframes xa4qym0-B { ... }
@keyframes xad0qjf-B { ... }
@keyframes xaeq8qu-B { ... }
@keyframes xau7ne7-B { ... }
@keyframes xaz0mp3-B { ... }
@keyframes xb9r6ac-B { ... }
@keyframes xbb2stg-B { ... }
@keyframes xc30nr0-B { ... }
@keyframes xc6s8mv-B { ... }
@keyframes xcekhfk-B { ... }
@keyframes xci0in2-B { ... }
@keyframes xcud9oj-B { ... }
@keyframes xdc7f5d-B { ... }
@keyframes xdl9p37-B { ... }
@keyframes xecyd7v-B { ... }
@keyframes xekq5re-B { ... }
@keyframes xekv6nw-B { ... }
@keyframes xf7g9zl-B { ... }
@keyframes xfjni1l-B { ... }
@keyframes xg0bqix-B { ... }
@keyframes xgnty7z-B { ... }
@keyframes xh8ryfk-B { ... }
@keyframes xi44na9-B { ... }
@keyframes xid0vfn-B { ... }
@keyframes xik5d0p-B { ... }
@keyframes xivcp3y-B { ... }
@keyframes xj1bu7w-B { ... }
@keyframes xj58s1g-B { ... }
@keyframes xjbq84s-B { ... }
@keyframes xjbsbib-B { ... }
@keyframes xjlv7m0-B { ... }
@keyframes xjtpzzp-B { ... }
@keyframes xjzy2go-B { ... }
@keyframes xk9ub6v-B { ... }
@keyframes xkbs85h-B { ... }
@keyframes xlmqf6y-B { ... }
@keyframes xlnvh2b-B { ... }
@keyframes xlzop5p-B { ... }
@keyframes xmoea32-B { ... }
@keyframes xn7wtp8-B { ... }
@keyframes xnagvem-B { ... }
@keyframes xnhm9bl-B { ... }
@keyframes xnjai2g-B { ... }
@keyframes xo4mehg-B { ... }
@keyframes xosklw5-B { ... }
@keyframes xoypn1l-B { ... }
@keyframes xpe8glq-B { ... }
@keyframes xpsulm8-B { ... }
@keyframes xqgi8op-B { ... }
@keyframes xqrjyx1-B { ... }
@keyframes xrd6xbt-B { ... }
@keyframes xroe53j-B { ... }
@keyframes xrpqsqq-B { ... }
@keyframes xrq03c8-B { ... }
@keyframes xrq1uop-B { ... }
@keyframes xrvlesl-B { ... }
@keyframes xrys9fn-B { ... }
@keyframes xsalcmj-B { ... }
@keyframes xsjy64u-B { ... }
@keyframes xt09tg6-B { ... }
@keyframes xt0mdvi-B { ... }
@keyframes xtecffo-B { ... }
@keyframes xtut5q7-B { ... }
@keyframes xtwwzw5-B { ... }
@keyframes xu46iu7-B { ... }
@keyframes xuf935j-B { ... }
@keyframes xurh0p7-B { ... }
@keyframes xurz0lb-B { ... }
@keyframes xuvekqa-B { ... }
@keyframes xuxjsia-B { ... }
@keyframes xv3vjy1-B { ... }
@keyframes xv6qlei-B { ... }
@keyframes xvcgth7-B { ... }
@keyframes xvfaeil-B { ... }
@keyframes xvfq41r-B { ... }
@keyframes xvgakqy-B { ... }
@keyframes xvsum6m-B { ... }
@keyframes xw2c1lr-B { ... }
@keyframes xw5paif-B { ... }
@keyframes xw9syhp-B { ... }
@keyframes xwelvn4-B { ... }
@keyframes xwttq47-B { ... }
@keyframes xwv0xsu-B { ... }
@keyframes xx3xq1-B { ... }
@keyframes xx4g29r-B { ... }
@keyframes xxk0maj-B { ... }
@keyframes xyllbq6-B { ... }
@keyframes xyswhzy-B { ... }
@keyframes xyt3z58-B { ... }
@keyframes xz0nb1o-B { ... }
@keyframes xz28g5q-B { ... }
@keyframes xz9a51c-B { ... }
@keyframes xzk1luc-B { ... }
@keyframes xzl5p3y-B { ... }
@keyframes xzxrh4y-B { ... }
@keyframes x128cnzl-B { ... }
@keyframes x12ve19h-B { ... }
@keyframes x16ddlwn-B { ... }
@keyframes x18ehv3y-B { ... }
@keyframes x19100ke-B { ... }
@keyframes x1acst8a-B { ... }
@keyframes x1c5rxhy-B { ... }
@keyframes x1cgdbo3-B { ... }
@keyframes x1ex9r7y-B { ... }
@keyframes x1gpjdt6-B { ... }
@keyframes x1k1ooqk-B { ... }
@keyframes x1k35ma4-B { ... }
@keyframes x1m1m39n-B { ... }
@keyframes x1mp50o1-B { ... }
@keyframes x1ndz508-B { ... }
@keyframes x1nf8lo2-B { ... }
@keyframes x1rpdebt-B { ... }
@keyframes x1ryciyh-B { ... }
@keyframes x1uh2x5g-B { ... }
@keyframes x1xpn5z0-B { ... }
@keyframes x2fr1v2-B { ... }
@keyframes x3kebmg-B { ... }
@keyframes xbtpni2-B { ... }
@keyframes xcbnur6-B { ... }
@keyframes xezm938-B { ... }
@keyframes xfjf1k6-B { ... }
@keyframes xh7ukb3-B { ... }
@keyframes xjo493o-B { ... }
@keyframes xyg6gxy-B { ... }
@keyframes x108bjnd-B { ... }
@keyframes x10tv7ry-B { ... }
@keyframes x11u9963-B { ... }
@keyframes x13n5nbw-B { ... }
@keyframes x14jfetr-B { ... }
@keyframes x15r9g1w-B { ... }
@keyframes x15sr1ny-B { ... }
@keyframes x15zhjsf-B { ... }
@keyframes x16nvp8v-B { ... }
@keyframes x1a2ww29-B { ... }
@keyframes x1a4wkix-B { ... }
@keyframes x1as8byy-B { ... }
@keyframes x1bfxlh7-B { ... }
@keyframes x1bhl9ci-B { ... }
@keyframes x1bi1ooz-B { ... }
@keyframes x1cw24io-B { ... }
@keyframes x1d715j3-B { ... }
@keyframes x1dfh15z-B { ... }
@keyframes x1dzj15b-B { ... }
@keyframes x1g44x0y-B { ... }
@keyframes x1gqva0h-B { ... }
@keyframes x1iozoa8-B { ... }
@keyframes x1iv28ui-B { ... }
@keyframes x1k0lvzx-B { ... }
@keyframes x1kfvk6h-B { ... }
@keyframes x1mlxjs2-B { ... }
@keyframes x1n3bei-B { ... }
@keyframes x1ogx1q1-B { ... }
@keyframes x1q33amo-B { ... }
@keyframes x1q62cp-B { ... }
@keyframes x1qup8xx-B { ... }
@keyframes x1rjge42-B { ... }
@keyframes x1tbvpe3-B { ... }
@keyframes x1urmbgf-B { ... }
@keyframes x1uyvaw3-B { ... }
@keyframes x1vaitlj-B { ... }
@keyframes x1x75x3t-B { ... }
@keyframes x1xfhcd2-B { ... }
@keyframes x1xm33vj-B { ... }
@keyframes x1yx9fbo-B { ... }
@keyframes x20ecnf-B { ... }
@keyframes x5o88uj-B { ... }
@keyframes x6eqvi2-B { ... }
@keyframes x7aipop-B { ... }
@keyframes x7x9a0z-B { ... }
@keyframes x82s2v7-B { ... }
@keyframes xakykq-B { ... }
@keyframes xbbytl-B { ... }
@keyframes xblkng1-B { ... }
@keyframes xd8rm6s-B { ... }
@keyframes xg8za94-B { ... }
@keyframes xh6ds12-B { ... }
@keyframes xjr8c23-B { ... }
@keyframes xkbqzkk-B { ... }
@keyframes xklszg4-B { ... }
@keyframes xksm3bm-B { ... }
@keyframes xkwpvsy-B { ... }
@keyframes xnwwutg-B { ... }
@keyframes xny9xzy-B { ... }
@keyframes xq9yzpg-B { ... }
@keyframes xt32jjs-B { ... }
@keyframes xtg97e9-B { ... }
@keyframes xtsudri-B { ... }
@keyframes xtzinx8-B { ... }
@keyframes xu6fj14-B { ... }
@keyframes xw8jvj6-B { ... }
@keyframes xwmo42i-B { ... }
@keyframes xwuvrud-B { ... }
@keyframes xxodl7o-B { ... }
@keyframes xzldv9s-B { ... }
@keyframes x10d79vj-B { ... }
@keyframes x12mz89b-B { ... }
@keyframes x12vs5qm-B { ... }
@keyframes x17g3m7g-B { ... }
@keyframes x198o6hr-B { ... }
@keyframes x1abboh1-B { ... }
@keyframes x1d5rdki-B { ... }
@keyframes x1j9wv7b-B { ... }
@keyframes x1l8j7xx-B { ... }
@keyframes x1liewja-B { ... }
@keyframes x1oeejaw-B { ... }
@keyframes x1ofc7ps-B { ... }
@keyframes x1r6slxh-B { ... }
@keyframes x1rdabyo-B { ... }
@keyframes x1skbv1o-B { ... }
@keyframes x1vvv1pg-B { ... }
@keyframes x1wno3p8-B { ... }
@keyframes x5knlu5-B { ... }
@keyframes x6kwx11-B { ... }
@keyframes xc09407-B { ... }
@keyframes xf171sh-B { ... }
@keyframes xfgwaq2-B { ... }
@keyframes xhgbkhm-B { ... }
@keyframes xj6gsf6-B { ... }
@keyframes xlpjzj8-B { ... }
@keyframes xnhdmgo-B { ... }
@keyframes xsd6290-B { ... }
@keyframes xtalex9-B { ... }
@keyframes xy0uz84-B { ... }
@keyframes xyanyrv-B { ... }
@keyframes x19c8867-B { ... }
@keyframes x1t60l7a-B { ... }
@keyframes CSSFade_show { ... }
@keyframes CSSFade_hide { ... }
```

<details><summary>Full keyframes CSS (405 animations)</summary>

```css
@keyframes x11uh2n3-B{0%{stroke-dashoffset:0}}
@keyframes x17x9eqa-B{0%{transform:scale(1)}50%{transform:scale(1.02)}
@keyframes x18re5ia-B{0%{opacity:0}
@keyframes x1a2jnmv-B{0%{stroke-dashoffset:34}
@keyframes x1ayzhmi-B{0%{opacity:0;transform:translateY(0) scale(0) rotate(0)}18%{opacity:1;transform:translateY(-80px) scale(2.15) rotate(40deg)}35%{opacity:1;transform:translateY(-96px) scale(2.3) rotate(45deg)}50%{opacity:1;transform:translateY(-96px) scale(2.3) rotate(45deg)}64%{opacity:1;transform:translateY(-24px) scale(1.45) rotate(12deg)}78%{opacity:1;transform:translateY(0) scale(1.2) rotate(0)}
@keyframes x1dq47om-B{0%{transform:translate(0)}25%{transform:translate(10px,-10px)}50%{transform:translate(-10px,10px)}75%{transform:translate(10px,-10px)}
@keyframes x1e5kmei-B{0%{background-position:0% 50%;background-size:100% 100%}50%{background-position:100% 50%;background-size:120% 100%}
@keyframes x1gnlf15-B{0%{opacity:1;transform:translateY(0) scale(.2) rotate(0)}24%{opacity:1;transform:translateY(-30px) scale(1.15) rotate(25deg)}42%{opacity:1;transform:translateY(-100px) scale(1) rotate(-15deg)}54%{opacity:1;transform:translateY(-140px) scale(1) rotate(8deg)}78%{opacity:1;transform:translateY(-210px) scale(1) rotate(0)}88%{opacity:1;transform:translateY(-250px) scale(.9) rotate(0)}
@keyframes x1ofn8cw-B{0%{background-position:200% 0}
@keyframes x1prjo1g-B{0%{transform:scale(.95)}
@keyframes x1ql2n3s-B{0%{stroke-dashoffset:var(--x1qwegyo)}
@keyframes x1rp9ifn-B{0%{transform:rotate(180deg)}
@keyframes x1wh7uoa-B{0%{opacity:0;transform:scale(.9)}
@keyframes x5orj5x-B{0%{transform:translateY(200%)}
@keyframes xa0jybu-B{0%{opacity:1;transform:scale(1)}
@keyframes xb4s9mv-B{0%{background-position:-200% 0}
@keyframes xct2g7x-B{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.95)}
@keyframes xdyu7r2-B{0%{opacity:.3}50%{opacity:.6}
@keyframes xepz06c-B{0%{transform:translate(0)}
@keyframes xfa266b-B{0%{transform:translate(-100%)}
@keyframes xi7h17f-B{0%{transform:scaleY(.5)}50%{transform:scaleY(1)}
@keyframes xm9i9jz-B{0%{transform:translateY(0)}
@keyframes xqng64z-B{0%{transform:rotate(0)}
@keyframes xqpjlbf-B{0%{transform:scaleY(1)}50%{transform:scaleY(.5)}
@keyframes xxe9hqe-B{0%{transform:scale(0)}
@keyframes x10hy23f-B{0%{opacity:0;transform:translate(100%)}
@keyframes x10p3mwt-B{0%{opacity:.4}25%{opacity:.09}50%{opacity:.27}75%{opacity:.08}
@keyframes x11n990g-B{0%{opacity:0;transform:translateY(0)}10%{opacity:1;transform:translateY(-10px)}85%{opacity:1;transform:translateY(-180px)}
@keyframes x11qf95d-B{0%{opacity:1}
@keyframes x122imku-B{0%{height:0;opacity:0}
@keyframes x12gbam3-B{0%{visibility:visible}
@keyframes x12zu2tw-B{0%{-webkit-filter:blur(8px);filter:blur(8px);opacity:.1;transform:scale(.8)}
@keyframes x134v1xh-B{0%{opacity:0;transform:scale(.95) translateY(-8px)}
@keyframes x13f3g3z-B{0%{color:var(--always-white)}
@keyframes x13h2ri6-B{0%{left:15%}50%{left:30%}
@keyframes x13iqtiu-B{0%{opacity:.34}25%{opacity:.09}50%{opacity:.27}75%{opacity:.08}
@keyframes x13o1s23-B{0%{height:48px;opacity:1;width:48px}
@keyframes x14h38ek-B{0%{max-height:0;opacity:0;visibility:hidden}
@keyframes x15b941j-B{0%{opacity:0;transform:translateY(100%)}
@keyframes x15fe748-B{0%{opacity:0}
@keyframes x162kelk-B{0%{opacity:.19}50%{opacity:.07}
@keyframes x16dvpri-B{0%{opacity:var(--glimmer-opacity-max)}50%{opacity:var(--glimmer-opacity-min)}
@keyframes x16e58t8-B{0%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}
@keyframes x16mh4a0-B{0%{width:0%}
@keyframes x16wqvv7-B{0%{animation-timing-function:steps(1,end);background-color:var(--fds-blue-60)}10%{background-color:var(--always-white)}
@keyframes x17jfkp3-B{0%{height:8.5px}20%{height:13px}40%{height:5px}60%{height:11px}80%{height:6px}
@keyframes x17jjf1f-B{0%{width:330px}
@keyframes x17jkpnd-B{0%{-webkit-filter:blur(0px);filter:blur(0px);opacity:1}
@keyframes x17qceat-B{0%{opacity:1}
@keyframes x17t1eie-B{0%{height:4px}50%{height:8px}
@keyframes x18z2xhc-B{0%{inset-inline-start:10%;top:12%}25%{inset-inline-start:35%;top:12%}50%{inset-inline-start:35%;top:35%}75%{inset-inline-start:10%;top:35%}
@keyframes x1941mlr-B{0%{stroke-dashoffset:36.4px;transform:rotate(-90deg)}25%{stroke-dashoffset:164px;transform:rotate(162deg)}50%{stroke-dashoffset:82px;transform:rotate(72deg)}75%{stroke-dashoffset:164px;transform:rotate(162deg)}
@keyframes x19992v7-B{0%{transform:scale(1)}30%{transform:scale(1.1)}95%{transform:scale(1.2)}
@keyframes x1a0t17s-B{0%{transform:translate(2px)}
@keyframes x1amuitr-B{0%{opacity:0;transform:scaleY(.95)}
@keyframes x1au9btt-B{0%{pointer-events:none;transform:translateY(100%)}99%{pointer-events:none}
@keyframes x1b5zhbi-B{0%{height:40px;opacity:1}
@keyframes x1bo0rid-B{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes x1bt8ye9-B{0%{stroke-dashoffset:18.8px;transform:rotate(-90deg)}25%{stroke-dashoffset:84.8px;transform:rotate(162deg)}50%{stroke-dashoffset:42.4px;transform:rotate(72deg)}75%{stroke-dashoffset:84.8px;transform:rotate(162deg)}
@keyframes x1bz70j3-B{0%{opacity:0;transform:translateY(20px)}
@keyframes x1cb0228-B{0%{height:0;opacity:0}
@keyframes x1cdi11e-B{0%{opacity:0;transform:scale(.1)}
@keyframes x1cgexlj-B{0%{transform:scale(1.15)}
@keyframes x1d02p50-B{0%{opacity:0;transform:translateY(var(--x14mr4ln))}
@keyframes x1d6p7sg-B{0%{opacity:1;transform:scale(1)}50%{transform:scale(var(--BasePulseEffect_containerScaleXFactorAt50),var(--BasePulseEffect_containerScaleYFactorAt50))}
@keyframes x1dczz02-B{0%{background-position:50% 0%}50%{background-position:50% 100%}
@keyframes x1dt3o2o-B{0%{background-color:transparent}
@keyframes x1dttmnj-B{to{color:var(--primary-text)}}
@keyframes x1ducqm7-B{0%{transform:scaleX(1)}50%{transform:scaleX(1.15)}
@keyframes x1dv7npo-B{to{opacity:0;transform:translate(-16px)}}
@keyframes x1e76n0x-B{0%{opacity:0;transform:translate3d(0,-100%,0)}
@keyframes x1eda6j4-B{0%{opacity:0;transform:translateY(100%)}
@keyframes x1ee
```
</details>

### Brand Gradient Palette

**20 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(90deg, #F8E00B 0%, #F87024 20%, #F81878 40%, #F83AD6 60%, #8341ED 80%, #403FEE 100%);

/* Gradient 2 */
background: linear-gradient(to bottom,transparent 0%,var(--card-background);

/* Gradient 3 */
background: linear-gradient(135deg,#ffd600,#ff7a00,#ff0169,#d300c5 75%);

/* Gradient 4 */
background: linear-gradient(0deg,#0000006b 14.56%,#00000049 50.91%,#0000);

/* Gradient 5 */
background: radial-gradient(50% 50% at 50% 50%,#fff0,#ffffff21 73.7%,#fff);

```

### Hover State CSS (Intercepted)

**18 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.x1lku1pv:hover{text-decoration:none}

.xt0b8zv:hover{text-decoration:underline}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 825 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**210 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`256px` · `280px` · `299px` · `320px` · `340px` · `359px` · `360px` · `375px` · `389px` · `390px` · `400px` · `404px` · `420px` · `422px` … (+196 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `12px`×499 · `14px`×247 · `18px`×27 · `48px`×20 · `16px`×16 · `24px`×6 · `28px`×6 · `64px`×2

**Radius scale** (× = paint count): `24px`×19 · `100px`×15 · `32px`×3 · `999px`×2 · `12px`×2

**Weights** (× = paint count): `400`×741 · `700`×40 · `500`×24 · `300`×10 · `600`×8

**Layout gaps** (× = paint count): `normal 4px`×9 · `20px normal`×5 · `8px 16px`×5 · `24px normal`×4 · `normal 8px`×3 · `normal 12px`×2 · `80px`×2 · `64px`×2

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background:#fff; color:#1c1e21; background-color:rgb(255, 255, 255) }
body { background-color:#fff }
h2 { color:var(--x1y1vcbx) }
@media (min-width: 1025px) h2 { font-size:4rem }
@media (min-width: 1025px) h2 { font-weight:500 }
@media (min-width: 1025px) h2 { font-family:Optimistic VF,Montserrat,Helvetica,Arial,Noto Sans,sans-serif }
a { color:#385898 }
a { color:var(--x1gy3fwr) }
a { background-color:var(--x1ikcymc) }
input { background-color:#fff; color:#1c1e21 }
input { font-weight:400 }
@media (min-width: 1025px) input { font-size:1rem }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://meta.com | 2026-06-11T05:01:35.316Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*