Fixed Position Element (bottom-left)

## Diagnostic Controls

### 📐 Structure & Layout

### 📝 Typography

### 🎨 Stacking & Layering

### 🖱️ Interactive Elements

### 📱 Responsive & Color

### 📸 DOM Snapshot & Diff

### 🔧 Control

Ready to test diagnostics. Make sure you're viewing through the agnt proxy!

## Grid Layout Demo

This section uses CSS Grid - try "Show Grid" to visualize it

#### Card 1

Grid item with some content inside

#### Card 2

Another grid item with content

#### Card 3

Third grid item with content

#### Card 4

Fourth grid item

#### Card 5

Fifth grid item

#### Card 6

Sixth grid item

## Flexbox Layout Demo

This section uses Flexbox - try "Show Flexbox" to visualize it

#### Flex Item 1

Flexbox content

#### Flex Item 2

More flexbox content

#### Flex Item 3

Even more content

## Typography Samples

Multiple text styles for typography panel analysis

Large Bold Text (20px / 700)

Medium Regular Text (16px / 400)

Small Text with Color (14px / 400 / #666)

Tiny Text (12px / #999)

Custom Styled Text (18px / 600)

One-off Style (15px) - Should be highlighted as inconsistent

## Interactive Elements

Buttons, links, and form elements - try "Show Interactive Elements"

Link 1 Link 2 Link 3

## Positioned Elements

Absolute and fixed positioning - try "Show Positioned Elements"

Absolutely positioned (top-right)

This box has an absolutely positioned child. There's also a fixed element at the bottom-left of the viewport.

### Semantic Aside Element

This is an <aside> element. Try "Show Semantic Elements" to see different colors for different HTML tags.

## Article Element

This content is inside an <article> element. Semantic element visualization will highlight it.