/* Tooling Atlas flow packet v0.2 */
.atlas-flow {
  --atlas-bg: #111614; --atlas-panel: #171d1a; --atlas-ink: #f3f4ee; --atlas-muted: #929c96; --atlas-line: #36413b; --atlas-accent: var(--accent, #dff46a);
  box-sizing: border-box; width: 100%; margin: 0; color: var(--atlas-ink); border: 1px solid var(--atlas-line); background: var(--atlas-bg); font-family: var(--font-display, Inter, sans-serif);
}
.atlas-flow *, .atlas-flow *::before, .atlas-flow *::after { box-sizing: border-box; }
.atlas-flow figcaption { display: grid; gap: 7px; padding: 18px 20px; border-bottom: 1px solid var(--atlas-line); }
.atlas-flow figcaption span, .atlas-flow small { color: var(--atlas-muted); font: 550 .53rem/1.4 var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; }
.atlas-flow figcaption strong { font-size: 1.05rem; }
.atlas-flow ol { display: grid; gap: 0; margin: 0; padding: 20px; list-style: none; }
.atlas-flow li { position: relative; display: grid; min-height: 122px; grid-template-columns: 35px minmax(0, 1fr); gap: 13px; align-items: start; padding: 18px; border: 1px solid var(--atlas-line); background: var(--atlas-panel); }
.atlas-flow li:not(:last-child) { margin-bottom: 24px; }
.atlas-flow li:not(:last-child)::after { position: absolute; top: 100%; left: 34px; width: 1px; height: 24px; background: var(--atlas-line); content: ""; }
.atlas-flow-index { display: grid; width: 28px; height: 28px; place-items: center; color: var(--atlas-muted); border: 1px solid var(--atlas-line); border-radius: 50%; font: 550 .52rem/1 var(--font-mono, monospace); }
.atlas-flow-copy { display: grid; gap: 7px; }.atlas-flow-copy strong { font-size: .86rem; line-height: 1.35; }.atlas-flow-copy > span { color: var(--atlas-muted); font-size: .7rem; line-height: 1.5; }
.atlas-flow li.is-accent { color: #11150f; border-color: var(--atlas-accent); background: var(--atlas-accent); }
.atlas-flow li.is-accent :is(small, .atlas-flow-copy > span) { color: color-mix(in srgb, #11150f 62%, var(--atlas-accent)); }.atlas-flow li.is-accent .atlas-flow-index { color: #11150f; border-color: color-mix(in srgb, #11150f 45%, var(--atlas-accent)); }
.atlas-flow-horizontal ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }.atlas-flow-horizontal li { margin: 0; }.atlas-flow-horizontal li:not(:last-child)::after { top: 50%; left: 100%; width: 24px; height: 1px; }
[data-theme="light"] .atlas-flow { --atlas-bg: #f6f4ed; --atlas-panel: #eceae2; --atlas-ink: #171b18; --atlas-muted: #646e68; --atlas-line: #c5cbc6; }
@media (max-width: 760px) { .atlas-flow-horizontal ol { grid-template-columns: 1fr; }.atlas-flow-horizontal li:not(:last-child) { margin-bottom: 24px; }.atlas-flow-horizontal li:not(:last-child)::after { top: 100%; left: 34px; width: 1px; height: 24px; } }
@media (prefers-reduced-motion: no-preference) { .atlas-flow li { transition: border-color 180ms ease, transform 180ms ease; }.atlas-flow li:hover { border-color: var(--atlas-accent); transform: translateY(-2px); } }