:root{color-scheme:dark;--bg-color:oklch(24.7936% .00584602 271.176);--card-bg:oklch(31.3318% .00550512 271.239);--text-primary:oklch(93.6373% .00458111 258.324);--text-secondary:oklch(70.2767% .0111377 247.985);--accent-blue:oklch(57.3697% .194603 257.858);--border-color:oklch(49.7878% .00938858 253.914);--space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--font-family:"Google Sans", Roboto, Arial, sans-serif;--truck-speed:.76s}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);min-block-size:100vh;padding:var(--space-md);place-items:center;margin:0;display:grid}*{box-sizing:border-box}.tracking-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;inline-size:100%;max-inline-size:440px;overflow:hidden;box-shadow:0 4px 6px oklch(0% 0 0/.1);& .card-header{padding:var(--space-md) var(--space-lg);background-color:#0000;& h2{color:var(--text-primary);margin:0;font-size:1rem;font-weight:700}}& .tracking-visual{padding:var(--space-md) var(--space-lg) var(--space-lg);container:tracking/inline-size}}.form-checkout{grid-template-columns:repeat(7,minmax(1rem,1fr));align-items:start;gap:0;inline-size:100%;display:grid}.check{align-items:center;gap:var(--space-xs);color:var(--text-primary);text-align:center;cursor:pointer;z-index:2;flex-direction:column;font-size:.85rem;font-weight:500;display:flex;position:relative;& input{appearance:none;border:2px solid var(--border-color);background-color:var(--card-bg);cursor:pointer;border-radius:50%;place-content:center;block-size:1.5rem;inline-size:1.5rem;margin:0;transition:all .2s;display:grid;&:before{content:"";transform-origin:0 100%;background-color:#0000;border-block-end:1px solid oklch(100% 5.96046e-8 90);border-inline-start:2px solid oklch(100% 5.96046e-8 90);block-size:.35rem;inline-size:.65rem;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:rotate(-45deg)scale(0)}&:checked{background-color:var(--accent-blue);border-color:var(--accent-blue);&:before{transform:rotate(-45deg)scale(1)translate(2px,4px)}}}& .step-label{white-space:pre-wrap;text-overflow:ellipsis;visibility:hidden;margin-block-start:.5rem;line-height:1.2;overflow:hidden}& .step-date{color:var(--text-secondary);text-overflow:ellipsis;visibility:hidden;margin-block-start:.25rem;font-size:.8rem;font-weight:400;display:none;overflow:hidden}}.line{background-color:var(--border-color);z-index:1;block-size:2px;inline-size:100%;margin-block-start:calc(.75rem - 1px);position:relative;&:after{content:"";background-color:var(--accent-blue);block-size:100%;inline-size:0%;transition:inline-size .2s;position:absolute;inset-block-start:0;inset-inline-start:0}}.form-checkout:has(#prepare:checked) .l-prep-js:after,.form-checkout:has(#ship:checked) .l-ship-js:after,.form-checkout:has(#ship:checked) .l-prep-js:after,.form-checkout:has(#arrive:checked) .l-arrv-js:after,.form-checkout:has(#arrive:checked) .l-ship-js:after,.form-checkout:has(#arrive:checked) .l-prep-js:after{inline-size:100%}.icon-wrapper--truck{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s, transform var(--truck-speed) cubic-bezier(.68, -.55, .265, 1.55), visibility 1s;z-index:10;color:var(--accent-blue);block-size:24px;inline-size:24px;position:absolute;inset-block-end:2.5rem;inset-inline-start:50%;transform:translate(-50%)translateY(100%);& svg{fill:currentColor;block-size:100%;inline-size:100%;display:block}}input[name=prepare]:checked~.icon-wrapper--truck{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(calc(-50% + var(--truck-offset,0px))) translateY(-3rem) scale(1.25);transition:opacity 1s .28s, transform var(--truck-speed) cubic-bezier(.68, -.24, .265, 1.24), visibility 0s}.form-checkout:has(input[name=ship]:checked) .icon-wrapper--truck{--truck-offset:calc(100cqw / 7 * 2)}.form-checkout:has(input[name=arrive]:checked) .icon-wrapper--truck{--truck-offset:calc(100cqw / 7 * 4)}@starting-style{.icon-wrapper--truck{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s, transform var(--truck-speed) cubic-bezier(.68, -.55, .265, 1.55), visibility 1s;transform:translate(-50%)translateY(100%)scale(0)}}@property --truck-offset{syntax:"<length>";inherits:true;initial-value:0}@container tracking (width<=450px){.form-checkout{grid-template-columns:repeat(7,minmax(.5rem,1fr))}.check .step-label{font-size:.75rem}.check input{block-size:1.25rem;inline-size:1.25rem}.check input:before{block-size:.3rem;inline-size:.6rem;margin-block-start:-.15rem}.line{inline-size:50%;margin-block-start:calc(.625rem - 1px);margin-inline:auto}}.reset-btn{color:var(--text-primary);cursor:pointer;opacity:.5;z-index:100;background:0 0;border:none;font-family:sans-serif;font-weight:700;transition:opacity .2s;position:fixed;bottom:4cqi;right:4cqi;&:hover{opacity:1}}