/* Generated by viewer.py: the architecture diagram (source tour and landing page) and its spark. */
.diagram { position: relative; isolation: isolate; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px; box-shadow: var(--shadow); }
/* The glow belongs to the product picture: it sits behind the diagram, like the landing page's demo. */
.diagram::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 75%); }
.flow { width: 100%; height: auto; display: block; }
.flow .node rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; transition: stroke .15s, fill .15s; }
.flow .node.core rect { fill: var(--accent-soft); stroke: var(--accent); }
.flow .node.agents rect { stroke-dasharray: 5 4; }
.flow .node.soft rect { fill: var(--panel); }
.flow a:hover rect, .flow a:focus-visible rect { stroke: var(--accent); fill: var(--accent-soft); }
.flow text { text-anchor: middle; fill: var(--text); font-family: system-ui, sans-serif; }
.flow .t { font-size: 17px; font-weight: 700; }
.flow .t.sm { font-size: 15.5px; }
.flow .s { font-size: 12.5px; fill: var(--muted); }
.flow .s.m { font-family: var(--mono); font-size: 11.5px; }
.flow .s.b { fill: var(--text); font-weight: 600; }

.flow .edge { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; opacity: .8; }
.flow .edge.alt { stroke: var(--muted); opacity: .55; }
.flow .ah { fill: var(--accent); }
/* The spark (motion.js + the generated assets/diagram.css): a gold dot walks the real flow and each
   box glows as it arrives. Static and invisible until motion.js turns it on. */
