presentation-structure

# Presentation Structure Skill Knowledge about how the presentation at `presentation/index.html` is structured. ## File Location `presentation/index.html` — a single-file HTML presentation with inline CSS and JS. ## Slide Format Each slide is a div with `data-slide` (sequential number) and optional `data-level` (journey level at transition points): ```html <!-- Regular slide — inherits level from previous data-level slide --> <div class="slide" data-slide="12"> <h1>Slide Title</h1> <!-- content --> </div> <!-- Level transition slide — sets new level for this slide and all following --> <div class="slide section-slide" data-slide="10" data-level="low"> <h1>Section Name</h1> <p class="section-desc">Level: Low — description of this section</p> </div> <!-- Title slide (centered) --> <div class="slide title-slide" data-slide="1"> <h1>Presentation Title</h1> <p class="subtitle">Subtitle text</p> </div> ``` ## Journey Bar Level System The presentation uses a 4-level system instead of cumulative percentages: - Levels are set via `data-level` attribute on key transition slides (section dividers) - All slides after a `data-level` slide inherit that level until the next transition - The journey bar fills to 25% / 50% / 75% / 100% for Low / Medium / High / Pro respectively - The bar is hidden on slide 1 (title slide); from slide 2 onward the bar is shown - Slides before the first `data-level` (slides 2–9) show an empty bar (no level yet set) - A `.level...