---
version: alpha
name: airbnb.com
description: "Light product system built on #ffffff with #ff385c as the primary CTA accent. Type anchored in Airbnb Cereal VF at 22px / weight 500. Extracted automatically from https://airbnb.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  airbnb.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(255, 56, 92) as the high-saturation accent for primary actions.
  Generously rounded CTAs (32px) suggest approachable, content-first design alongside Airbnb Cereal VF as the primary typeface.
  A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#ebebeb"
  surface-2: "#f2f2f2"
  ink: "#222222"
  ink-subtle: "#8c8c8c"
  primary: "#ff385c"
  on-primary: "#111111"
  primary-hover: "#e00b41"
  hairline: "#6a6a6a"
  primary-focus: "#222222"
  semantic-error: "#b32505"
  semantic-success: "#008a05"
  semantic-warning: "#e07912"
  semantic-info: "#428bff"

typography:
  display-xl:
    fontFamily: "Airbnb Cereal VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.03
    letterSpacing: 0
  display-md:
    fontFamily: "Airbnb Cereal VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: -0.44px
  body:
    fontFamily: "Airbnb Cereal VF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 32px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  button-pill-2:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  input-text-input:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 48px
  search-bar-search-bar:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 48px

extracted_at: "2026-06-11T05:10:59.674Z"
completeness: 88
scoreVersion: "v2"

---

# Design System — airbnb.com
> Extracted automatically by Prism from https://airbnb.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**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Airbnb Cereal VF) | "Inspiration for future getaway" |
| Color assertion | dual-accent | #ff385c |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 200 keyframes, 10 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(255, 56, 92)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px 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

**Signature:** a multi-stop brand gradient (a hero mesh/ribbon — usually an SVG or image, not a CSS background) — colours: #59086E, #460479, #440589, #E61E4D, #E31C5F. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

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

Typography is anchored in **Airbnb Cereal VF**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Hof (`#222222`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Rausch** (`#ff385c`) 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 is built from multi-layer shadow stacks (4 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: White (`#ffffff`)
- Primary typeface: Airbnb Cereal VF
- Primary text: Hof (`#222222`)
- Accent: Rausch (`#ff385c`)
- Shadow system: 4 distinct elevation levels
- Custom fonts loaded: Airbnb Cereal VF

## 2. Color Palette & Roles

### Background & Surface
- **White** (`#ffffff`): Page background (primary)
- **Faint** (`#f7f7f7`): Surface / elevated background (CSS var)
- **Palette Bg Quaternary** (`#f2f2f2`): Surface / elevated background (CSS var)
- **Bebe** (`#ebebeb`): Surface / elevated background (CSS var)
- **Palette Bg Primary Error** (`#fff8f6`): Surface / elevated background (CSS var)

### Text & Content
- **Hof** (`#222222`): Primary body text
- **Palette Text Secondary Error Hover** (`#b32505`): Text (CSS var)
- **Spruce** (`#008a05`): Text (CSS var)
- **Palette Icon Tertiary** (`#8c8c8c`): Text (CSS var)
- **Arches** (`#c13515`): Text (CSS var)

### Accent & Interactive
- **Rausch** (`#ff385c`): Accent / interactive (CSS var)
- **Palette Bg Tertiary Core** (`#e00b41`): Accent / interactive (CSS var)
- **Bobo** (`#b0b0b0`): Accent / interactive (CSS var)
- **Palette Rausch800** (`#a21039`): Accent / interactive (CSS var)
- **Palette Rausch1000** (`#361a21`): Accent / interactive (CSS var)
- **Luxe** (`#460479`): Accent / interactive (CSS var)
- **Plus** (`#92174d`): Accent / interactive (CSS var)

### Border & Divider
- **Palette Border Primary Hover** (`#000000`): Border (CSS var)
- **Deco** (`#dddddd`): Border (CSS var)
- **Light Grey** (`#c1c1c1`): Borders / dividers

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

- `#6a6a6a` — Foggy
- `#6c6c6c` — Slate Grey
- `#fff5f3` — Snow *(token)*
- `#e61e4d` — Ruby *(token)*
- `#e31c5f` — Ruby *(token)*
- `#d70466` — #d70466 *(token)*
- `#8dd19e` — #8dd19e *(token)*
- `#ddedfe` — Light Gray *(token)*
- `#59086e` — #59086e *(token)*
- `#440589` — #440589 *(token)*
- `#fff5f6` — Off-White *(token)*
- `#c6e0fe` — Light Blue *(token)*
- `#162339` — Navy Blue *(token)*
- `#a3150f` — #a3150f *(token)*
- `#bd1e59` — #bd1e59 *(token)*
- `#8f3400` — Chocolate *(token)*
- `#be4900` — #be4900 *(token)*
- `#fdf5fb` — Off-White *(token)*
- `#772320` — #772320 *(token)*
- `#bd31a1` — #bd31a1 *(token)*
- `#f84a43` — Vermillion *(token)*
- `#861453` — #861453 *(token)*
- `#6c0d63` — #6c0d63 *(token)*
- `#ffaca5` — #ffaca5 *(token)*
- `#c5c1bb` — Light Grey *(token)*
- `#166bd8` — M Tricolor Blue *(token)*
- `#12a139` — Success Green *(token)*
- `rgba(240, 240, 240, 0.86)` — Translucent Light Gray (86%) *(token)*
- `#f7b383` — #f7b383 *(token)*
- `#6a255e` — #6a255e *(token)*
- `rgba(250, 250, 250, 0.72)` — Translucent Off-White (72%) *(token)*
- `#94c5fd` — Baby Blue *(token)*
- *…+65 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%)` — (--palette-luxe-gradient-linear-gradient-rtl)
- `linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%)` — (--palette-rausch-gradient-linear-gradient-rtl)
- `radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1…` — (--palette-rausch-gradient-radial-gradient)
- `linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%)` — (--palette-plus-gradient-linear-gradient-rtl)
- `linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%)` — (--palette-rausch-gradient-linear-gradient)
- `radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 72.5%,#6C0D63 90%,#6C0D6…` — (--palette-plus-gradient-radial-gradient)
- `linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%)` — (--palette-plus-gradient-linear-gradient)
- `linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%)` — (--palette-luxe-gradient-linear-gradient)

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--spacing-macro24px`: `24px`
- `--typography-tracking-normal-letter-spacing`: `normal`
- `--typography-titles-medium_14_18-letter-spacing`: `normal`
- `--typography-body-paragraphs-text_16_22-letter-spacing`: `normal`

**Font Size Token**
- `--typography-subtitles-book_18_24-font-size`: `1.125rem`
- `--typography-body-text_14_18-font-size`: `0.875rem`
- `--typography-body-text_16_20-font-size`: `1rem`
- `--typography-titles-medium_14_18-font-size`: `0.875rem`

**Motion Token**
- `--motion-springs-fast-bounce-source-mass`: `1px`
- `--motion-springs-slow-easing`: `linear(0,0.1726495179466309,0.44139132340393467,0.6575338740242772,0.8021357455779029,0.890693569...`
- `--motion-springs-fast-easing`: `linear(0,0.18557241650572898,0.46530560393651493,0.6823338821577483,0.8223254801509006,0.90497441...`

**Shadow Token**
- `--palette-shadow350`: `rgba(0,0,0,0.28)`
- `--palette-shadow50`: `rgba(0,0,0,0.04)`
- `--palette-shadow300`: `rgba(0,0,0,0.20)`
- `--elevation-elevation1-box-shadow`: `0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 4px 0px rgba(0,0,0,0.16)`

**Font Weight Token**
- `--typography-titles-medium_14_18-font-weight`: `500`
- `--typography-titles-medium_18_24-font-weight`: `500`
- `--typography-special-display-medium_40_44-font-weight`: `600`
- `--typography-titles-semibold_14_18-font-weight`: `600`

**Border Radius Token**
- `--corner-radius-xxlarge28px-border-radius`: `28px`
- `--corner-radius-medium12px-border-radius`: `12px`
- `--corner-radius-small8px-border-radius`: `8px`
- `--corner-radius-tiny4px-border-radius`: `4px`

**Other tokens**
- `--palette-bg-primary-core`: `#FF385C`
- `--palette-bg-primary-selected`: `#F7F7F7`
- `--palette-bg-tertiary-core`: `#E00B41`
- `--palette-border-primary-inverse`: `#FFFFFF`
- `--palette-text-secondary-error-hover`: `#B32505`
- `--palette-icon-primary`: `#222222`
- `--typography-body-text_16_20-line-height`: `1.25rem`
- `--palette-text-primary-inverse`: `#FFFFFF`

## 3. Typography Rules

### Font Families
- **Primary**: `Airbnb Cereal VF`

### Custom Fonts Loaded
- **Airbnb Cereal VF** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Special Display Medium | Airbnb Cereal VF | 72px | 600 | 1.03 | normal | Typography system token (72px/74px) |
| Special Display Medium | Airbnb Cereal VF | 60px | 600 | 1.13 | normal | Typography system token (60px/68px) |
| Special Display Medium | Airbnb Cereal VF | 48px | 600 | 1.13 | normal | Typography system token (48px/54px) |
| Special Display Medium | Airbnb Cereal VF | 40px | 600 | 1.1 | normal | Typography system token (40px/44px) |
| Titles Semibold | Airbnb Cereal VF | 32px | 600 | 1.13 | normal | Typography system token (32px/36px) |
| Display Hero | Airbnb Cereal VF | 28px | 700 | 1.43 | normal | Main headline (h1) |
| Titles Semibold | Airbnb Cereal VF | 26px | 600 | 1.15 | normal | Typography system token (26px/30px) |
| Sub-heading | Airbnb Cereal VF | 22px | 500 | 1.18 | -0.44px | Section titles (h2) |
| Titles Semibold | Airbnb Cereal VF | 22px | 600 | 1.18 | normal | Typography system token (22px/26px) |
| Subtitles Book | Airbnb Cereal VF | 18px | 400 | 1.33 | normal | Typography system token (18px/24px) |
| Titles Semibold | Airbnb Cereal VF | 18px | 600 | 1.33 | normal | Typography system token (18px/24px) |
| Titles Medium | Airbnb Cereal VF | 18px | 500 | 1.33 | normal | Typography system token (18px/24px) |
| Body Text | Airbnb Cereal VF | 16px | 400 | 1.25 | normal | Typography system token (16px/20px) |
| Sub-heading | Airbnb Cereal VF | 14px | 500 | 1.29 | normal | Third-level heading (h3) |
| Body | Airbnb Cereal VF | 14px | 400 | 1.43 | normal | Standard reading text |

### Font Weight Scale

CSS custom properties define 16 explicit weight steps:
- `--typography-subtitles-book_18_24-font-weight`: `400` — Regular
- `--typography-subtitles-book_14_18-font-weight`: `400` — Regular
- `--typography-subtitles-book_16_22-font-weight`: `400` — Regular
- `--typography-titles-medium_14_18-font-weight`: `500` — Medium
- `--typography-titles-medium_18_24-font-weight`: `500` — Medium
- `--typography-titles-medium_16_20-font-weight`: `500` — Medium
- `--typography-special-display-medium_40_44-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_14_18-font-weight`: `600` — SemiBold
- `--typography-special-display-medium_72_74-font-weight`: `600` — SemiBold
- `--typography-special-display-medium_48_54-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_16_20-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_26_30-font-weight`: `600` — SemiBold
- `--typography-special-display-medium_60_68-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_18_24-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_22_26-font-weight`: `600` — SemiBold
- `--typography-titles-semibold_32_36-font-weight`: `600` — SemiBold

### Full Font Size Scale

Sizes detected in the design (descending): `28px`, `20px`, `16px`, `14px`, `13px`, `12px`, `11px`, `8px`

> 5 size(s) detected outside the sampled hierarchy (20px, 13px, 12px, 11px, 8px). 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:

- **tabular figures** (`tnum`) — numbers align vertically, essential for pricing tables and dashboards
- **lining figures** (`lnum`) — full-height numbers, more authoritative than old-style

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "salt", "tnum", "lnum";
}
```

## 4. Component Stylings

### Buttons

**Pill**
- Background: `transparent`
- Text: `#222222` `{colors.primary-focus}`
- Padding: 0px
- Radius: 40px 4px 4px 40px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Focus: boxShadow: `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px `

**Ghost**
- Background: `transparent`
- Text: `#222222` `{colors.primary-focus}`
- Padding: 0px
- Radius: 32px
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: boxShadow: `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px `

**Pill**
- Background: `transparent`
- Text: `#222222` `{colors.primary-focus}`
- Padding: 0px
- Radius: 50px
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Focus: boxShadow: `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px `

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `#222222` `{colors.primary-focus}`
- Padding: 0px
- Radius: 0px
- Border: 0px none rgb(34, 34, 34)
- Font: 14px weight 500
- Use: Text fields, search inputs

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px 48px
- Radius: none
- Font: 14px weight 400
- Use: Static flex nav — N/A items

### Search Bar

**Search Bar**
- Background: `transparent`
- Text: `#222222` `{colors.primary-focus}`
- Padding: 0px 48px
- Radius: 0px
- Font: 14px weight 400
- Use: Inline search form


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **focus:** shadow added

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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
    focus:
      bg: "transparent"
      fg: "inherit"
      shadow: "rgb(255, 255, 255) 0px 0px 0px 2px, rgb(34, 34, 34) 0px 0px "
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 56, 92)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
    hover:
      bg: "transparent"
      fg: "inherit"
