` element with: - Unique `id` in format `slide1`, `slide2`, etc. - Class `slide` plus a layout class (e.g., `layout-title`) - A `

` wrapper for all content - A `` showing position (e.g., "1 / 10") ```html

1 / 10

``` ## Foundation Elements See [FOUNDATIONS.md](FOUNDATIONS.md) for complete reference. Summary: ### Typography Classes | Class | Purpose | |-------|---------| | `typo-h1` | Large heading (3.815rem, weight 800) | | `typo-h2` | Section heading (2.441rem, weight 700) | | `typo-h3` | Subsection heading (1.563rem, weight 600) | | `typo-p` | Body text (1rem, secondary color) | | `typo-muted` | De-emphasized text (0.9rem, muted color) | | `typo-label` | Uppercase label (0.7rem, accent color) | ### Text Elements - `typo-list` - Unordered list with accent bullets - `typo-list-ordered` - Numbered list with accent numbers - `typo-blockquote` - Styled quote with left border - `typo-link` - Accent-colored link - `typo-code` - Inline code - `typo-code-block` - Multi-line code block ### Data Display - `typo-stat` - Container for stat/metric - `typo-stat-value` - Large gradient number (use `.unit` span for suffix) - `typo-stat-label` - Description below number ### Components - `typo-badge` - Inline badge/tag (default style) - `typo-badge--accent` - Violet accent badge variant - `typo-badge--muted` - Subtle muted badge variant - `typo-card` - Card container with surface and shadow - `typo-card-header` - Card header section - `typo-card-body` - Card main content section - `typo-card-footer` - Card footer section ### Utilities | Class | Effect | |-------|--------| | `glass` | Frosted glass surface with blur and border | | `glow` | Violet glow shadow around element | | `text-gradient` | Violet gradient text fill | | `text-accent` | Violet accent color text | | `divider` | Subtle horizontal rule | ## Layout Templates ### Layout: Title (`layout-title`) Centered title slide for opening or section breaks. ```html

Presentation Title

Subtitle or tagline goes here

1 / 10

``` ### Layout: Text (`layout-text`) Vertically centered, left-aligned text for explanations. ```html

Section Title

First paragraph of explanatory content.

Second paragraph with additional details.

2 / 10

``` ### Layout: Two Column (`layout-two-col`) Header with two columns below. ```html

Left Heading

Left column content here.

Right Heading

Right column content here.

3 / 10

``` ### Layout: Three Column (`layout-three-col`) Header with three columns below. ```html

First Column

First column content.

Second Column

Second column content.

Third Column

Third column content.

4 / 10

``` ### Layout: Image + Text (`layout-image-text`) Side-by-side image and text. Text on left, image on right by default. ```html

Feature Title

Description of the feature or concept shown in the image.

Additional context or details.

5 / 10

``` **Reversed variant** (image on left): Add `layout-image-text--reversed` class. ```html

``` **Image placeholder** (when no image): ```html

Image description

``` ### Layout: Quote (`layout-quote`) Centered large quote with attribution. ```html

The quote text goes here. Make it impactful and memorable.

Author Name Title or Context

7 / 10

``` ### Layout: Stats (`layout-stats`) Grid of 3 key metrics. ```html

99% First Metric

2.5M Second Metric

150+ Third Metric

8 / 10

``` ### Layout: Bullets (`layout-bullets`) Key points with titles and descriptions. ```html

First Point

Supporting description for the first point.

Second Point

Supporting description for the second point.

Third Point

Supporting description for the third point.

9 / 10

``` ### Layout: Statements (`layout-statements`) Three independent statements displayed horizontally with equal visual weight. Uses CSS subgrid to align titles and body text across columns. Best for presenting unrelated achievements, focus areas, or standalone points that don't belong in a sequential list. ```html

First Statement

Description for the first independent point.

Second Statement

Description for the second independent point.

Third Statement

Description for the third independent point.

10 / 10

``` **Text alignment variants:** - `layout-statements--center` - Center-aligned text (default, more dramatic) - `layout-statements--left` - Left-aligned text (more readable) **When to use Statements vs Bullets:** - Use **Statements** when items are independent and unrelated (e.g., three separate achievements) - Use **Bullets** when items form a logical list or sequence (e.g., steps, related points) ## Workflow 1. Create a new `.html` file 2. Copy the HTML structure from [Presentation Structure](#presentation-structure) 3. Copy the full CSS from [STYLES.md](STYLES.md) into the `