:root { --dpx-arrow-right:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M5%2012h14%22%20%2F%3E%20%3Cpath%20d%3D%22m12%205%207%207-7%207%22%20%2F%3E%20%3C%2Fsvg%3E%20"); --dpx-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%20%3C%2Fsvg%3E%20"); }
.dpx-icon { display:inline-block; width:20px; height:20px; min-width:0; flex:0 0 auto; vertical-align:middle; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dpx-icon * { vector-effect:non-scaling-stroke; }
.flow-icon { width:44px; height:44px; border-radius:12px; }
.flow-icon .dpx-icon { width:23px; height:23px; }
.button .dpx-icon, .demo-open .dpx-icon, .assistant-action .dpx-icon { width:18px; height:18px; }
.hero-benefits i .dpx-icon, .mode-points i .dpx-icon { width:12px; height:12px; }
.artifact-icon .dpx-icon { width:21px; height:21px; }
.artifact-expand i { display:inline-flex; }
.artifact-expand .dpx-icon, .boundary-path .dpx-icon { width:17px; height:17px; }
.process-controls button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.process-controls .dpx-icon, .process-marker .dpx-icon { width:16px; height:16px; }
.process-track li:not(:last-child)::after { content:''; width:16px; height:16px; background:currentColor; mask:var(--dpx-arrow-right) center/contain no-repeat; }
.demo-action, .demo-read-toggle, .demo-chat-latest { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.demo-action .dpx-icon, .demo-exit .dpx-icon, .demo-chat-latest .dpx-icon { width:16px; height:16px; }
.demo-scenario-icon .dpx-icon { width:18px; height:18px; }
.demo-scenario > i { display:inline-flex; }
.demo-scenario > i .dpx-icon { width:16px; height:16px; }
.demo-vibe-task-icon .dpx-icon, .demo-result-line i .dpx-icon, .demo-replan-change i .dpx-icon { width:13px; height:13px; }
.demo-dep-arrow { display:inline-flex; align-items:center; }
.demo-dep-arrow .dpx-icon { width:16px; height:16px; }
.demo-work-row.done::before { content:'' !important; width:17px; height:17px; border:0; border-radius:0; background:currentColor; color:#178778; mask:var(--dpx-check) center/contain no-repeat; }
@media(max-width:680px) { .process-track li:not(:last-child)::after { content:''; transform:rotate(90deg); } }