```

**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
- **2 shape(s)** in this system: `Pill`, `Ghost`
- **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

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Search Bar
- **1 shape(s)** in this system: `Search Bar`
- **DO NOT introduce new search bar variants** without justification

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
1920px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `40px 4px 4px 40px` |
| Inputs & Forms | `0px` |
| Navigation | `none` |
| Search Bar | `0px` |
| Page Body | `0px` |
| Primary Input | `0px` |

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

**Full Radius Spectrum**: 0px, 1.5px, 8px, 9px, 10px, 14px, 20px, 32px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

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

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | 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** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | 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).

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** split-right-text — Split layout, media-left/text-right — image in left column, heading + body in right column. Less common variant.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Airbnb homepage" — 28px left-aligned
- **Subheading:** "Earn Airbnb credit at featured hotels"
- **Media:** present, positioned left
- **CTAs:** 15 (primary: "Become a host")
- **Clone instruction:** Reproduce the **split-right-text** layout. Use the heading font-size token at the documented size. Place media left of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 80px
- **Logo:** ✗ absent
- **Nav links:** 0 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 9 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1425×313px (aspect 4.55:1)
- **Gap:** 0px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~4.55:1 aspect ratio. Each card has an image at the top.

### Pricing Table Pattern

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

### Footer Pattern

- **Columns:** 3
- **Links:** 31 total
- **Height:** 669px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 3-column footer with ~10 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 |
| Inset (Level 1) | <br>`rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px`,<br>`rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px`,<br>`rgb(0, 28, 64) 0px 0px 2px 0.5px inset`,<br>`rgb(215, 235, 255) 0px -1px 3px 0px inset` | Buttons, pressed-state elements |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.02) 0px 0px 0px 1px`,<br>`rgba(0, 0, 0, 0.1) 0px 8px 24px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.02) 0px 0px 0px 1px`,<br>`rgba(0, 0, 0, 0.04) 0px 2px 6px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 4px 8px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.02) 0px 0px 0px 1px`,<br>`rgba(0, 0, 0, 0.16) 0px 2px 4px 0px` | Cards, elevated surfaces |

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

### Elevation Scale (CSS Tokens)

