/* Animated VLM workflow diagram (vlm-session.html). Generated; edit the generator or tweak values here. */
.wf-fig {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}

.wf-fig figcaption {
  max-width: 44rem;
  margin: 1.25rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.wf {
  --ok: #2dd4bf;
  --warn: #f0b429;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wf-v { display: none; max-width: 22rem; margin-inline: auto; }

@media (max-width: 47.99rem) {
  .wf-h { display: none; }
  .wf-v { display: block; }
}

.wf text { font-family: var(--font-sans); fill: var(--ink); }
.wf .lbl { font-size: 15px; font-weight: 600; }
.wf .sub { font-size: 12.5px; fill: var(--muted); }
.wf .mini { font-size: 11px; fill: var(--muted); font-family: var(--font-mono); }
.wf .edge-l { font-size: 11px; fill: var(--muted); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.wf .vlm-t { font-size: 20px; font-weight: 700; fill: var(--accent-ink); }
.wf .chip-t { font-size: 12px; font-weight: 700; fill: var(--accent-ink); font-family: var(--font-mono); }

.wf .card { fill: var(--panel); stroke: var(--ring); stroke-width: 1.25; }
.wf .ink { fill: var(--ink-soft); }
.wf .soft { fill: var(--line); }
.wf .acc { fill: var(--accent); }
.wf .acc-soft { fill: var(--accent-soft); }
.wf .ridge { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wf .node { fill: var(--panel); stroke: var(--ink-soft); stroke-width: 1.5; }
.wf .node-vlm { fill: var(--accent); stroke: var(--accent); }
.wf .node-warn { stroke: var(--warn); }
.wf .glyph { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf .glyph-acc { stroke: var(--accent); stroke-width: 4; }
.wf .flow { stroke: var(--ring); stroke-width: 2; stroke-dasharray: 5 7; fill: none; }
.wf .think { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 9; opacity: 0.6; transform-box: fill-box; transform-origin: center; }
.wf .glow { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; }
.wf .g-rev { stroke: var(--warn); }
.wf .chip { fill: var(--accent); }
.wf .p2 .chip { fill: var(--warn); }
.wf .pk { opacity: 0; }
.wf .js { opacity: 0; }
.wf .doc { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .wf .flow { animation: wfDash 1s linear infinite; }
  .wf .think { animation: wfSpin 10s linear infinite; }
  .wf .pk, .wf .doc, .wf .js, .wf .glow { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; }
  .wf-h .p0, .wf-h .p1 { animation-name: wfAutoH; }
  .wf-h .p2 { animation-name: wfRevH; }
  .wf-v .p0, .wf-v .p1 { animation-name: wfAutoV; }
  .wf-v .p2 { animation-name: wfRevV; }
  .wf .p1, .wf .p1 .doc, .wf .p1 .js { animation-delay: -4s; }
  .wf .p2, .wf .p2 .doc, .wf .p2 .js { animation-delay: -8s; }
  .wf .doc { animation-name: wfDoc; }
  .wf .js { animation-name: wfJs; }
  .wf .g-in { animation-name: wfGIn; }
  .wf .g-vlm { animation-name: wfGVlm; }
  .wf .g-val { animation-name: wfGVal; }
  .wf .g-route { animation-name: wfGRoute; }
  .wf .g-sys { animation-name: wfGSys; }
  .wf .g-rev { animation-name: wfGRev; }
}
@media (prefers-reduced-motion: reduce) { .wf .pk { display: none; } }
@keyframes wfDash { to { stroke-dashoffset: -12; } }
@keyframes wfSpin { to { transform: rotate(360deg); } }
@keyframes wfAutoH{0%{transform:translate(0px,0px);opacity:0}1.67%{transform:translate(0px,0px);opacity:1}6.67%{transform:translate(150px,0px)}13.33%{transform:translate(150px,0px)}18.33%{transform:translate(370px,0px)}23.33%{transform:translate(370px,0px)}28.33%{transform:translate(570px,0px)}33.33%{transform:translate(570px,0px)}41.67%{transform:translate(730px,-70px);opacity:1}45.00%{transform:translate(730px,-70px);opacity:0}100%{transform:translate(730px,-70px);opacity:0}}
@keyframes wfRevH{0%{transform:translate(0px,0px);opacity:0}1.67%{transform:translate(0px,0px);opacity:1}6.67%{transform:translate(150px,0px)}13.33%{transform:translate(150px,0px)}18.33%{transform:translate(370px,0px)}23.33%{transform:translate(370px,0px)}28.33%{transform:translate(570px,0px)}33.33%{transform:translate(570px,0px)}41.67%{transform:translate(730px,70px);opacity:1}45.00%{transform:translate(730px,70px);opacity:0}100%{transform:translate(730px,70px);opacity:0}}
@keyframes wfAutoV{0%{transform:translate(0px,0px);opacity:0}1.67%{transform:translate(0px,0px);opacity:1}6.67%{transform:translate(0px,140px)}13.33%{transform:translate(0px,140px)}18.33%{transform:translate(0px,280px)}23.33%{transform:translate(0px,280px)}28.33%{transform:translate(0px,420px)}33.33%{transform:translate(0px,420px)}41.67%{transform:translate(0px,580px);opacity:1}45.00%{transform:translate(0px,580px);opacity:0}100%{transform:translate(0px,580px);opacity:0}}
@keyframes wfRevV{0%{transform:translate(0px,0px);opacity:0}1.67%{transform:translate(0px,0px);opacity:1}6.67%{transform:translate(0px,140px)}13.33%{transform:translate(0px,140px)}18.33%{transform:translate(0px,280px)}23.33%{transform:translate(0px,280px)}28.33%{transform:translate(0px,420px)}33.33%{transform:translate(0px,420px)}41.67%{transform:translate(160px,580px);opacity:1}45.00%{transform:translate(160px,580px);opacity:0}100%{transform:translate(160px,580px);opacity:0}}
@keyframes wfDoc{0%,8.33%{opacity:1}11.67%{opacity:0}100%{opacity:0}}
@keyframes wfJs{0%,8.33%{opacity:0}11.67%{opacity:1}100%{opacity:1}}
@keyframes wfGIn{0%{opacity:0}0.00%{opacity:0}1.67%{opacity:1}3.33%{opacity:1}5.00%{opacity:0}33.33%{opacity:0}35.00%{opacity:1}36.67%{opacity:1}38.33%{opacity:0}66.67%{opacity:0}68.33%{opacity:1}70.00%{opacity:1}71.67%{opacity:0}100%{opacity:0}}
@keyframes wfGVlm{0%{opacity:0}6.67%{opacity:0}8.33%{opacity:1}11.67%{opacity:1}13.33%{opacity:0}40.00%{opacity:0}41.67%{opacity:1}45.00%{opacity:1}46.67%{opacity:0}73.33%{opacity:0}75.00%{opacity:1}78.33%{opacity:1}80.00%{opacity:0}100%{opacity:0}}
@keyframes wfGVal{0%{opacity:0}18.33%{opacity:0}20.00%{opacity:1}21.67%{opacity:1}23.33%{opacity:0}51.67%{opacity:0}53.33%{opacity:1}55.00%{opacity:1}56.67%{opacity:0}85.00%{opacity:0}86.67%{opacity:1}88.33%{opacity:1}90.00%{opacity:0}100%{opacity:0}}
@keyframes wfGRoute{0%{opacity:0}28.33%{opacity:0}30.00%{opacity:1}31.67%{opacity:1}33.33%{opacity:0}61.67%{opacity:0}63.33%{opacity:1}65.00%{opacity:1}66.67%{opacity:0}95.00%{opacity:0}96.67%{opacity:1}98.33%{opacity:1}100.00%{opacity:0}100%{opacity:0}}
@keyframes wfGSys{0%{opacity:0}6.67%{opacity:0}8.33%{opacity:1}15.00%{opacity:1}16.67%{opacity:0}40.00%{opacity:0}41.67%{opacity:1}48.33%{opacity:1}50.00%{opacity:0}100%{opacity:0}}
@keyframes wfGRev{0%{opacity:0}73.33%{opacity:0}75.00%{opacity:1}81.67%{opacity:1}83.33%{opacity:0}100%{opacity:0}}