.flow .node rect.hl, .flow a:hover rect.hl, .flow a:focus-visible rect.hl { fill: rgba(255, 211, 110, .1);
  stroke: var(--spark, #ffd36e); stroke-width: 3; opacity: 0; pointer-events: none; }
.flow .dspark { pointer-events: none; transform-box: view-box; transform-origin: 0 0; }
.flow .dsp-in { opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow .dspark .halo { fill: var(--spark, #ffd36e); opacity: .32; }
.flow .dspark .core { fill: var(--spark, #ffd36e); stroke: #fff6dc; stroke-width: 1.6; }
.diagram .anim-controls { right: 12px; bottom: 12px; }
@media (max-width: 520px) {
  /* The picture scrolls sideways inside the card; the controls stay put in a strip under it. */
  .diagram { padding: 8px 8px 48px; }
  .diagram-scroll { overflow-x: auto; }
  .diagram .anim-controls { right: 10px; bottom: 9px; }
  .flow { min-width: 640px; }
}

@keyframes dsp-fade-1 { 0%, 2.00% { opacity: 0; transform: scale(.4); } 4.50% { opacity: 1; transform: scale(1); } 10.50% { opacity: 1; transform: scale(1); } 13.00%, 100% { opacity: 0; transform: scale(.55); } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d1 .dsp-in { animation: dsp-fade-1 8s ease-in-out infinite; }
@keyframes dsp-move-1 { 0%, 2.00% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 13.00%, 100% { offset-distance: 100%; } }
@keyframes dsp-step-1 { 0% { transform: translate(176.0px, 165.0px); } 2.00% { transform: translate(176.0px, 165.0px); } 2.69% { transform: translate(180.4px, 165.0px); } 3.38% { transform: translate(184.8px, 165.0px); } 4.06% { transform: translate(189.1px, 165.0px); } 4.75% { transform: translate(193.5px, 165.0px); } 5.44% { transform: translate(197.9px, 165.0px); } 6.12% { transform: translate(202.2px, 165.0px); } 6.81% { transform: translate(206.6px, 165.0px); } 7.50% { transform: translate(211.0px, 165.0px); } 8.19% { transform: translate(215.4px, 165.0px); } 8.88% { transform: translate(219.8px, 165.0px); } 9.56% { transform: translate(224.1px, 165.0px); } 10.25% { transform: translate(228.5px, 165.0px); } 10.94% { transform: translate(232.9px, 165.0px); } 11.62% { transform: translate(237.2px, 165.0px); } 12.31% { transform: translate(241.6px, 165.0px); } 13.00% { transform: translate(246.0px, 165.0px); } 100% { transform: translate(246.0px, 165.0px); } }
@supports (offset-path: path("M0 0H1")) { .flow .dspark.d1 { offset-path: path("M176 165 H246"); offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 0%; } .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d1 { animation: dsp-move-1 8s linear infinite; } }
@supports not (offset-path: path("M0 0H1")) { .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d1 { animation: dsp-step-1 8s linear infinite; } }
@keyframes dsp-fade-2 { 0%, 16.50% { opacity: 0; transform: scale(.4); } 19.00% { opacity: 1; transform: scale(1); } 26.50% { opacity: 1; transform: scale(1); } 29.00%, 100% { opacity: 0; transform: scale(.55); } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d2 .dsp-in { animation: dsp-fade-2 8s ease-in-out infinite; }
@keyframes dsp-move-2 { 0%, 16.50% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 29.00%, 100% { offset-distance: 100%; } }
@keyframes dsp-step-2 { 0% { transform: translate(420.0px, 140.0px); } 16.50% { transform: translate(420.0px, 140.0px); } 17.28% { transform: translate(427.4px, 139.3px); } 18.06% { transform: translate(433.9px, 137.2px); } 18.84% { transform: translate(439.7px, 134.0px); } 19.62% { transform: translate(444.9px, 129.8px); } 20.41% { transform: translate(449.5px, 124.9px); } 21.19% { transform: translate(453.8px, 119.4px); } 21.97% { transform: translate(457.7px, 113.6px); } 22.75% { transform: translate(461.5px, 107.5px); } 23.53% { transform: translate(465.2px, 101.4px); } 24.31% { transform: translate(469.1px, 95.6px); } 25.09% { transform: translate(473.1px, 90.1px); } 25.88% { transform: translate(477.4px, 85.2px); } 26.66% { transform: translate(482.1px, 81.0px); } 27.44% { transform: translate(487.4px, 77.8px); } 28.22% { transform: translate(493.3px, 75.7px); } 29.00% { transform: translate(500.0px, 75.0px); } 100% { transform: translate(500.0px, 75.0px); } }
@supports (offset-path: path("M0 0H1")) { .flow .dspark.d2 { offset-path: path("M420 140 C462 140 462 75 500 75"); offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 0%; } .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d2 { animation: dsp-move-2 8s linear infinite; } }
@supports not (offset-path: path("M0 0H1")) { .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d2 { animation: dsp-step-2 8s linear infinite; } }
@keyframes dsp-fade-3 { 0%, 16.50% { opacity: 0; transform: scale(.4); } 19.00% { opacity: 1; transform: scale(1); } 26.50% { opacity: 1; transform: scale(1); } 29.00%, 100% { opacity: 0; transform: scale(.55); } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d3 .dsp-in { animation: dsp-fade-3 8s ease-in-out infinite; }
@keyframes dsp-move-3 { 0%, 16.50% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 29.00%, 100% { offset-distance: 100%; } }
@keyframes dsp-step-3 { 0% { transform: translate(420.0px, 190.0px); } 16.50% { transform: translate(420.0px, 190.0px); } 17.28% { transform: translate(427.4px, 190.7px); } 18.06% { transform: translate(433.9px, 192.8px); } 18.84% { transform: translate(439.7px, 196.0px); } 19.62% { transform: translate(444.9px, 200.2px); } 20.41% { transform: translate(449.5px, 205.1px); } 21.19% { transform: translate(453.8px, 210.6px); } 21.97% { transform: translate(457.7px, 216.4px); } 22.75% { transform: translate(461.5px, 222.5px); } 23.53% { transform: translate(465.2px, 228.6px); } 24.31% { transform: translate(469.1px, 234.4px); } 25.09% { transform: translate(473.1px, 239.9px); } 25.88% { transform: translate(477.4px, 244.8px); } 26.66% { transform: translate(482.1px, 249.0px); } 27.44% { transform: translate(487.4px, 252.2px); } 28.22% { transform: translate(493.3px, 254.3px); } 29.00% { transform: translate(500.0px, 255.0px); } 100% { transform: translate(500.0px, 255.0px); } }
@supports (offset-path: path("M0 0H1")) { .flow .dspark.d3 { offset-path: path("M420 190 C462 190 462 255 500 255"); offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 0%; } .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d3 { animation: dsp-move-3 8s linear infinite; } }
@supports not (offset-path: path("M0 0H1")) { .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d3 { animation: dsp-step-3 8s linear infinite; } }
@keyframes dsp-fade-4 { 0%, 32.50% { opacity: 0; transform: scale(.4); } 35.00% { opacity: 1; transform: scale(1); } 40.00% { opacity: 1; transform: scale(1); } 42.50%, 100% { opacity: 0; transform: scale(.55); } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d4 .dsp-in { animation: dsp-fade-4 8s ease-in-out infinite; }
@keyframes dsp-move-4 { 0%, 32.50% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 42.50%, 100% { offset-distance: 100%; } }
@keyframes dsp-step-4 { 0% { transform: translate(680.0px, 255.0px); } 32.50% { transform: translate(680.0px, 255.0px); } 33.12% { transform: translate(684.8px, 255.0px); } 33.75% { transform: translate(689.5px, 255.0px); } 34.38% { transform: translate(694.2px, 255.0px); } 35.00% { transform: translate(699.0px, 255.0px); } 35.62% { transform: translate(703.8px, 255.0px); } 36.25% { transform: translate(708.5px, 255.0px); } 36.88% { transform: translate(713.2px, 255.0px); } 37.50% { transform: translate(718.0px, 255.0px); } 38.12% { transform: translate(722.8px, 255.0px); } 38.75% { transform: translate(727.5px, 255.0px); } 39.38% { transform: translate(732.2px, 255.0px); } 40.00% { transform: translate(737.0px, 255.0px); } 40.62% { transform: translate(741.8px, 255.0px); } 41.25% { transform: translate(746.5px, 255.0px); } 41.88% { transform: translate(751.2px, 255.0px); } 42.50% { transform: translate(756.0px, 255.0px); } 100% { transform: translate(756.0px, 255.0px); } }
@supports (offset-path: path("M0 0H1")) { .flow .dspark.d4 { offset-path: path("M680 255 H756"); offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 0%; } .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d4 { animation: dsp-move-4 8s linear infinite; } }
@supports not (offset-path: path("M0 0H1")) { .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d4 { animation: dsp-step-4 8s linear infinite; } }
@keyframes dsp-fade-5 { 0%, 45.00% { opacity: 0; transform: scale(.4); } 47.50% { opacity: 1; transform: scale(1); } 52.50% { opacity: 1; transform: scale(1); } 55.00%, 100% { opacity: 0; transform: scale(.55); } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d5 .dsp-in { animation: dsp-fade-5 8s ease-in-out infinite; }
@keyframes dsp-move-5 { 0%, 45.00% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 55.00%, 100% { offset-distance: 100%; } }
@keyframes dsp-step-5 { 0% { transform: translate(756.0px, 75.0px); } 45.00% { transform: translate(756.0px, 75.0px); } 45.62% { transform: translate(751.5px, 75.0px); } 46.25% { transform: translate(747.0px, 75.0px); } 46.88% { transform: translate(742.5px, 75.0px); } 47.50% { transform: translate(738.0px, 75.0px); } 48.12% { transform: translate(733.5px, 75.0px); } 48.75% { transform: translate(729.0px, 75.0px); } 49.38% { transform: translate(724.5px, 75.0px); } 50.00% { transform: translate(720.0px, 75.0px); } 50.62% { transform: translate(715.5px, 75.0px); } 51.25% { transform: translate(711.0px, 75.0px); } 51.88% { transform: translate(706.5px, 75.0px); } 52.50% { transform: translate(702.0px, 75.0px); } 53.12% { transform: translate(697.5px, 75.0px); } 53.75% { transform: translate(693.0px, 75.0px); } 54.38% { transform: translate(688.5px, 75.0px); } 55.00% { transform: translate(684.0px, 75.0px); } 100% { transform: translate(684.0px, 75.0px); } }
@supports (offset-path: path("M0 0H1")) { .flow .dspark.d5 { offset-path: path("M756 75 H684"); offset-rotate: 0deg; offset-anchor: 0 0; offset-distance: 0%; } .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d5 { animation: dsp-move-5 8s linear infinite; } }
@supports not (offset-path: path("M0 0H1")) { .diagram.anim-on[data-anim="spark"]:not(.stopped) .flow .dspark.d5 { animation: dsp-step-5 8s linear infinite; } }
@keyframes hl-agents { 0% { opacity: 0; } 0.00% { opacity: 0; } 2.50% { opacity: 1; } 11.50% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-agents { animation: hl-agents 8s ease-in-out infinite; }
@keyframes hl-cli { 0% { opacity: 0; } 10.75% { opacity: 0; } 14.50% { opacity: 1; } 23.50% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-cli { animation: hl-cli 8s ease-in-out infinite; }
@keyframes hl-entries { 0% { opacity: 0; } 26.25% { opacity: 0; } 30.00% { opacity: 1; } 39.00% { opacity: 0; } 52.25% { opacity: 0; } 56.00% { opacity: 1; } 65.00% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-entries { animation: hl-entries 8s ease-in-out infinite; }
@keyframes hl-index { 0% { opacity: 0; } 26.75% { opacity: 0; } 30.50% { opacity: 1; } 39.50% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-index { animation: hl-index 8s ease-in-out infinite; }
@keyframes hl-embeddings { 0% { opacity: 0; } 39.75% { opacity: 0; } 43.50% { opacity: 1; } 52.50% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-embeddings { animation: hl-embeddings 8s ease-in-out infinite; }
@keyframes hl-librarian { 0% { opacity: 0; } 41.75% { opacity: 0; } 45.50% { opacity: 1; } 54.50% { opacity: 0; } 100% { opacity: 0; } }
.diagram.anim-on[data-anim="spark"]:not(.stopped) .hl-librarian { animation: hl-librarian 8s ease-in-out infinite; }