| Level | Shadow Value |
|-------|-------------|
| primary-border | `1px solid rgba(0,0,0,0.04)` |
| 2-box-shadow | `0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 6px 0px rgba(0,0,0,0.04),0px 4px 8px 0px rgba(...` |
| 1-box-shadow | `0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 4px 0px rgba(0,0,0,0.16)` |
| 4-box-shadow | `0px 0px 0px 1px rgba(0,0,0,0.02),0px 4px 8px 0px rgba(0,0,0,0.08),0px 12px 30px 0px rgb...` |
| tertiary-box-shadow | `0 2px 4px rgba(0,0,0,0.18)` |
| 3-box-shadow | `0px 0px 0px 1px rgba(0,0,0,0.02),0px 8px 24px 0px rgba(0,0,0,0.10)` |

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--motion-springs-slow-easing` | `linear(0,0.1726495179466309,0.44139132340393467,0.6575338...` | Spring Easing — Physics-Based |
| `--motion-springs-fast-easing` | `linear(0,0.18557241650572898,0.46530560393651493,0.682333...` | Spring Easing — Physics-Based |
| `--motion-springs-medium-bounce-easing` | `linear(0,0.17056804830171035,0.47921259292635127,0.749704...` | Spring Easing — Physics-Based |
| `--motion-springs-standard-easing` | `linear(0,0.15794349142280711,0.4146686698630492,0.6303103...` | Spring Easing — Physics-Based |
| `--motion-springs-slow-bounce-easing` | `linear(0,0.17157063121773947,0.4812770425544863,0.7518340...` | Spring Easing — Physics-Based |
| `--motion-springs-fast-bounce-easing` | `linear(0,0.25484239226416866,0.643483807710504,0.90617420...` | Spring Easing — Physics-Based |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--motion-springs-slow-bounce-duration` | `762.2807017543847ms` | Cinematic |
| `--motion-springs-slow-duration` | `745.6140350877179ms` | Cinematic |
| `--motion-springs-medium-bounce-duration` | `574.1228070175433ms` | Slow |
| `--motion-springs-fast-bounce-duration` | `449.12280701754327ms` | Slow |
| `--motion-springs-fast-duration` | `451.75438596491193ms` | Slow |
| `--motion-springs-standard-duration` | `583.7719298245607ms` | Slow |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.25s cubic-bezier(0.2, 0, 0, 1);
```

**Opacity**
```css
transition: opacity 0.175s cubic-bezier(0, 0, 1, 1);
```

**Transform**
```css
transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
```

**Transform**
```css
transition: transform 0.451754s linear(0 0%, 0.185572 10%, 0.465306 20%, 0.682334 30%, 0.822325 40%, 0.904974 50%, 0.951289 60%, ...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `dot-xefpb8` | Fade | opacity | UI transition |
| `dot-kkmion` | Fade | opacity | UI transition |
| `dot-pulse-18sbrvj` | Fade | opacity | Attention / status |
| `fadeEnter-14e8nj2` | Fade | opacity | Element entrance |
| `dls_sheets_fadeIn-14e8nj2` | Fade | opacity | Element entrance |
| `dls_sheets_slideUp-14e8nj2` | Slide | transform | Panel / drawer enter |
| `fadeLeave-1f0cb0c` | Fade | opacity | Element exit |
| `dls_sheets_fadeOut-1f0cb0c` | Fade | opacity | Element exit |
| `dls_sheets_slideDown-1f0cb0c` | Slide | transform | Panel / drawer enter |
| `dls_sheets_slideDownOut-1f0cb0c` | Fade + Move | transform, opacity | Panel / drawer enter |
| `overlayEnterLinaria-pxdfzy` | Fade | opacity | Element entrance |
| `overlayLeave-16a97i2` | Fade | opacity | Element exit |
| `selectCheckSlideIn-um18ze` | Fade + Move | opacity, transform | Panel / drawer enter |
| `fadeEnter-1enl5jb` | Fade | opacity | Element entrance |
| `dls_sheets_fadeIn-1enl5jb` | Fade | opacity | Element entrance |
| `dls_sheets_slideUp-1enl5jb` | Slide | transform | Panel / drawer enter |
| `slideEnter-1qxmz00` | Fade + Move | opacity, transform | Element entrance |
| `fadeEnter-v8n6sz` | Fade | opacity | Element entrance |
| `slideLeave-osd9gb` | Fade + Move | opacity, transform | Element exit |
| `fadeLeave-zj50hh` | Fade | opacity | Element exit |

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

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `449ms`)
- **Dominant Easing**: physics-based spring curves
- **Animation Library**: 200 unique animations (200 total including variants)

> This design moves with deliberate & calm timing using physics-based spring curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Hof (`#222222`) for text — not pure black, it's warmer and more readable
- Use Airbnb Cereal VF as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Rausch (`#ff385c`) as the primary accent — it's the brand's signature interactive color
- Use 32px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Maintain nav height at 80px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Build the hero as a split layout with media on the right — text and visual share equal weight
- Include exactly 15 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a top image — imagery is part of the card identity, not optional
- Place 2 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 substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 32px 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(255, 56, 92)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(255, 56, 92)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 357px | Single column, compact spacing |
| Mobile | 474px | Single column, compact spacing |
| Mobile Large | 650px | Expanded mobile layout |
| Mobile Large | 743px | Expanded mobile layout |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1127px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | display | `flex` | `grid` |
| nav | height | `80px` | `152.359px` |
| button | width | `141px` | `327px` |

### Collapsing Strategy
- Navigation: flex → grid on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 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):

- **Hero collapses split-right-text → centered** — the side-by-side layout stacks vertically, with media moving above the text.
- **Hero CTAs:** 15 on desktop → 20 on mobile.
- **Footer columns collapse:** 3 columns (desktop) → 1 column (mobile).


## 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(32px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 6 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: glassmorphism (10 layers), non-rectangular shapes (10), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.

**Canonical Brand Image (OG):**
- https://a0.muscache.com/im/pictures/fe7217ff-0b24-438d-880d-b94722c75bf5.jpg
  *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.05:1 (square / portrait)
- Rendered size: 180×171px
- *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): 0 (0%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 86 (100%)

**Media Format Mix:**
- JPG: 58 (typically photographic content)
- PNG: 28 (logos, transparent UI elements, mockups)

**Average rendered image size:** 162×154px
**Above-fold image count:** 16 / 86

**Decorative Patterns Detected:**
- 6 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 4 radial gradients — circular color blooms used for spotlight/glow effects
- **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:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: White (`#ffffff`)
- Primary text: Hof (`#222222`)
- Accent: Rausch (`#ff385c`)
- Border: Foggy (`#6a6a6a`)
- Font: Airbnb Cereal VF
- Body: 14px weight 400

### Example Component Prompts
- "Create a hero section on White background (#ffffff). Headline at 28px Airbnb Cereal VF weight 700, line-height 1.43, color #222222."
- "Create the primary CTA button: `#ff385c` background, `#222222` text, 40px 4px 4px 40px border-radius, 11px 21px padding, 700 weight, Airbnb Cereal VF font."
- "Build navigation: relative on `#ffffff`. Airbnb Cereal VF 14px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in Airbnb Cereal VF, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Rausch (`#ff385c`) is the sole interactive color. On hover → Tertiary (`#e00b41`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use physics-based spring curves. Timing: 449ms for micro-interactions, 584ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `32px`. 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-background: #ffffff;
  --ca-surface-1: #ebebeb;
  --ca-surface-2: #f2f2f2;
  --ca-primary-focus: #222222;
  --ca-ink-subtle: #8c8c8c;
  --ca-primary: #ff385c;
  --ca-on-primary: #111111;
  --ca-primary-hover: #e00b41;
  --ca-hairline: #6a6a6a;
  --ca-semantic-error: #b32505;
  --ca-semantic-success: #008a05;
  --ca-semantic-warning: #e07912;
  --ca-semantic-info: #428bff;
}

/* Typography */
:root {
  --ca-font-primary: "Airbnb Cereal VF", system-ui, sans-serif;
  --ca-text-display: 72px;
  --ca-text-body: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}
```


## 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: feature-section
    tag: div
    height: 3997px
    width: 1425px
    layout: block
    children: 1
  - section: header
    tag: header
    classes: ["c2zxfaj", "dir", "dir-ltr"]
    height: 96px
    width: 1425px
    layout: flex-row justify=space-between
    children: 4
    padding: "0px 48px"
  - section: navigation
    tag: nav
    classes: ["cg7l307", "dir", "dir-ltr"]
    height: 80px
    width: 227px
    layout: flex-row justify=flex-end
    children: 2
  - section: content-section
    tag: main
    classes: ["m1460ofs", "dir", "dir-ltr"]
    height: 2814px
    width: 1425px
    layout: block
    children: 1
  - section: navigation
    tag: div
    classes: ["c148ie1q", "dir", "dir-ltr"]
    height: 154px
    width: 1329px
    layout: grid: 21-col gap=10px
    children: 21
    padding: "4px 0px"
  - section: navigation
    tag: div
    classes: ["c148ie1q", "dir", "dir-ltr"]
    height: 168px
    width: 1329px
    layout: grid: 9-col gap=10px
    children: 9
    padding: "4px 0px"
  - section: footer
    tag: footer
    classes: ["f12ytkur", "dir", "dir-ltr"]
    height: 669px
    width: 1425px
    layout: block
    children: 1
    bg: "rgb(247, 247, 247)"
    vertical-padding: ~40px
    padding: "0px 0px 80px"
  - section: section
    tag: section
    classes: ["se5ui3x", "dir", "dir-ltr"]
    height: 414px
    width: 432px
    layout: block
    children: 2
  - section: section
    tag: section
    classes: ["se5ui3x", "dir", "dir-ltr"]
    height: 414px
    width: 432px
    layout: block
    children: 2
  - section: section
    tag: section
    classes: ["se5ui3x", "dir", "dir-ltr"]
    height: 414px
    width: 432px
    layout: block
    children: 2
```

**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:
    - "Popular homes in Marseille"
    - "Inspiration for future getaways"
  sub-headings:
    - "Support"
  ctas:
    - "When Add dates"
    - "Become a host"
  navigation:
    - "Louvre Museum"
    - "Seine"
    - "Palace of Versailles"
    - "Landmarks"
    - "Museums"
    - "Tastings"
    - "Cooking"
    - "Cultural tours"
    - "Food tours"
    - "Art workshops"
  footer-links:
    - "Help Center"
```

**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:
  product:
    count: 40
    avg-ratio: 1.05
    common-aspect: "~1:1 square"
  thumbnail:
    count: 10
    avg-ratio: 1.05
    common-aspect: "~1:1 square"
```

**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">
  When
Add dates
</button>
```
_Source pattern detected: padding `0px` · radius `32px` · 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** 4 · **other** 56

**Projects / case studies detected** (clustered by URL + featured image):

*S* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Popular homes in Marseille | — | https://www.airbnb.com/s/Marseille/homes?place_id=ChIJufuY_v68yRIRlXuYpamuR3g&refinement_paths%5B%5D=%2Fhomes&flexible_trip_lengths%5B%5D=weekend_trip&date_picker_type=FLEXIBLE_DATES&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Earn Airbnb credit at featured hotels Use it | — | https://www.airbnb.com/s/Marseille/homes?place_id=ChIJufuY_v68yRIRlXuYpamuR3g&refinement_paths%5B%5D=%2Fhomes&flexible_trip_lengths%5B%5D=weekend_trip&date_picker_type=FLEXIBLE_DATES&kg_and_tags%5B%5D=Tag%3A9613&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Available next month in Nice | — | https://www.airbnb.com/s/Nice/homes?place_id=ChIJBdB1TDSuzRIRcKr1eFJ3l8E&refinement_paths%5B%5D=%2Fhomes&date_picker_type=FLEXIBLE_DATES&flexible_trip_lengths%5B%5D=WEEKEND_TRIP&flexible_trip_dates%5B%5D=july&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Stay in Deauville | — | https://www.airbnb.com/s/Deauville/homes?place_id=ChIJcYZXxLrU4UcRUPG8T0gUDAQ&refinement_paths%5B%5D=%2Fhomes&flexible_trip_lengths%5B%5D=weekend_trip&date_picker_type=FLEXIBLE_DATES&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Available next month in Barcelona | — | https://www.airbnb.com/s/Barcelona/homes?place_id=ChIJ5TCOcRaYpBIRCmZHTz37sEQ&refinement_paths%5B%5D=%2Fhomes&date_picker_type=FLEXIBLE_DATES&flexible_trip_lengths%5B%5D=WEEKEND_TRIP&flexible_trip_dates%5B%5D=july&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Explore experiences nearby | — | https://www.airbnb.com/s/Paris/experiences?place_id=ChIJD7fiBh9u5kcRYJSMaMOCCwQ&refinement_paths%5B%5D=%2Fexperiences&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Louvre Museum | `b543b9f0-75fa-4c8d-abc0-57ee0a6953a0` (ar 1.78) | https://www.airbnb.com/s/Louvre-Museum/experiences?place_id=ChIJD3uTd9hx5kcR1IQvGfr8dbk&refinement_paths%5B%5D=%2Fexperiences&acp_id=070fbfbb-7dc6-47e9-917b-0675bd9e55c4&search_type=HOMEPAGE_CAROUSEL_CLICK |
| Seine | `2f1f7edc-db55-4ee0-b727-99e4a2f9c06f` (ar 1.06) | https://www.airbnb.com/s/Seine/experiences?place_id=ChIJx12c9iK37UcRYa1Leh4sgUo&refinement_paths%5B%5D=%2Fexperiences&acp_id=f458cd7a-e0f3-4de4-99c3-c7089cd0e00f&search_type=HOMEPAGE_CAROUSEL_CLICK |

**Signals:** 40/60 links carry a featured image · device mockups detected: laptop ×2 · dominant link roles: content-card (39), inline-link (17), navigation (4).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 20 named colors |
| Typography | 20 | 20 | 15 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 399 vars |
| Responsive Breakpoints | 5 | 5 | 8 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 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:*

- **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.
- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 399 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 15 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 19 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 8 breakpoints detected |
| §9b Photography | High | 86 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.*

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes dot-xefpb8 { ... }
@keyframes dot-kkmion { ... }
@keyframes dot-pulse-18sbrvj { ... }
@keyframes fadeEnter-14e8nj2 { ... }
@keyframes dls_sheets_fadeIn-14e8nj2 { ... }
@keyframes dls_sheets_slideUp-14e8nj2 { ... }
@keyframes fadeLeave-1f0cb0c { ... }
@keyframes dls_sheets_fadeOut-1f0cb0c { ... }
@keyframes dls_sheets_slideDown-1f0cb0c { ... }
@keyframes dls_sheets_slideDownOut-1f0cb0c { ... }
@keyframes overlayEnterLinaria-pxdfzy { ... }
@keyframes overlayLeave-16a97i2 { ... }
@keyframes selectCheckSlideIn-um18ze { ... }
@keyframes fadeEnter-1enl5jb { ... }
@keyframes dls_sheets_fadeIn-1enl5jb { ... }
@keyframes dls_sheets_slideUp-1enl5jb { ... }
@keyframes slideEnter-1qxmz00 { ... }
@keyframes fadeEnter-v8n6sz { ... }
@keyframes slideLeave-osd9gb { ... }
@keyframes fadeLeave-zj50hh { ... }
@keyframes fadeEnter-1tpkh98 { ... }
@keyframes dls_sheets_fadeIn-1tpkh98 { ... }
@keyframes dls_sheets_slideUp-1tpkh98 { ... }
@keyframes animation-64e8c8 { ... }
@keyframes fadeEnter-1yg1552 { ... }
@keyframes dls_sheets_fadeIn-1yg1552 { ... }
@keyframes dls_sheets_slideUp-1yg1552 { ... }
@keyframes fadeEnter-1w19nmi { ... }
@keyframes dls_sheets_fadeIn-1w19nmi { ... }
@keyframes dls_sheets_slideUp-1w19nmi { ... }
@keyframes fadeLeave-4yuzds { ... }
@keyframes dls_sheets_fadeOut-4yuzds { ... }
@keyframes dls_sheets_slideDown-4yuzds { ... }
@keyframes dls_sheets_slideDownOut-4yuzds { ... }
@keyframes fadeEnter-p8713q { ... }
@keyframes dls_sheets_fadeIn-p8713q { ... }
@keyframes dls_sheets_slideUp-p8713q { ... }
@keyframes fadeLeave-1e47hz0 { ... }
@keyframes dls_sheets_fadeOut-1e47hz0 { ... }
@keyframes dls_sheets_slideDown-1e47hz0 { ... }
@keyframes overlayEnterLinaria-1rfwvvw { ... }
@keyframes overlayLeave-y4c503 { ... }
@keyframes fadeEnter-o73q5 { ... }
@keyframes dls_sheets_fadeIn-o73q5 { ... }
@keyframes dls_sheets_slideUp-o73q5 { ... }
@keyframes appear-yighpa { ... }
@keyframes dot-hbljjd { ... }
@keyframes slide-up-from-bottom_source_screen_in-9ao5ww { ... }
@keyframes slide-up-from-bottom_source_screen_out-jzqanh { ... }
@keyframes bouncyDot-zxetnh { ... }
@keyframes slideFadeIn-1r1xoms { ... }
@keyframes p4-p5-transition_fadeIn-1fnq5v1 { ... }
@keyframes animation-c2c750-1yw67tx { ... }
@keyframes animation-166954-aadivm { ... }
@keyframes overlayEnterLinaria-kpasom { ... }
@keyframes fade-in-eg4ss1 { ... }
@keyframes flip-card-1j2p20z { ... }
@keyframes show-back-1a8bvjc { ... }
@keyframes fadeEnter-uj5v4q { ... }
@keyframes dls_sheets_fadeIn-uj5v4q { ... }
@keyframes dls_sheets_slideUp-uj5v4q { ... }
@keyframes transition-ibfqd4 { ... }
@keyframes fade-in-du3k5w { ... }
@keyframes wave-efu7zy { ... }
@keyframes dot-efu7zy { ... }
@keyframes wave-129drur { ... }
@keyframes dot-129drur { ... }
@keyframes growExit { ... }
@keyframes growEnter-og1l4d { ... }
@keyframes growExit-w6ru9x { ... }
@keyframes fadeEnter-qzowjs { ... }
@keyframes dls_sheets_fadeIn-qzowjs { ... }
@keyframes dls_sheets_slideUp-qzowjs { ... }
@keyframes fadeEnter-7r4o8i { ... }
@keyframes dls_sheets_fadeIn-7r4o8i { ... }
@keyframes dls_sheets_slideUp-7r4o8i { ... }
@keyframes fadeLeave-ioj5y1 { ... }
@keyframes dls_sheets_fadeOut-ioj5y1 { ... }
@keyframes dls_sheets_slideDown-ioj5y1 { ... }
@keyframes dls_sheets_slideDownOut-ioj5y1 { ... }
@keyframes blurFade-6uamq9 { ... }
@keyframes scaleDown-6uamq9 { ... }
@keyframes scaleUp-6uamq9 { ... }
@keyframes fadeOut-2s4zqw { ... }
@keyframes clip-path-ilmvgq { ... }
@keyframes scale-ofmfty { ... }
@keyframes radial-progress-spin-b97gu9 { ... }
@keyframes slide-up-from-bottom_source_screen_in-18bc7sc { ... }
@keyframes slide-up-from-bottom_source_screen_out-8b227r { ... }
@keyframes overlayEnterLinaria-1bkk1ov { ... }
@keyframes overlayLeave-i8mkhu { ... }
@keyframes fadeEnter-11s6t7h { ... }
@keyframes dls_sheets_fadeIn-11s6t7h { ... }
@keyframes dls_sheets_slideUp-11s6t7h { ... }
@keyframes fadeLeave-1s0ahwe { ... }
@keyframes dls_sheets_fadeOut-1s0ahwe { ... }
@keyframes dls_sheets_slideDown-1s0ahwe { ... }
@keyframes dls_sheets_slideDownOut-1s0ahwe { ... }
@keyframes fadeEnter-3wlsei { ... }
@keyframes dls_sheets_fadeIn-3wlsei { ... }
@keyframes dls_sheets_slideUp-3wlsei { ... }
@keyframes flipScale-1ksp31u { ... }
@keyframes fadeIn-1vkzpf1 { ... }
@keyframes fadeEnter-v7bpk9 { ... }
@keyframes dls_sheets_fadeIn-v7bpk9 { ... }
@keyframes dls_sheets_slideUp-v7bpk9 { ... }
@keyframes fadeEnter-htcu4 { ... }
@keyframes overlayEnterLinaria-1vyzu7t { ... }
@keyframes fadeEnter-qy63k4 { ... }
@keyframes dls_sheets_fadeIn-qy63k4 { ... }
@keyframes dls_sheets_slideUp-qy63k4 { ... }
@keyframes overlayEnterLinaria-ws4pzl { ... }
@keyframes fadeIn-exe9gd { ... }
@keyframes fadeOut-n8z2pw { ... }
@keyframes radial-progress-spin-156pa27 { ... }
@keyframes fadeEnter-1v1mc22 { ... }
@keyframes dls_sheets_fadeIn-1v1mc22 { ... }
@keyframes dls_sheets_slideUp-1v1mc22 { ... }
@keyframes dls_sheets_fadeOut-12ha075 { ... }
@keyframes dls_sheets_slideDown-12ha075 { ... }
@keyframes overlayEnterLinaria-1tavve1 { ... }
@keyframes overlayLeave-1d489n1 { ... }
@keyframes outerAnimationHeader { ... }
@keyframes outerAnimationHeaderExit-en3o3a { ... }
@keyframes enter-fade { ... }
@keyframes enter-slide { ... }
@keyframes exit-fade { ... }
@keyframes exit-slide { ... }
@keyframes overlayEnterLinaria-shq1tw { ... }
@keyframes opacityFade-197wp56 { ... }
@keyframes animation-2f1d84-1cii13c { ... }
@keyframes carousel-item_fade_in-1wobrr0 { ... }
@keyframes carousel-item_fade_in-1wb22vu { ... }
@keyframes new-msg_new_msg_fade_in-14fp9w6 { ... }
@keyframes new-msg_new_msg_slide_up_minimal-14fp9w6 { ... }
@keyframes new-msg_new_msg_slide_up-14fp9w6 { ... }
@keyframes new-msg_new_msg_fade_in-d5ffvs { ... }
@keyframes new-msg_new_msg_slide_up_minimal-d5ffvs { ... }
@keyframes remove-msg_remove_msg_fade_out-1x23a14 { ... }
@keyframes new-msg_profile_img_expand-xrinmi { ... }
@keyframes new-msg_profile_img_fade_out-18wvrs4 { ... }
@keyframes new-msg_profile_img_shrink-18wvrs4 { ... }
@keyframes scroll-to-bottom-button_button_enter_slide-wvmdy { ... }
@keyframes carousel-item_fade_in-13urvx { ... }
@keyframes carousel-item_fade_out-1k9sdw { ... }
@keyframes bouncyDot-1hujwl5 { ... }
@keyframes fadeEnter-1awwwrw { ... }
@keyframes fadeLeave-sahdre { ... }
@keyframes bouncyDot-tqwov0 { ... }
@keyframes fadeEnter-10u9rvr { ... }
@keyframes dls_sheets_fadeIn-10u9rvr { ... }
@keyframes dls_sheets_slideUp-10u9rvr { ... }
@keyframes fadeEnter-zf0gka { ... }
@keyframes dls_sheets_fadeIn-zf0gka { ... }
@keyframes dls_sheets_slideUp-zf0gka { ... }
@keyframes slideEnter2-s3c03d { ... }
@keyframes fadeEnter-s3c03d { ... }
@keyframes dls_sheets_fadeIn-s3c03d { ... }
@keyframes dls_sheets_slideUp-s3c03d { ... }
@keyframes slideLeave-1x1tg16 { ... }
@keyframes fadeLeave-1x1tg16 { ... }
@keyframes dls_sheets_fadeOut-1x1tg16 { ... }
@keyframes dls_sheets_slideDown-1x1tg16 { ... }
@keyframes dls_sheets_slideDownOut-1x1tg16 { ... }
@keyframes fadeEnter-14qzldw { ... }
@keyframes dls_sheets_fadeIn-14qzldw { ... }
@keyframes dls_sheets_slideUp-14qzldw { ... }
@keyframes fadeEnter-z10332 { ... }
@keyframes dls_sheets_fadeIn-z10332 { ... }
@keyframes dls_sheets_slideUp-z10332 { ... }
@keyframes fadeEnter-bg5ap3 { ... }
@keyframes dls_sheets_fadeIn-bg5ap3 { ... }
@keyframes dls_sheets_slideUp-bg5ap3 { ... }
@keyframes fadeEnter-1xiek0o { ... }
@keyframes dls_sheets_fadeIn-1xiek0o { ... }
@keyframes dls_sheets_slideUp-1xiek0o { ... }
@keyframes fadeEnter-x1b059 { ... }
@keyframes dls_sheets_slideUp-x1b059 { ... }
@keyframes enter-rn19qw { ... }
@keyframes dot-13xphnn { ... }
@keyframes fadeIn-1a39kht { ... }
@keyframes contentSlideOut-h3psv3 { ... }
@keyframes contentFadeOut-h3psv3 { ... }
@keyframes successSlideIn-d42tcb { ... }
@keyframes successFadeIn-d42tcb { ... }
@keyframes map-grid-shimmer-1fda9bv { ... }
@keyframes animate-map-fancy-loader-dot-19athfr { ... }
@keyframes fade-in-1izbfse { ... }
@keyframes fadeIn-jlwax1 { ... }
@keyframes fade-in-o5tsr9 { ... }
@keyframes animate-map-base-circle-marker-ease-jtdyk9 { ... }
@keyframes animate-map-marker-label-left-fade-in-n7r94i { ... }
@keyframes animate-map-marker-label-right-fade-in-qyliuv { ... }
@keyframes animate-map-marker-label-top-fade-in-1vorbbt { ... }
@keyframes animate-map-marker-label-bottom-fade-in-y4k46p { ... }
@keyframes p5_postcard_exit_scale-34gem9 { ... }
@keyframes p5_postcard_exit_blur-34gem9 { ... }
@keyframes p5_postcard_exit_fade-34gem9 { ... }
@keyframes p5_postcard_exit_slide-34gem9 { ... }
@keyframes p5_postcard_enter-34gem9 { ... }
@keyframes p5_cta_btn_exit-qpkmi8 { ... }
@keyframes p5_cta_btn_enter-qpkmi8 { ... }
@keyframes p5_postcard_exit-qpkmi8 { ... }
@keyframes p5_postcard_enter-qpkmi8 { ... }
@keyframes p5_postcard_header_exit-qpkmi8 { ... }
@keyframes p5_postcard_header_enter-qpkmi8 { ... }
@keyframes p5_background_container_exit-qpkmi8 { ... }
@keyframes p5_background_container_enter-qpkmi8 { ... }
@keyframes fade-in-t4o9sa { ... }
@keyframes expand-af5ih7 { ... }
@keyframes fadeIn-z4wk44 { ... }
@keyframes fadeIn-1suk7eu { ... }
@keyframes fadeEnter-15rwbjc { ... }
@keyframes dls_sheets_fadeIn-15rwbjc { ... }
@keyframes dls_sheets_slideUp-15rwbjc { ... }
@keyframes fadeLeave-q4vf7g { ... }
@keyframes dls_sheets_fadeOut-q4vf7g { ... }
@keyframes dls_sheets_slideDown-q4vf7g { ... }
@keyframes dls_sheets_slideDownOut-q4vf7g { ... }
@keyframes slide-in-and-fade_footer_enter_fade-wcxnmo { ... }
@keyframes a11y_slide-in-and-fade_source_content_in-wcxnmo { ... }
@keyframes slide-in-and-fade_source_content_in-wcxnmo { ... }
@keyframes a11y_slide-in-and-fade_destination_content_out-wcxnmo { ... }
@keyframes slide-in-and-fade_destination_content_out-wcxnmo { ... }
@keyframes a11y_slide-in-and-fade_source_content_out-wcxnmo { ... }
@keyframes slide-in-and-fade_source_content_out-wcxnmo { ... }
@keyframes a11y_slide-in-and-fade_destination_content_in-wcxnmo { ... }
@keyframes slide-in-and-fade_destination_content_in-wcxnmo { ... }
@keyframes slideFadeIn-oja9ce { ... }
@keyframes AtomicCalendar-HorizontalScroller-scroll-from-wuwspx { ... }
@keyframes AtomicCalendar-HorizontalScroller-scroll-to-1spspug { ... }
@keyframes fadeEnter-1ixzg25 { ... }
@keyframes dls_sheets_fadeIn-1ixzg25 { ... }
@keyframes dls_sheets_slideUp-1ixzg25 { ... }
@keyframes fadeOut-1nvp1xn { ... }
@keyframes collapse-1nvp1xn { ... }
@keyframes expand-vslfmr { ... }
@keyframes fadeIn-vslfmr { ... }
@keyframes aiDotBounce-bxhfyy { ... }
@keyframes animate-map-marker-user-queried-fade-in-13mw1vi { ... }
@keyframes fadeLeave { ... }
@keyframes fadeEnter-103q0ww { ... }
@keyframes fadeEnter-blzwl6 { ... }
@keyframes dls_sheets_fadeIn-blzwl6 { ... }
@keyframes dls_sheets_slideUp-blzwl6 { ... }
@keyframes fadeLeave-10v2d6w { ... }
@keyframes dls_sheets_fadeOut-10v2d6w { ... }
@keyframes dls_sheets_slideDown-10v2d6w { ... }
@keyframes fadeEnter-1gqjnuw { ... }
@keyframes reaction-tray_reaction_fade_4-1o5plae { ... }
@keyframes reaction-tray_reaction_scale_4-1o5plae { ... }
@keyframes reaction-tray_reaction_move_4-1o5plae { ... }
@keyframes reaction-tray_reaction_fade_3-1o5plae { ... }
@keyframes reaction-tray_reaction_scale_3-1o5plae { ... }
@keyframes reaction-tray_reaction_move_3-1o5plae { ... }
@keyframes reaction-tray_reaction_fade_2-1o5plae { ... }
@keyframes reaction-tray_reaction_scale_2-1o5plae { ... }
@keyframes reaction-tray_reaction_move_2-1o5plae { ... }
@keyframes reaction-tray_reaction_fade_1-1o5plae { ... }
@keyframes reaction-tray_reaction_scale_1-1o5plae { ... }
@keyframes reaction-tray_reaction_move_1-1o5plae { ... }
@keyframes reaction-tray_reaction_fade_0-1o5plae { ... }
@keyframes reaction-tray_reaction_scale_0-1o5plae { ... }
@keyframes reaction-tray_reaction_move_0-1o5plae { ... }
@keyframes emoji_emoji_exit-1o8b3u7 { ... }
@keyframes emoji_emoji_enter-1o8b3u7 { ... }
@keyframes reaction-tray_reaction_tray_fade_out-1o8b3u7 { ... }
@keyframes reaction-tray_reaction_tray_fade_in-1o8b3u7 { ... }
@keyframes reaction-tray_active_chip_exit-1o8b3u7 { ... }
@keyframes reaction-tray_active_chip_enter-1o8b3u7 { ... }
@keyframes reaction-tray_reactions_container_open-1h21t2z { ... }
@keyframes reaction-tray_reactions_container_fade_out-yyrm4u { ... }
@keyframes reaction-tray_reactions_container_close-yyrm4u { ... }
@keyframes fadeLeave-yyrm4u { ... }
@keyframes dls_sheets_fadeOut-yyrm4u { ... }
@keyframes dls_sheets_slideDown-yyrm4u { ... }
@keyframes fadeIn-faz52h { ... }
@keyframes sending-status_fade_in-l44ehq { ... }
@keyframes sending-status_fade_out-1a2517o { ... }
@keyframes message-title_height_scale_up-ubz966 { ... }
@keyframes message-title_fade_in-ubz966 { ... }
@keyframes message-title_slide_up-ubz966 { ... }
@keyframes message-title_height_scale_down-kibeo2 { ... }
@keyframes message-title_fade_out-kibeo2 { ... }
@keyframes message-title_slide_down-kibeo2 { ... }
@keyframes incoming-tile-3-of-3_tile_translate-1hs5mft { ... }
@keyframes incoming-tile-3-of-3_tile_rotate-1hs5mft { ... }
@keyframes incoming-tile-3-of-3_tile_scale-1hs5mft { ... }
@keyframes incoming-tile-2-of-3_tile_translate-1hs5mft { ... }
@keyframes incoming-tile-2-of-3_tile_rotate-1hs5mft { ... }
@keyframes incoming-tile-2-of-3_tile_scale-1hs5mft { ... }
@keyframes incoming-tile-1-of-3_tile_translate-1hs5mft { ... }
@keyframes incoming-tile-1-of-3_tile_rotate-1hs5mft { ... }
@keyframes incoming-tile-1-of-3_tile_scale-1hs5mft { ... }
@keyframes incoming-tile-2-of-2_tile_translate-1hs5mft { ... }
@keyframes incoming-tile-2-of-2_tile_rotate-1hs5mft { ... }
@keyframes incoming-tile-2-of-2_tile_scale-1hs5mft { ... }
@keyframes incoming-tile-1-of-2_tile_translate-1hs5mft { ... }
@keyframes incoming-tile-1-of-2_tile_rotate-1hs5mft { ... }
@keyframes incoming-tile-1-of-2_tile_scale-1hs5mft { ... }
@keyframes incoming-single-tile-1_tile_rotate-1hs5mft { ... }
@keyframes incoming-single-tile-1_tile_scale-1hs5mft { ... }
@keyframes tile-exit_tile_opacity-awj4h { ... }
@keyframes tile-exit_tile_scale-awj4h { ... }
@keyframes scale-1f86cl0 { ... }
@keyframes animate-map-marker-google-poi-fade-in-4fxa45 { ... }
@keyframes bouncyDot-wzkctv { ... }
@keyframes radial-progress-spin-pdf2lp { ... }
@keyframes characterPulse-6uifnl { ... }
@keyframes blink-t00n41 { ... }
@keyframes overlayEnterLinaria-1xfkdda { ... }
@keyframes overlayLeave-1jvmct2 { ... }
@keyframes growEnter-1btaube { ... }
@keyframes growLeave-1v4rdzl { ... }
@keyframes slideDown-fuyypg { ... }
@keyframes slideUp-9bektf { ... }
@keyframes container-fade-out-dhvyp6 { ... }
@keyframes enter-ray6ec { ... }
@keyframes slideFadeIn-oh1clg { ... }
@keyframes fadeEnter-z0oi5p { ... }
@keyframes dls_sheets_fadeIn-z0oi5p { ... }
@keyframes dls_sheets_slideUp-z0oi5p { ... }
@keyframes a11y_slide-up-from-bottom_destination_screen_in-8mse0q { ... }
@keyframes slide-up-from-bottom_destination_screen_in-8mse0q { ... }
@keyframes a11y_slide-up-from-bottom_destination_screen_out-14qbbjq { ... }
@keyframes slide-up-from-bottom_destination_screen_out-14qbbjq { ... }
@keyframes iconScaleEnter-wqhfx5 { ... }
@keyframes iconColorEnter-wqhfx5 { ... }
@keyframes iconStrokeEnter-wqhfx5 { ... }
@keyframes badgePositionEnter-1g9fylo { ... }
@keyframes badgeMarginEnter-1scf8xw { ... }
@keyframes labelEnter-1nu8o6h { ... }
@keyframes scaleOuterStroke-1io22eg { ... }
@keyframes scaleAvatar-1syztyc { ... }
@keyframes fadeEnter-cjze4w { ... }
@keyframes dls_sheets_fadeIn-cjze4w { ... }
@keyframes dls_sheets_slideUp-cjze4w { ... }
@keyframes grow-1u4e746 { ... }
@keyframes collapseOut-1aphyov { ... }
@keyframes collapseOut-1j3b9um { ... }
@keyframes expand-le84mo { ... }
@keyframes collapseOut-5o3b9x { ... }
@keyframes collapseOut-1ku9f9i { ... }
@keyframes expandIn-1nwqsh0 { ... }
@keyframes bounce-1azte23 { ... }
@keyframes fadeEnter-1gcp78k { ... }
@keyframes dls_sheets_fadeIn-1gcp78k { ... }
@keyframes dls_sheets_slideUp-1gcp78k { ... }
@keyframes fadeEnter-18vk7um { ... }
@keyframes dls_sheets_fadeIn-18vk7um { ... }
@keyframes dls_sheets_slideUp-18vk7um { ... }
@keyframes fadeEnter-2gg72r { ... }
@keyframes dls_sheets_fadeIn-2gg72r { ... }
@keyframes dls_sheets_slideUp-2gg72r { ... }
@keyframes fadeEnter-1z053yu { ... }
@keyframes dls_sheets_fadeIn-1z053yu { ... }
@keyframes dls_sheets_slideUp-1z053yu { ... }
@keyframes fadeEnter-1t3pn16 { ... }
@keyframes dls_sheets_fadeIn-1t3pn16 { ... }
@keyframes dls_sheets_slideUp-1t3pn16 { ... }
@keyframes hqgd-seq-fade-out-vl5ao5 { ... }
@keyframes hqgd-seq-fade-in-30jvgu { ... }
@keyframes fadeEnter-97o7pp { ... }
@keyframes dls_sheets_fadeIn-97o7pp { ... }
@keyframes dls_sheets_slideUp-97o7pp { ... }
@keyframes footer-fade-in-9r7fwe { ... }
@keyframes footer-fade-in-insight-1dzdzew { ... }
@keyframes fadeEnter-1gp0mg6 { ... }
@keyframes dls_sheets_fadeIn-1gp0mg6 { ... }
@keyframes dls_sheets_slideUp-1gp0mg6 { ... }
@keyframes insight-fade-in-14ybi0w { ... }
@keyframes lmsv3-book-c1pyka { ... }
@keyframes lmsv3-medium-1w5ue5g { ... }
@keyframes lmsv3-7days-book-8r8vxg { ... }
@keyframes lmsv3-7days-medium-11umdgy { ... }
@keyframes lmsv3-checkin-book-1m2485q { ... }
@keyframes lmsv3-checkin-medium-1huobwr { ... }
@keyframes lmsv3-checkin-s3-book-1o2w8yj { ... }
@keyframes lmsv3-checkin-s3-medium-vjskd0 { ... }
@keyframes sell-title-fade-in-1cx99hq { ... }
@keyframes ellipsisDot1-1olfijc { ... }
@keyframes ellipsisDot2-1y70u65 { ... }
@keyframes ellipsisDot3-kqgay4 { ... }
@keyframes show-ckazd0 { ... }
@keyframes p4-loader_fadeOverlay-17rzbpf { ... }
@keyframes move-v1ndtn { ... }
@keyframes p4-loader_fadeOut-asxuek { ... }
@keyframes p4-loader_fadeIn-1g5tehv { ... }
@keyframes simple-fade_simple_fade-1a00gxq { ... }
@keyframes simple-fade_simple_fade_video-vy6jsq { ... }
@keyframes moweb-transition_text_title_fade_in-1guv34z { ... }
@keyframes moweb-transition_text_description_fade_in-1k302aj { ... }
@keyframes simple-fade_simple_fade-8j9mzp { ... }
@keyframes fadeLeave-vqpxt6 { ... }
@keyframes dls_sheets_fadeOut-vqpxt6 { ... }
@keyframes dls_sheets_slideDown-vqpxt6 { ... }
@keyframes dls_sheets_slideDownOut-vqpxt6 { ... }
@keyframes p5-card_fadeIn-15v2zvg { ... }
@keyframes p5-card_rotate-1x5llo0 { ... }
@keyframes p5-card_grow-1flegkt { ... }
@keyframes p5-background_fadeIn-4cadue { ... }
@keyframes a11y_slide-up-from-bottom_destination_screen_in-1y3zgwa { ... }
@keyframes slide-up-from-bottom_destination_screen_in-1y3zgwa { ... }
@keyframes fadeEnter-2npbe6 { ... }
@keyframes growEnter-2npbe6 { ... }
@keyframes fadeLeave-rku90x { ... }
@keyframes growLeave-rku90x { ... }
@keyframes offeringModalNavFadeIn-a5sqw8 { ... }
@keyframes offeringModalNavSlideIn-a5sqw8 { ... }
@keyframes fadeEnter-130nqsw { ... }
@keyframes dls_sheets_fadeIn-130nqsw { ... }
@keyframes dls_sheets_slideUp-130nqsw { ... }
@keyframes fadeLeave-5c3dg5 { ... }
@keyframes dls_sheets_fadeOut-5c3dg5 { ... }
@keyframes dls_sheets_slideDown-5c3dg5 { ... }
@keyframes dls_sheets_slideDownOut-5c3dg5 { ... }
@keyframes fadeEnter-1yl89wt { ... }
@keyframes dls_sheets_fadeIn-1yl89wt { ... }
@keyframes dls_sheets_slideUp-1yl89wt { ... }
@keyframes overlayEnter-1d59ybn { ... }
@keyframes overlayLeave-aomgm { ... }
@keyframes fadeInSlideUp-1n7je4n { ... }
@keyframes slideDown1-1pro0ie { ... }
@keyframes fadeInSlideUp2-ya3j8w { ... }
@keyframes slideUp2-1yq4xzh { ... }
@keyframes slideUp-1udplt6 { ... }
@keyframes fadeIn-1udplt6 { ... }
@keyframes fade-out { ... }
@keyframes fade-in { ... }
@keyframes animate-map-control-fade-in-nf6ugb { ... }
@keyframes fadeEnter-hy5wy { ... }
@keyframes dls_sheets_fadeIn-hy5wy { ... }
@keyframes dls_sheets_slideUp-hy5wy { ... }
@keyframes fadeEnter-1ugqzv3 { ... }
@keyframes slideEnter-1ugqzv3 { ... }
@keyframes slideLeave-sw6uib { ... }
@keyframes fadeLeave-sw6uib { ... }
@keyframes dls_sheets_fadeOut-sw6uib { ... }
@keyframes dls_sheets_slideDown-sw6uib { ... }
@keyframes dls_sheets_slideDownOut-sw6uib { ... }
@keyframes fadeIn-1hl9bd8 { ... }
@keyframes media-fade-out-1m7fimm { ... }
@keyframes top-fade-in-35788g { ... }
@keyframes bottom-fade-out-1sj1mgf { ... }
@keyframes footer-fade-out-1yv5msv { ... }
@keyframes fade-in-1aetkbe { ... }
@keyframes fadeIn-153k2r5 { ... }
@keyframes fadeInSlideUp-153k2r5 { ... }
@keyframes fadeIn-1ah4ir7 { ... }
@keyframes opacity-fade-in-1ntc5ot { ... }
@keyframes fadeEnter-hkmkd0 { ... }
@keyframes dls_sheets_fadeIn-hkmkd0 { ... }
@keyframes dls_sheets_slideUp-hkmkd0 { ... }
@keyframes fadeLeave-1wyl9lq { ... }
@keyframes dls_sheets_fadeOut-1wyl9lq { ... }
@keyframes dls_sheets_slideDown-1wyl9lq { ... }
@keyframes dls_sheets_slideDownOut-1wyl9lq { ... }
@keyframes fade-in-slide-up-17ewktj { ... }
@keyframes fadeOutButton-5kmnc3 { ... }
@keyframes fadeInButton-5kmnc3 { ... }
@keyframes fadeInFromBottom-iv6bui { ... }
@keyframes fadeEnter-bkg4ka { ... }
@keyframes dls_sheets_fadeIn-bkg4ka { ... }
@keyframes dls_sheets_slideUp-bkg4ka { ... }
@keyframes dot-1bjy4cb { ... }
@keyframes slideEnter-1d456t3 { ... }
@keyframes slideLeave-16x0rnf { ... }
@keyframes searchInputFadeInUp-thrmic { ... }
@keyframes searchInputFadeIn-ov66rp { ... }
@keyframes searchInputFadeInDown-1nxjeg9 { ... }
@keyframes fade-in-vtbwgw { ... }
@keyframes panelScroll-b2545o { ... }
@keyframes searchInputEntry-1t4hgeb { ... }
@keyframes explore-fade-in-fcp-fix-8bvbv4 { ... }
@keyframes zoomIn-bvrxdw { ... }
@keyframes homepage-cta-card-imagestack-bottom_card_rotate-1q8jscs { ... }
@keyframes homepage-cta-card-imagestack-bottom_card_translate-1q8jscs { ... }
@keyframes homepage-cta-card-imagestack-bottom_card_fade-1q8jscs { ... }
@keyframes homepage-cta-card-imagestack-bottom_card_scale-1q8jscs { ... }
@keyframes homepage-cta-card-imagestack-middle_card_rotate-m5zjsd { ... }
@keyframes homepage-cta-card-imagestack-middle_card_translate-m5zjsd { ... }
@keyframes homepage-cta-card-imagestack-middle_card_fade-m5zjsd { ... }
@keyframes homepage-cta-card-imagestack-middle_card_scale-m5zjsd { ... }
@keyframes homepage-cta-card-imagestack-top_card_rotate-7jgun9 { ... }
@keyframes homepage-cta-card-imagestack-top_card_translate-7jgun9 { ... }
@keyframes homepage-cta-card-imagestack-top_card_fade-7jgun9 { ... }
@keyframes homepage-cta-card-imagestack-top_card_scale-7jgun9 { ... }
@keyframes reveal-large-1ssewmc { ... }
@keyframes reveal-medium-1ssewmc { ... }
@keyframes reveal-1ssewmc { ... }
@keyframes slide-up-3xqv01 { ... }
@keyframes slide-up-17udzfw { ... }
@keyframes slide-up-4jkh2b { ... }
@keyframes animation-30441e-19zvxzu { ... }
@keyframes fade-in-wib1wj { ... }
@keyframes animate-map-pill-marker-fade-in-v0fjxy { ... }
@keyframes fade-in-62cjz { ... }
@keyframes animation-e891c8-1m5vpkp { ... }
@keyframes heroFadeIn-1gkn33d { ... }
@keyframes heroFadeInPhase3-b1i0kn { ... }
@keyframes slideFadeIn-qo8jk4 { ... }
@keyframes relative-move-hf1zvn { ... }
@keyframes fadeEnter-hf1zvn { ... }
@keyframes dls_sheets_fadeIn-hf1zvn { ... }
@keyframes dls_sheets_slideUp-hf1zvn { ... }
@keyframes relative-move-16gv7q4 { ... }
@keyframes fadeLeave-16gv7q4 { ... }
@keyframes dls_sheets_fadeOut-16gv7q4 { ... }
@keyframes dls_sheets_slideDown-16gv7q4 { ... }
@keyframes dls_sheets_slideDownOut-16gv7q4 { ... }
@keyframes banner-exiting-1x048vb { ... }
@keyframes banner-entering-1x048vb { ... }
@keyframes marqueeBookItFadeIn-yobdb2 { ... }
@keyframes marqueeBookItFadeOut-1t28lve { ... }
@keyframes fadeInAnimation-42lqky { ... }
@keyframes fadeIn-1eeg1oa { ... }
@keyframes animation-opacity-1te61mb { ... }
@keyframes fadeEnter-6ukaut { ... }
@keyframes dls_sheets_fadeIn-6ukaut { ... }
@keyframes dls_sheets_slideUp-6ukaut { ... }
@keyframes fadeLeave-zyj83h { ... }
@keyframes dls_sheets_fadeOut-zyj83h { ... }
@keyframes dls_sheets_slideDown-zyj83h { ... }
@keyframes dls_sheets_slideDownOut-zyj83h { ... }
@keyframes fadeEnter-tcq51w { ... }
@keyframes dls_sheets_fadeIn-tcq51w { ... }
@keyframes dls_sheets_slideUp-tcq51w { ... }
@keyframes fadeEnter-1wnv4ks { ... }
@keyframes dls_sheets_fadeIn-1wnv4ks { ... }
@keyframes dls_sheets_slideUp-1wnv4ks { ... }
@keyframes fade-in-dio67w { ... }
@keyframes opacity-fade-in-13nlxly { ... }
@keyframes a11y_homepage-shortcut-imagestack-center_card_fade-q334ea { ... }
@keyframes homepage-shortcut-imagestack-center_card_rotate-q334ea { ... }
@keyframes homepage-shortcut-imagestack-center_card_fade-q334ea { ... }
@keyframes homepage-shortcut-imagestack-center_card_scale-q334ea { ... }
@keyframes a11y_homepage-shortcut-imagestack-left_card_slide-j0lr8z { ... }
@keyframes a11y_homepage-shortcut-imagestack-left_card_rotate-j0lr8z { ... }
@keyframes a11y_homepage-shortcut-imagestack-left_card_fade-j0lr8z { ... }
@keyframes homepage-shortcut-imagestack-left_card_rotate-j0lr8z { ... }
@keyframes homepage-shortcut-imagestack-left_card_fade-j0lr8z { ... }
@keyframes homepage-shortcut-imagestack-left_card_slide-j0lr8z { ... }
@keyframes homepage-shortcut-imagestack-left_card_scale-j0lr8z { ... }
@keyframes a11y_homepage-shortcut-imagestack-right_card_slide-1fxj9s8 { ... }
@keyframes a11y_homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 { ... }
@keyframes a11y_homepage-shortcut-imagestack-right_card_fade-1fxj9s8 { ... }
@keyframes homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 { ... }
@keyframes homepage-shortcut-imagestack-right_card_fade-1fxj9s8 { ... }
@keyframes homepage-shortcut-imagestack-right_card_slide-1fxj9s8 { ... }
@keyframes homepage-shortcut-imagestack-right_card_scale-1fxj9s8 { ... }
@keyframes homepage-shortcut-card_card_fade_desktop-qbmxb8 { ... }
@keyframes homepage-shortcut-card_card_translate_desktop-qbmxb8 { ... }
@keyframes homepage-shortcut-card_card_rotate-qbmxb8 { ... }
@keyframes homepage-shortcut-card_card_fade-qbmxb8 { ... }
@keyframes homepage-shortcut-card_card_scale-qbmxb8 { ... }
@keyframes homepage-shortcut-card-secondary_card_fade-1svehb { ... }
@keyframes homepage-shortcut-card-secondary_card_translateX-1svehb { ... }
@keyframes homepage-shortcut-card-secondary_card_fade-143nng2 { ... }
@keyframes fadeEnter-cezbx7 { ... }
@keyframes dls_sheets_fadeIn-cezbx7 { ... }
@keyframes dls_sheets_slideUp-cezbx7 { ... }
@keyframes fadeLeave-1kxildz { ... }
@keyframes dls_sheets_fadeOut-1kxildz { ... }
@keyframes dls_sheets_slideDown-1kxildz { ... }
@keyframes dls_sheets_slideDownOut-1kxildz { ... }
@keyframes header-fade-in-188y1t { ... }
@keyframes slide-down-1bca83u { ... }
@keyframes opacity-fade-in-1bca83u { ... }
@keyframes control-fade-in-a3babj { ... }
@keyframes dot-arsznl { ... }
@keyframes popupSlideEnter-1gqssv3 { ... }
@keyframes fadeEnter-1gqssv3 { ... }
@keyframes dls_sheets_fadeIn-1gqssv3 { ... }
@keyframes dls_sheets_slideUp-1gqssv3 { ... }
@keyframes popupSlideLeave-6zdzg4 { ... }
@keyframes fadeLeave-6zdzg4 { ... }
@keyframes dls_sheets_fadeOut-6zdzg4 { ... }
@keyframes dls_sheets_slideDown-6zdzg4 { ... }
@keyframes dls_sheets_slideDownOut-6zdzg4 { ... }
@keyframes fadeEnter-nvaz5f { ... }
@keyframes dls_sheets_fadeIn-nvaz5f { ... }
@keyframes dls_sheets_slideUp-nvaz5f { ... }
@keyframes fadeEnter-1tq5490 { ... }
@keyframes dls_sheets_fadeIn-1tq5490 { ... }
@keyframes dls_sheets_slideUp-1tq5490 { ... }
@keyframes fadeEnter-16fpihb { ... }
@keyframes growLeave { ... }
@keyframes growEnter-16fpihb { ... }
@keyframes fadeLeave-1kwta4l { ... }
@keyframes dls_sheets_fadeOut-1kwta4l { ... }
@keyframes dls_sheets_slideDown-1kwta4l { ... }
@keyframes search-bar_inbox_title_exit-1e1i928 { ... }
@keyframes search-bar_inbox_title_enter-1e1i928 { ... }
@keyframes search-bar_trailing_btn_exit-1e1i928 { ... }
@keyframes search-bar_trailing_btn_enter-1e1i928 { ... }
@keyframes search-bar_search_btn_exit-1e1i928 { ... }
@keyframes search-bar_search_btn_enter-1e1i928 { ... }
@keyframes fadeEnter-bv84lc { ... }
@keyframes dls_sheets_fadeIn-bv84lc { ... }
@keyframes dls_sheets_slideUp-bv84lc { ... }
@keyframes fadeEnter-1ikjlt8 { ... }
@keyframes dls_sheets_fadeIn-1ikjlt8 { ... }
@keyframes dls_sheets_slideUp-1ikjlt8 { ... }
@keyframes thread-header_show_details_btn_fade_out-o2womc { ... }
@keyframes fade-in_fade-157gvr6 { ... }
@keyframes fade-in-slide-up_translate-p3ojz8 { ... }
@keyframes fade-in-slide-up_fade-p3ojz8 { ... }
@keyframes slide-down-wrv2m2 { ... }
@keyframes slide-up-wrv2m2 { ... }
@keyframes opacity-wrv2m2 { ... }
@keyframes zoomIn-1uazucs { ... }
@keyframes shrink-title-zyzbo { ... }
@keyframes fade-up-v78foa { ... }
@keyframes transparency-qd9ggi { ... }
@keyframes fade-in-1342hur { ... }
@keyframes fade-out-1gw565x { ... }
@keyframes scaleEnter-1x7hlyx { ... }
@keyframes growEnter-1x7hlyx { ... }
@keyframes scaleLeave-5vlqnp { ... }
@keyframes growLeave-5vlqnp { ... }
@keyframes fadeInUpWishlistStickyHeader-1i5f4kw { ... }
@keyframes fadeOutDownWishlistStickyHeader-ffsrbv { ... }
@keyframes expand-1czmlb3 { ... }
@keyframes fadeIn-70e2dn { ... }
@keyframes explore-fade-in-fcp-fix-x3t6ok { ... }
@keyframes explore-fade-in-fcp-fix-152bpv { ... }
@keyframes shadow-pulse-map-current-location-marker-mk7jjv { ... }
@keyframes fadeIn-394rr1 { ... }
@keyframes map-search-top-hanging-fadeIn-1sbpxhz { ... }
@keyframes secondStep-9qoit7 { ... }
@keyframes firstStep-9qoit7 { ... }
@keyframes explore-fade-in-fcp-fix-6vvda9 { ... }
@keyframes animate-map-pill-current-location-control-loading-uxfuz7 { ... }
@keyframes incoming-tile-2-of-2_tile_translate-1jw2uke { ... }
@keyframes incoming-tile-2-of-2_tile_rotate-1jw2uke { ... }
@keyframes incoming-tile-2-of-2_tile_scale-1jw2uke { ... }
@keyframes incoming-tile-1-of-2_tile_translate-1jw2uke { ... }
@keyframes incoming-tile-1-of-2_tile_rotate-1jw2uke { ... }
@keyframes incoming-tile-1-of-2_tile_scale-1jw2uke { ... }
@keyframes incoming-tile-3-of-3_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-3-of-3_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-3-of-3_tile_scale-1mfdxyg { ... }
@keyframes incoming-tile-2-of-3_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-2-of-3_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-2-of-3_tile_scale-1mfdxyg { ... }
@keyframes incoming-tile-1-of-3_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-3_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-3_tile_scale-1mfdxyg { ... }
@keyframes incoming-tile-2-of-2_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-2-of-2_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-2-of-2_tile_scale-1mfdxyg { ... }
@keyframes incoming-tile-1-of-2_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-2_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-2_tile_scale-1mfdxyg { ... }
@keyframes incoming-tile-1-of-1_tile_translate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-1_tile_rotate-1mfdxyg { ... }
@keyframes incoming-tile-1-of-1_tile_scale-1mfdxyg { ... }
@keyframes trip-marker-scale-in-kjx6x { ... }
@keyframes titleEnter-mopntn { ... }
@keyframes translate-nawj7 { ... }
@keyframes translate-bu0zm6 { ... }
@keyframes translate-1vj4zy5 { ... }
@keyframes translate-1vha93s { ... }
@keyframes opacity-1wxvahd { ... }
@keyframes opacity-hlpv8g { ... }
@keyframes a11y_activity-peek-loading_experienced_host_slide_down-1q4lvgk { ... }
@keyframes a11y_activity-peek-loading_experienced_host_fade_in-1q4lvgk { ... }
@keyframes activity-peek-loading_experienced_host_slide_down-1q4lvgk { ... }
@keyframes activity-peek-loading_experienced_host_fade_in-1q4lvgk { ... }
@keyframes a11y_activity-peek-loading_default_fade_in-bmqlf3 { ... }
@keyframes activity-peek-loading_default_fade_in-bmqlf3 { ... }
@keyframes a11y_activity-peek-loading_cohost_slide_down-6z189f { ... }
@keyframes a11y_activity-peek-loading_default_fade_in-6z189f { ... }
@keyframes activity-peek-loading_cohost_slide_down-6z189f { ... }
@keyframes activity-peek-loading_default_fade_in-6z189f { ... }
@keyframes fadeIn-1kdf7dh { ... }
@keyframes fadeInContent-18gs3r { ... }
@keyframes shimmer-2vvh5v { ... }
@keyframes fadeEnter-kyqm2j { ... }
@keyframes dls_sheets_fadeIn-kyqm2j { ... }
@keyframes dls_sheets_slideLeft-kyqm2j { ... }
@keyframes fadeLeave-43ls40 { ... }
@keyframes dls_sheets_fadeOut-43ls40 { ... }
@keyframes dls_sheets_slideRight-43ls40 { ... }
@keyframes dls_sheets_slideRightOut-43ls40 { ... }
@keyframes nav-collapse-fade-in-gpkuxo { ... }
@keyframes nav-collapse-fade-out-b4vnh5 { ... }
@keyframes shimmer-p6tvor { ... }
@keyframes bloom-17k7c0l { ... }
@keyframes bloom-1f0gzb7 { ... }
@keyframes growEnter-1ft0ka5 { ... }
@keyframes slideFadeIn-cdsf6t { ... }
@keyframes overlayEnterLinaria-ts7nje { ... }
@keyframes ds-skeleton-shimmer-8wobsh { ... }
@keyframes ds-step-pulse-1eghcmq { ... }
@keyframes ds-rise-up-1yhg6du { ... }
@keyframes countdown-ring-deplete-1uu3t8b { ... }
@keyframes countdown-ring-spin-vxtufx { ... }
@keyframes shimmer-sweep-igo6nb { ... }
@keyframes relative-move-vyb6402 { ... }
@keyframes fade-vyb6402 { ... }
```

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

```css
@keyframes dot-xefpb8{100%{opacity:0}80%{opacity:0}0%{opacity:0}50%{opacity:1}30%{opacity:1}}
@keyframes dot-kkmion{100%{opacity:0}80%{opacity:0}0%{opacity:0}50%{opacity:1}30%{opacity:1}}
@keyframes dot-pulse-18sbrvj{100%{opacity:0}80%{opacity:0}0%{opacity:0}50%{opacity:1}30%{opacity:1}}
@keyframes fadeEnter-14e8nj2{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-14e8nj2{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-14e8nj2{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes fadeLeave-1f0cb0c{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_fadeOut-1f0cb0c{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_slideDown-1f0cb0c{0%{transform:translate(0,0)}100%{transform:translate(0,var(--slide-down_amount,50px))}}
@keyframes dls_sheets_slideDownOut-1f0cb0c{0%{transform:translate(0,0);opacity:1}50%{opacity:1}100%{opacity:0;transform:translate(0,var(--slide-down_amount,50px))}}
@keyframes overlayEnterLinaria-pxdfzy{0%{opacity:0}100%{opacity:var(--dls-context-sheet-overlay-opacity,0.4)}}
@keyframes overlayLeave-16a97i2{0%{opacity:var(--dls-context-sheet-overlay-opacity,0.4)}100%{opacity:0}}
@keyframes selectCheckSlideIn-um18ze{from{opacity:0;transform:translateX(5px)}
@keyframes fadeEnter-1enl5jb{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-1enl5jb{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-1enl5jb{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes slideEnter-1qxmz00{0%{opacity:0;transform:translate(0,100%)}100%{opacity:1;transform:none}}
@keyframes fadeEnter-v8n6sz{0%{opacity:0}100%{opacity:1}}
@keyframes slideLeave-osd9gb{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(0,100%)}}
@keyframes fadeLeave-zj50hh{0%{opacity:1}100%{opacity:0}}
@keyframes fadeEnter-1tpkh98{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-1tpkh98{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-1tpkh98{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes animation-64e8c8{100%{background:var(--dls-shimmer-animation-end-color,var(--palette-grey300))}80%{background:var(--dls-shimmer-animation-end-color,var(--palette-grey300))}0%{background:var(--dls-shimmer-animation-end-color,var(--palette-grey300))}25%{background:var(--dls-shimmer-animation-start-color,var(--palette-grey100))}}
@keyframes fadeEnter-1yg1552{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-1yg1552{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-1yg1552{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes fadeEnter-1w19nmi{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-1w19nmi{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-1w19nmi{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes fadeLeave-4yuzds{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_fadeOut-4yuzds{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_slideDown-4yuzds{0%{transform:translate(0,0)}100%{transform:translate(0,var(--slide-down_amount,50px))}}
@keyframes dls_sheets_slideDownOut-4yuzds{0%{transform:translate(0,0);opacity:1}50%{opacity:1}100%{opacity:0;transform:translate(0,var(--slide-down_amount,50px))}}
@keyframes fadeEnter-p8713q{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-p8713q{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-p8713q{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes fadeLeave-1e47hz0{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_fadeOut-1e47hz0{0%{opacity:1}100%{opacity:0}}
@keyframes dls_sheets_slideDown-1e47hz0{0%{transform:translate(0,0)}100%{transform:translate(0,var(--slide-down_amount,50px))}}
@keyframes overlayEnterLinaria-1rfwvvw{0%{opacity:0}100%{opacity:var(--dls-context-sheet-overlay-opacity,0.4)}}
@keyframes overlayLeave-y4c503{0%{opacity:var(--dls-context-sheet-overlay-opacity,0.4)}100%{opacity:0}}
@keyframes fadeEnter-o73q5{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_fadeIn-o73q5{0%{opacity:0}100%{opacity:1}}
@keyframes dls_sheets_slideUp-o73q5{0%{transform:translate(0,var(--slide-up_amount,100px))}100%{transform:translate(0,0)}}
@keyframes appear-yighpa{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes dot-hbljjd{100%{opacity:0}80%{opacity:0}0%{opacity:0}50%{opacity:1}30%{opacity:1}}
@keyframes slide-up-from-bottom_source_screen_in-9ao5ww{from{opacity:var(--slide-up-from-bottom_source_screen_in_from_opacity,1);translate:var(--slide-up-from-bottom_source_screen_in_from_x,0%) var(--slide-up-from-bottom_source_screen_in_from_y,0%);filter:var(--slide-up-from-bottom_source_screen_in_scrim_from,brightness(0.6));scale:var(--slide-up-from-bottom_source_screen_in_from_scale,0.952)}0%{opacity:var(--slide-up-from-bottom_source_screen_in_from_opacity,1)}100%{opacity:var(--slide-up-from-bottom_source_screen_in_to_opacity,1)}
@keyframes slide-up-from-bottom_source_screen_out-jzqanh{from{opacity:var(--slide-up-from-bottom_source_screen_out_from_opacity,1);translate:var(--slide-up-from-bottom_source_screen_out_from_x,0%) var(--slide-up-from-bottom_source_screen_out_from_y,0%);filter:var(--slide-up-from-bottom_source_screen_out_scrim_from,brightness(1));scale:var(--slide-up-from-bottom_source_screen_out_from_scale,1)}0%{opacity:var(--slide-up-from-bottom_source_screen_out_from_opacity,1)}100%{opacity:var(--slide-up-from-bottom_source_screen_out_to_opacity,1)}
@keyframes bouncyDot-zxetnh{100%{transform:translateY(3px)}0%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@keyframes slideFadeIn-1r1xoms{0%{opacity:0;transform:translateY(-14px)}80%{opacity:1}100%{transform:translateY(0)}}
@keyframes p4-p5-transition_fadeIn-1fnq5v1{0%{opacity:0}100%{opacity:1}}
@keyframes animation-c2c750-1yw67tx{100%{outline-offset:-3px}}
@keyframes animation-166954-aadivm{0%{outline-width:12px}}
@keyframes overlayEn
```
</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(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);

/* Gradient 2 */
background: linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%);

/* Gradient 3 */
background: radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1E59 100%);

/* Gradient 4 */
background: linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%);

/* Gradient 5 */
background: linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%);

