/* /quickstart: a vertical timeline of four steps with a progress line that lights as the page scrolls, and a sticky "What is running" diagram beside it on wide screens.
   Shared parts are reused (see developers.css): .card, .code, .dv-out, .seg tabs, .diagram-frame, .framed. All motion is off under prefers-reduced-motion. */
.qs-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-block); align-items: start; }
.qs-side { position: sticky; top: calc(var(--header-h) + 1.25rem); min-width: 0; }
.qs-fig .rd { max-width: 340px; }
.qs-tl { --rp: 0; position: relative; list-style: none; margin: 0; padding: 0 0 0 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-head); min-width: 0; }
.qs-tl::before, .qs-tl::after { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; }
.qs-tl::before { background: var(--border); }
.qs-tl::after { background: linear-gradient(180deg, var(--brand-amber), var(--brand-red) 35%, var(--brand-magenta) 65%, var(--brand-blue)); clip-path: inset(0 0 calc((1 - var(--rp)) * 100%) 0); }
.qs-step { position: relative; min-width: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.qs-dot { position: absolute; left: -2.5rem; top: 16px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-hover); background: var(--bg); color: var(--text-faint); font: var(--text-small); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.qs-step.is-done .qs-dot { border-color: var(--valid); color: var(--valid); }
.qs-step[aria-current="step"] .qs-dot { border-color: var(--brand-blue); color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 24%, transparent), 0 0 18px 3px color-mix(in srgb, var(--brand-blue) 55%, transparent); }
.qs-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 16px 18px; min-width: 0; }
.qs-hd { display: flex; align-items: center; gap: 12px; }
.qs-hd .c-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; color: var(--brand-orange); }
.qs-hd .c-ico svg { width: 18px; height: 18px; }
.qs-step:nth-child(2) .qs-hd .c-ico { color: var(--brand-red); } .qs-step:nth-child(3) .qs-hd .c-ico { color: var(--brand-magenta); } .qs-step:nth-child(4) .qs-hd .c-ico { color: var(--brand-blue); }
.qs-sentence { color: var(--text-dim); font: var(--text-body); max-width: 70ch; }
.qs-sentence code { color: var(--text); }
.dv-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; }
.dv-tabs .seg { justify-self: start; }
.dv-tabs [role="tabpanel"] { padding-top: 0; }
.dv-tabs [role="tabpanel"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
.qs-next { margin-bottom: var(--space-head); }
/* the diagram lights the parts used by the current step (only when the script runs; without it every part is lit) */
.qs-fig.is-js .dv-part { opacity: .32; transition: opacity var(--t-fast) var(--ease); }
.qs-fig.is-js .dv-part.is-lit { opacity: 1; }
@media (max-width: 63.99rem) {
  .qs-layout { grid-template-columns: minmax(0, 1fr); }
  .qs-side { position: static; order: -1; }
  .qs-fig .rd { margin-inline: auto; }
}
@media (max-width: 40rem) { .qs-tl { padding-left: 2rem; } .qs-dot { left: -2rem; width: 24px; height: 24px; } .qs-tl::before, .qs-tl::after { left: 11px; } }