Order Tracker

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Order Tracker</title>
    <meta name="description" content="An order tracking card with a vertical delivery timeline — a truck marker rides the rail from Order placed to Delivered, a status pill and mono ETA follow along, and an incomplete address halts the run until you confirm it.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="bg-layer"></div>

    <main class="otk-stage">

        <section class="otk-card" id="otk-card" data-state="idle" aria-busy="false" aria-labelledby="otk-title" tabindex="-1">

            <header class="otk-head">
                <span class="otk-head__tile" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/><path d="M12 12l8 -4.5"/><path d="M12 12l0 9"/><path d="M12 12l-8 -4.5"/><path d="M16 5.25l-8 4.5"/></svg>
                </span>
                <div class="otk-head__text">
                    <h2 class="otk-title" id="otk-title">Order #48213</h2>
                    <p class="otk-order">3 items · Arrives Thu, Oct 2</p>
                </div>
                <div class="otk-head__meta">
                    <span class="otk-pill" id="otk-pill" data-status="idle">
                        <span class="otk-pill__dot" aria-hidden="true"></span>
                        <span class="otk-pill__label" id="otk-pill-label">Placed</span>
                    </span>
                    <span class="otk-eta" id="otk-eta">ETA Oct 2</span>
                </div>
            </header>

            <div class="otk-body" id="otk-steps"></div>