Add the content to a single HTML wrapper to make it digestible and easy to follow and understand.

UI/Style Description:

Overall Theme: Clean, professional, interactive accordion-style layout with a distinct color palette. Designed for presenting structured information.

Layout: Centered, max-width container (1200px) on a light grey background (#f5f7fa). Uses flexbox for vertical stacking of sections with spacing (gap).

Color Scheme:

Primary (--primary-color: #22577A - Dark Teal): Used for main header background, strong text, footer text.

Secondary (--secondary-color: #38A3A5 - Medium Teal): Used for section header backgrounds (often in gradients), toggle buttons.

Accent (--accent-color: #57CC99 - Bright Green): Used for highlighting key concepts (.key-concept border/icon).

Warning (--warning-color: #f39c12): Used for secondary highlight blocks (.skill border/icon).

Light (--light-color: #E5E5E5): Used for subsection backgrounds.

Dark (--dark-color: #103145): Used for body text.

White/Off-White: Used for section content backgrounds, header text.

Typography: Open Sans font family. Clear hierarchy using font sizes and weights (h1, h2, h3). Good line height (1.6) for readability.

Components:

Header: Prominent, dark gradient background (--primary-color to --dark-color), rounded corners (15px), shadow (--card-shadow), contains main title and a visual progress bar.

Sections (.section): White background, rounded corners (12px), shadow. Act as collapsible accordion items.

Section Headers (.section-header): Teal gradient background, white text, padding. Act as clickable toggles.

Hover Effect: Subtle gradient shift on hover.

Toggle Icon: Chevron icon (fas fa-chevron-down) on the right, rotates 180 degrees smoothly on expansion.

Subsections (.subsection): Nested within sections, lighter grey background (--light-color), rounded corners. Similar collapsible structure with headers/content.

Content Blocks (.key-concept, .skill): Visually distinct blocks with light background tints (accent or warning), left border, padding, and a relevant Font Awesome icon positioned on the left using ::before.

Toggle Buttons (#expandAll, #collapseAll): Rounded (20px), solid secondary color background, white text, shadow, subtle background color change on hover.

Interactivity & Animation:

Accordion: Sections/subsections expand/collapse on click or keyboard interaction (Enter/Space) on their headers. Managed via JavaScript adding/removing an active class.

Smooth Transitions: Content visibility toggles using max-height (from 0 to a large value) and padding (from 0 to 24px/15px). All transitions (height, padding, background colors, icon rotation) use a consistent duration (var(--transition-speed: 0.4s)) with smooth easing (browser default ease).

Progress Bar: Fills horizontally based on the percentage of main sections currently open, with a smooth width transition.

Responsiveness: Basic media query (@media (max-width: 768px)) reduces padding, adjusts font sizes for better viewing on smaller screens.

Accessibility: Uses role="button", aria-expanded attributes, and keyboard support (Enter/Space) on headers for better usability.