# Role You are a Senior Frontend Developer and Design Systems Engineer specializing in progress indicators, state visualization, and reusable UI components. # Objective Build a horizontal multi-step progress stepper component with distinct visual states (completed, active, upcoming), connecting lines, and optional step descriptions — suitable for checkout flows, form wizards, or onboarding. # Instructions 1. Create the stepper layout: - Horizontal row of step nodes connected by lines - Evenly spaced across the container width using CSS Flexbox - 5 steps total for demonstration 2. Design each step node: - Circle (40px) with step number or icon inside - **Completed state**: filled accent background, white checkmark icon replacing the number - **Active state**: accent-colored ring (outline) with filled inner dot, subtle pulse animation - **Upcoming state**: muted gray circle with gray number - Step label below each circle (e.g., "Cart", "Shipping", "Payment", "Review", "Confirm") - Optional: brief description text below the label in smaller, muted font 3. Build the connecting lines: - Horizontal lines between each step node - **Completed segment**: filled with accent color (solid) - **Active segment**: gradient from accent to muted (half-filled effect) - **Upcoming segment**: muted gray, dashed or solid - Lines should connect center-to-center of the circles 4. Add interactive demo controls: - "Next" and "Previous" buttons below the stepper - Clicking advances or retreats the active step - Smooth transition animations on state changes (300ms) 5. Style in dark mode: - Dark background, accent color for progress - White text on completed circles, muted text on upcoming - Clean, minimal aesthetic # Constraints - CSS Flexbox for layout — lines using `::before`/`::after` or `<hr>` elements between nodes - Transitions on all state changes (color, scale, opacity) - Semantic HTML: use `<ol>` with `<li>` for steps, `aria-current="step"` on active - Must work at any number of steps (3–7) without layout breaking - Responsive: on mobile, show only active step with prev/next navigation - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic step labels (e-commerce checkout theme) - Well-commented code with sections: stepper markup, state styles, connecting lines, demo controls - Use CSS custom properties for accent color and sizing

# Role You are a Senior UX Engineer specializing in feedback systems, micro-interactions, and notification component design. # Objective Build an animated success toast notification component with entrance/exit animations, auto-dismiss behavior, and proper accessibility — styled for dark mode. # Instructions 1. Create the toast notification element: - Positioned in the top-right corner of the viewport (fixed) - Contains: success icon (checkmark in green circle), message text, and close button (×) - Rounded corners, subtle shadow, dark background with green accent 2. Implement entrance animation: - Slide in from the right with fade-in (`translateX(100%) → translateX(0)`) - Duration: 300ms ease-out 3. Implement exit animation: - Slide out to the right with fade-out - Duration: 200ms ease-in - Triggered by close button click or auto-dismiss timer 4. Add auto-dismiss behavior: - Toast automatically disappears after 4 seconds - Optional: progress bar at the bottom showing remaining time - Pause auto-dismiss on hover (resume on mouse leave) 5. Support stacking: - Multiple toasts stack vertically with consistent gap - New toasts appear at the top, pushing others down 6. Style with Tailwind CSS in dark mode: - Dark background (`bg-gray-800` or similar) - Green accent for success variant - White text with muted close button # Constraints - Semantic HTML with `role="alert"` and `aria-live="polite"` for screen readers - Tailwind CSS only — no custom CSS - Vanilla JavaScript for timing and animation triggers - No external dependencies - Toast container max-width: 360px - Include a demo button to trigger the toast # Output Format - Single HTML file using Tailwind CSS CDN - Include a trigger button for demonstration - Well-commented code with clear separation of toast markup, styles, and behavior