Step By Step List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step-by-Step List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #ffffff;
            color: #333;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Step-by-Step List Component Styles - Copy from here
           ========================================================================== */
        .steps-template {
            --steps-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --accent-color: #0d6efd;
            --line-color: #dee2e6;
            --counter-bg-color: #fff;
            --counter-text-color: var(--accent-color);
            --counter-border-color: var(--accent-color);
            --counter-size: 40px;
            --line-width: 2px;

font-family: var(--steps-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 600px;
        }
        
        .steps-template *,
        .steps-template *::before,
        .steps-template *::after {
            box-sizing: border-box;
        }
        
        .steps-template .steps-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.steps-template .steps-header h2 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }

.steps-template .steps-list {
            list-style: none;
            padding-left: 0;
            margin-left: 20px;
            /* Creates the space for the counter and line */
            padding-left: calc(var(--counter-size) + 20px); 
            position: relative;
            counter-reset: steps-counter; /* Initialize the counter */
        }
        
        /* The connecting timeline */
        .steps-template .steps-list::before {
            content: '';
            position: absolute;
            left: calc(var(--counter-size) / 2);
            top: 20px;
            bottom: 20px;
            width: var(--line-width);
            background-color: var(--line-color);
            transform: translateX(-50%);
        }

.steps-template .steps-list-item {
            position: relative;
            padding-bottom: 2.5rem;
        }
        
        /* Hide the final trailing padding */
        .steps-template .steps-list-item:last-child {
            padding-bottom: 0;
        }

/* The custom number counter */
        .steps-template .steps-list-item::before {
            counter-increment: steps-counter; /* Increment the counter for each li */
            content: counter(steps-counter); /* Display the counter value */
            position: absolute;
            left: calc(-1 * (var(--counter-size) + 20px)); /* Position it to the left */
            top: -2px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--counter-size);
            height: var(--counter-size);
            border: var(--line-width) solid var(--counter-border-color);
            border-radius: 50%;
            background-color: var(--counter-bg-color);
            color: var(--counter-text-color);
            font-weight: bold;
            font-size: 1rem;
        }

.steps-template .steps-list-item h3 {
            font-size: 1.25rem;
            margin: 0 0 0.5rem 0;
        }

.steps-template .steps-list-item p {
            margin: 0;
            color: var(--secondary-text-color);
            line-height: 1.6;
        }

</style>
</head>
<body>

<div class="steps-template">
    <div class="steps-header">
        <h2>How to Build a Time-Traveling Toaster</h2>
    </div>

<ol class="steps-list">
        <li class="steps-list-item">
            <h3>Acquire Flux Capacitor</h3>
            <p>First, you'll need a standard 1.21 gigawatt flux capacitor. These can typically be sourced from old lightning-struck clock towers or disgruntled scientists.</p>
        </li>
        <li class="steps-list-item">
            <h3>Modify Toaster Chassis</h3>
            <p>Carefully disassemble a four-slice, wide-slot toaster. Reroute the heating element coils to create a miniature temporal conduit. Use chrome polish for maximum style.</p>
        </li>
         <li class="steps-list-item">
            <h3>Integrate the Power Source</h3>
            <p>Connect the flux capacitor to the toaster's power cord. A standard wall outlet will not suffice. We recommend a portable fusion reactor for best results.</p>
        </li>
         <li class="steps-list-item">
            <h3>Calibrate the Bread-Based Chronometer</h3>
            <p>Set the "light" to "dark" dial on the toaster. This will now function as your temporal destination selector. A setting of 3 is perfect for witnessing the signing of historical documents.</p>
        </li>
    </ol>
</div>

</body>
</html>