```

### Hover State CSS (Intercepted)

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

```css
.dir.atm_lo_exct8b:not(.\\){padding-top:16px}.dir.atm_le_1tcgj5g:not(.\\){padding-bottom:24px}.dir.atm_26_glywfm{background:none}.dir.atm_3f_glywfm{border:none}.dir.atm_9j_tlke0l{cursor:pointer}.dir.atm_l8_idpfg4{padding:0}.atm_c8_1h3mmnw:not(.\\){font-size:var(--typography-body-text_14_18-font-size)}.atm_g3_1vnrj90:not(.\\){line-height:var(--typography-body-text_14_18-line-height)}.atm_fr_b3emyl{letter-spacing:var(--typography-body-text_14_18-letter-spacing)}.atm_7l_hfv0h6{color:var(--palette-text-primary)}.atm_rd_8stvzk{text-decoration:underline}.atm_73_1ntvvq4{box-sizing:content-box}.atm_7l_14zl091{color:var(--palette-grey1000)}.atm_am_ggq5uc{flex:1 1 auto}.atm_l0_15qppm8:not(.\\){overflow-x:var(--dls-modal-body_overflow-x,hidden)}.atm_l1_17udglp:not(.\\){overflow-y:var(--dls-modal-body_overflow-y,auto)}.dir.atm_l8_gx962f{padding:var(--dls-modal-header_height,60px) 24px 0}.atm_mk_h2mmj6{position:relative}.atm_p9_urpiq7{scrollbar-width:thin}.atm_p1_co2736{scrollbar-color:rgba(0,0,0,0.25) transparent}.atm_kd_glywfm{outline:none}.dir.atm_3f_glywfm_jo46a5::-moz-focus-inner{border:none}.dir.atm_l8_idpfg4_jo46a5::-moz-focus-inner{padding:0}.dir.atm_gi_idpfg4_jo46a5::-moz-focus-inner{margin:0}.dir.atm_3f_glywfm_1icshfk:focus::-moz-focus-inner{border:none}.atm_kd_glywfm_19774hq:-moz-focusring{outline:none}.dir.atm_uc_1wx0j5_9in345::after{transition:box-shadow 0.2s var(--motion-standard-curve-animation-timing-function)}.atm_92_1yyfdc7_9in345::after{content:''}.dir.atm_5j_gktfv_1tasb51:focus-visible::after{border-radius:20px}.atm_6i_idpfg4_1tasb51:focus-visible::after{bottom:0}.dir.atm_70_7fr06n_1tasb51:focus-visible::after{box-shadow:inset 0 0 0 2px var(--palette-border-primary)}.dir-ltr.atm_fq_idpfg4_1tasb51:focus-visible::after{left:0}.dir-rtl.atm_fq_idpfg4_1tasb51:focus-visible::after{right:0}.atm_mj_glywfm_1tasb51:focus-visible::after{pointer-events:none}.atm_mk_stnw88_1tasb51:focus-visible::after{position:absolute}.dir-ltr.atm_n3_idpfg4_1tasb51:focus-visible::after{r
```

> **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 5519 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**66 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`270px` · `299px` · `300px` · `320px` · `325px` · `330px` · `344px` · `357px` · `366px` · `370px` · `375px` · `376px` · `395px` · `400px` … (+52 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `14px`×2762 · `12px`×2147 · `13px`×242 · `16px`×232 · `11px`×93 · `20px`×18 · `8px`×14 · `28px`×2

**Radius scale** (× = paint count): `20px`×236 · `50%`×119 · `8px`×55 · `4px`×55 · `14px`×39 · `9px`×21 · `32px`×11 · `100px`×3

**Weights** (× = paint count): `400`×4173 · `700`×618 · `500`×505 · `600`×218

**Layout gaps** (× = paint count): `normal 8px`×112 · `8px`×89 · `2px`×57 · `normal 12px`×56 · `normal 2.5px`×55 · `12px`×9 · `normal 6px`×9 · `normal 4px`×8

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px
rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px
```

### 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 { font-family:Airbnb Cereal VF, Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; font-size:0.875rem; color:#222222; background-color:#fff }
button { font-family:inherit; font-size:100% }
button { border-radius:50px }
a { font-family:inherit; font-size:100% }
input { font-family:inherit; font-size:100% }
input { color:var(--palette-hof) }
input { font-size:var(--typography-body-text_14_18-font-size) }
input { font-weight:var(--typography-weight-medium500) }
```

> 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://airbnb.com | 2026-06-11T05:10:59.816Z*
*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.*