/* ============================================================================
   ADDED: viz.css — animated diagrams drawn in code (website_app/viz.php + website_assets/js/viz.js).
   Colours are variables, so the diagrams follow the site's light / dark theme.
   ============================================================================ */
.vz {
  --vz-card: #0f0f13;
  --vz-chip: #16161b;
  --vz-line: #2b1f33;
  --vz-line2: #2a2a32;
  --vz-wire: #3a2238;
  --vz-text: #ffffff;
  --vz-muted: #9aa3b5;
  --vz-pink: #ff2d87;
  --vz-orange: #ffa030;
  --vz-green: #2dd4a0;
  width: var(--vz-w, 600px);   /* CHANGED: intrinsic size like the old <img width> … */
  max-width: 100%;             /* … and shrinks with its container */
  margin-inline: auto;
}
html[data-theme="light"] .vz {
  --vz-card: #ffffff;
  --vz-chip: #f4f2f6;
  --vz-line: #eadbe6;
  --vz-line2: #e3e0e8;
  --vz-wire: #ecc6da;
  --vz-text: #15151b;
  --vz-muted: #5f6677;
  --vz-green: #12a679;
}
.vz svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.vz text { font-family: inherit; }

/* shared pieces */
.vz-card { fill: var(--vz-card); stroke: var(--vz-line); stroke-width: 1; transition: stroke .35s, stroke-width .35s; }
.vz-t { fill: var(--vz-text); font-size: 13px; font-weight: 600; }
.vz-s { fill: var(--vz-muted); font-size: 11px; transition: fill .3s, opacity .3s; }
.vz-glyph { fill: #fff; }
.vz-glyph-o { fill: none; stroke: #fff; stroke-width: 1.6; }
.vz-w { fill: none; stroke: var(--vz-wire); stroke-width: 1.4; transition: stroke .35s, stroke-width .35s; }
.vz-pulse { fill: none; stroke: var(--vz-pink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 100; stroke-dashoffset: 7; opacity: 0; }
@keyframes vz-pulse { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -100; } }
@keyframes vz-glow { 0%, 100% { opacity: .1; } 50% { opacity: .3; } }

/* ---- home hero ---- */
.vz-hero .vz-pill > rect:first-child { fill: var(--vz-chip); stroke: var(--vz-line2); }
.vz-hero .vz-pill-on { opacity: 0; transition: opacity .35s; }
.vz-hero .vz-pill text { fill: var(--vz-muted); font-size: 12.5px; font-weight: 600; transition: fill .3s; }
.vz-hero.is-src .vz-pill-on { opacity: 1; }
.vz-hero.is-src .vz-pill text { fill: #fff; }

.vz-hero.is-src .vz-lw.on { stroke: var(--vz-pink); stroke-width: 2; }
.vz-hero.is-src .vz-src.on .vz-card { stroke: var(--vz-pink); stroke-width: 1.6; }
.vz-hero.is-src .vz-src.on .vz-s { fill: var(--vz-orange); }
.vz-hero.is-route:not(.is-done) .vz-pulse { opacity: 1; animation: vz-pulse .9s linear var(--d, 0ms) infinite; }
.vz-hero.is-done .vz-rw { stroke: var(--vz-green); stroke-width: 1.8; }

.vz-hero .vz-st { opacity: 0; fill: var(--vz-green); }
.vz-hero .vz-c { opacity: 1; }
.vz-hero.is-done .vz-st { opacity: 1; }
.vz-hero.is-done .vz-c { opacity: 0; }
.vz-hero.is-done .vz-dst .vz-card { stroke: var(--vz-green); stroke-width: 1.4; }
.vz-hero .vz-live { fill: var(--vz-green); transition: opacity .3s; }
.vz-hero.is-done .vz-live { opacity: 0; }
.vz-hero .vz-ok { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s, transform .3s; }
.vz-hero .vz-ok circle { fill: var(--vz-green); }
.vz-hero .vz-ok path { fill: none; stroke: #04140d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-hero.is-done .vz-ok { opacity: 1; transform: scale(1); }
.vz-hero.is-done .vz-dst:nth-of-type(2) .vz-ok { transition-delay: .04s; }

.vz-hero .vz-hub-glow { fill: var(--vz-pink); opacity: .12; }
.vz-hero .vz-hub-ring { fill: none; stroke: var(--vz-pink); stroke-opacity: .45; stroke-width: 1.5; }
.vz-hero.is-route .vz-hub-glow { animation: vz-glow 1s ease-in-out infinite; }
.vz-hero .vz-port { fill: var(--vz-pink); }

.vz-hero .vz-stat rect { fill: var(--vz-chip); stroke: var(--vz-line2); transition: fill .3s, stroke .3s; }
.vz-hero .vz-stat text { fill: var(--vz-muted); font-size: 13px; transition: fill .3s; }
.vz-hero.is-done .vz-stat rect { fill: rgba(45, 212, 160, .12); stroke: #1f9d6c; }
.vz-hero.is-done .vz-stat text { fill: var(--vz-green); font-weight: 600; }

.vz-tab rect { fill: var(--vz-chip); stroke: var(--vz-line2); transition: fill .3s, stroke .3s; }
.vz-tab text { fill: var(--vz-muted); font-size: 11.5px; font-weight: 600; transition: fill .3s; }
.vz-tab.on rect { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-tab.on text { fill: var(--vz-text); }

@media (prefers-reduced-motion: reduce) {
  .vz * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   ADDED: shared pieces for website_app/viz/*.php diagrams
   Default (no .vz-run) = finished state. viz.js adds .vz-run + step classes s1…sN.
   ============================================================================ */
.vz { --vz-red: #ff4d5e; --vz-blue: #3b82f6; }
html[data-theme="light"] .vz { --vz-red: #e23b4e; }
.vz .vz-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vz-tw { fill: var(--vz-text); }
.vz-tm { fill: var(--vz-muted); }
.vz-tg { fill: var(--vz-green); }
.vz-tp, .vz-tp-fill { fill: var(--vz-pink); }
.vz-to { fill: var(--vz-orange); }
.vz-tr { fill: var(--vz-red); }
.vz-on-brand { fill: #fff; }
.vz-panel { fill: var(--vz-card); stroke: var(--vz-line2); }
.vz-chip { fill: var(--vz-chip); stroke: var(--vz-line2); transition: fill .3s, stroke .3s; }
.vz-track { fill: var(--vz-chip); }
.vz-pk { stroke: var(--vz-pink); stroke-opacity: .7; }
.vz-master { stroke: var(--vz-pink); stroke-width: 1.4; }
.vz-dot-live { fill: var(--vz-green); stroke: var(--vz-green); stroke-opacity: .28; stroke-width: 5; }
.vz-okc circle { fill: var(--vz-green); }
.vz-okc path, .vz-noc path { fill: none; stroke: #04140d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-noc circle { fill: var(--vz-red); }
.vz-noc path { stroke: #fff; }
.vz-node { fill: #fff; stroke: var(--vz-pink); stroke-width: 2.5; }
.vz-hubg .vz-hub-glow { fill: var(--vz-pink); opacity: .13; }
.vz-hubg .vz-hub-ring { fill: none; stroke: var(--vz-pink); stroke-opacity: .45; stroke-width: 1.5; }
.vz-sw rect { fill: #3a3a44; }
.vz-sw.on rect { fill: var(--vz-blue); }
.vz-sw circle { fill: #fff; }
.vz-res-ok { fill: rgba(45, 212, 160, .1); stroke: rgba(45, 212, 160, .55); }
.vz-res-no { fill: rgba(255, 77, 94, .1); stroke: rgba(255, 77, 94, .55); }
.vz g, .vz text, .vz rect, .vz path, .vz circle { transition: opacity .35s, fill .35s, stroke .35s; }
.vz .vz-x-before { opacity: 0; }                          /* finished state shows the "after" pieces */
@keyframes vz-spin { to { transform: rotate(360deg); } }
@keyframes vz-breathe { 0%, 100% { opacity: .1; } 50% { opacity: .28; } }

/* ---- speed (parallel dispatch) ---- */
.vz-speed .vz-master { transition: stroke .3s; }
.vz-speed.vz-run:not(.s1) .vz-master { stroke: var(--vz-line2); }
.vz-speed.vz-run:not(.s1) .vz-x-after { opacity: 0; }
.vz-speed.vz-run:not(.s1) .vz-x-before { opacity: 1; }
.vz-speed .vz-bar { transform-box: fill-box; transform-origin: left center; transition: transform 1.25s cubic-bezier(.25, .7, .3, 1); transition-delay: calc(var(--i) * 45ms); }
.vz-speed.vz-run:not(.s2) .vz-bar { transform: scaleX(0); transition: none; }
.vz-speed .vz-st0, .vz-speed .vz-st1 { opacity: 0; }
.vz-speed.vz-run:not(.s2) .vz-st0 { opacity: 1; }
.vz-speed.vz-run.s2:not(.s3) .vz-st1 { opacity: 1; }
.vz-speed.vz-run:not(.s3) .vz-st2 { opacity: 0; }
.vz-speed.vz-run:not(.s4) .vz-foot { opacity: 0; }

/* ---- security (lock + orbits) ---- */
.vz-security .vz-orbit { fill: none; stroke: var(--vz-orange); stroke-opacity: .55; }
.vz-security .vz-orbit-d { fill: none; stroke: var(--vz-muted); stroke-opacity: .45; stroke-dasharray: 4 6; }
.vz-security .vz-dp { fill: var(--vz-pink); } .vz-security .vz-dr { fill: #ff5a6a; } .vz-security .vz-do { fill: var(--vz-orange); }
.vz-security .vz-lock { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.vz-security .vz-spin { transform-box: view-box; transform-origin: 300px 243px; }
.vz-security.vz-run .vz-spin1 { animation: vz-spin 14s linear infinite; }
.vz-security.vz-run .vz-spin2 { animation: vz-spin 9s linear infinite reverse; }
.vz-security .vz-bdr { stroke: var(--vz-green); }
.vz-security.vz-run .vz-badge .vz-bdr { stroke: var(--vz-line2); }
.vz-security.vz-run .vz-badge .vz-bd-ok { opacity: 0; }
.vz-security.vz-run .vz-badge text { fill: var(--vz-muted); }
.vz-security.vz-run.s1:not(.s2) .vz-bd1 .vz-bdr,
.vz-security.vz-run.s2:not(.s3) .vz-bd2 .vz-bdr,
.vz-security.vz-run.s3 .vz-bd3 .vz-bdr { stroke: var(--vz-green); }
.vz-security.vz-run.s1:not(.s2) .vz-bd1 .vz-bd-ok,
.vz-security.vz-run.s2:not(.s3) .vz-bd2 .vz-bd-ok,
.vz-security.vz-run.s3 .vz-bd3 .vz-bd-ok { opacity: 1; }
.vz-security.vz-run.s1:not(.s2) .vz-bd1 text,
.vz-security.vz-run.s2:not(.s3) .vz-bd2 text,
.vz-security.vz-run.s3 .vz-bd3 text { fill: var(--vz-text); }

/* ---- trusted seal ---- */
.vz-trusted .vz-seal-in { fill: #0b0b0e; }
.vz-trusted .vz-seal-ring { fill: none; stroke: var(--vz-pink); stroke-opacity: .7; }
.vz-trusted .vz-seal-t { fill: #fff; }
.vz-trusted .vz-seal { transform-box: view-box; transform-origin: 284px 160px; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.vz-trusted.vz-run:not(.s1) .vz-seal { transform: scale(1.55); opacity: .4; transition: none; }
.vz-trusted .vz-fact { transition: opacity .4s, transform .4s; transform-box: fill-box; }
.vz-trusted.vz-run:not(.s2) .vz-fact:nth-of-type(1),
.vz-trusted.vz-run:not(.s3) .vz-fact:nth-of-type(2),
.vz-trusted.vz-run:not(.s4) .vz-fact:nth-of-type(3),
.vz-trusted.vz-run:not(.s5) .vz-fact:nth-of-type(4) { opacity: 0; transform: translateY(6px); }
html[data-theme="light"] .vz-trusted .vz-seal-in { fill: #15151b; }

/* ---- copy trading hero ---- */
.vz-copy .vz-w { stroke-width: 1.6; }
.vz-copy .vz-w1, .vz-copy .vz-w2 { stroke: var(--vz-green); }
.vz-copy .vz-w3 { stroke: #ff5a6a; }
.vz-copy .vz-wm { stroke: var(--vz-pink); }
.vz-copy .vz-node { opacity: 0; }
.vz-copy .vz-acc1 .vz-acc-card, .vz-copy .vz-acc2 .vz-acc-card { stroke: var(--vz-green); stroke-opacity: .7; }
.vz-copy .vz-acc3 .vz-acc-card { stroke: #ff5a6a; stroke-opacity: .7; }
.vz-copy.vz-run:not(.s1) .vz-master .vz-x-after,
.vz-copy.vz-run:not(.s4) .vz-acc .vz-x-after { opacity: 0; }
.vz-copy.vz-run:not(.s1) .vz-master .vz-x-before,
.vz-copy.vz-run:not(.s4) .vz-acc .vz-x-before { opacity: 1; }
.vz-copy.vz-run:not(.s1) .vz-master { stroke: var(--vz-line2); }
.vz-copy.vz-run:not(.s2) .vz-wm { stroke: var(--vz-wire); }
.vz-copy.vz-run:not(.s4) .vz-w1, .vz-copy.vz-run:not(.s4) .vz-w2, .vz-copy.vz-run:not(.s4) .vz-w3 { stroke: var(--vz-wire); }
.vz-copy.vz-run.s3:not(.s4) .vz-w1, .vz-copy.vz-run.s3:not(.s4) .vz-w2, .vz-copy.vz-run.s3:not(.s4) .vz-w3 { stroke: var(--vz-pink); }
.vz-copy.vz-run.s3:not(.s4) .vz-node { opacity: 1; }
.vz-copy.vz-run:not(.s4) .vz-acc-card { stroke: var(--vz-line); stroke-opacity: 1; }
.vz-copy.vz-run.s2 .vz-hub-glow { animation: vz-breathe 1s ease-in-out infinite; }

/* ---- signal heroes (TradingView / Chartink / AmiBroker / MetaTrader) ---- */
.vz-sigh .vz-inner { fill: #0a0a0d; stroke: var(--vz-line2); }
html[data-theme="light"] .vz-sigh .vz-inner { fill: #f7f6f9; }
.vz-sigh .vz-alert-l { stroke: #f59e2a; stroke-dasharray: 4 4; stroke-opacity: .8; }
.vz-sigh .vz-mtl { stroke: var(--vz-muted); }
.vz-sigh .vz-cu line, .vz-sigh .vz-cu rect { stroke: #26a69a; fill: #26a69a; }
.vz-sigh .vz-cd line, .vz-sigh .vz-cd rect { stroke: #ef5350; fill: #ef5350; }
.vz-sigh .vz-mu line, .vz-sigh .vz-mu rect { stroke: #22c55e; fill: none; stroke-width: 1.4; }
.vz-sigh .vz-md line, .vz-sigh .vz-md rect { stroke: #e5e7eb; fill: #e5e7eb; }
html[data-theme="light"] .vz-sigh .vz-md line, html[data-theme="light"] .vz-sigh .vz-md rect { stroke: #6b7280; fill: #6b7280; }
.vz-sigh .vz-cross { fill: var(--vz-pink); stroke: #fff; stroke-width: 1.5; }
.vz-sigh .vz-dark { fill: #111; }
.vz-sigh .vz-hit { fill: rgba(45, 212, 160, .14); stroke: rgba(45, 212, 160, .55); }
.vz-sigh .vz-ema9, .vz-sigh .vz-ema9l { fill: #7dd3c8; }
.vz-sigh .vz-ema9l, .vz-sigh .vz-ema21 { fill: none; stroke-width: 1.6; }
.vz-sigh .vz-ema9l { stroke: #7dd3c8; } .vz-sigh .vz-ema21 { stroke: var(--vz-orange); }
.vz .vz-tg-fill { fill: var(--vz-green); } .vz .vz-tm-fill { fill: var(--vz-muted); } .vz .vz-to-fill { fill: var(--vz-orange); }
.vz-sigh .vz-srcc { stroke: var(--vz-pink); stroke-width: 1.4; }
.vz-sigh .vz-whr { stroke: var(--vz-pink); fill: rgba(255, 45, 135, .1); }
.vz-sigh .vz-whi circle { fill: none; stroke: var(--vz-pink); stroke-width: 1.4; }
.vz-sigh .vz-wtop { stroke: var(--vz-orange); stroke-width: 1.8; }
.vz-sigh .vz-wl { stroke: var(--vz-green); stroke-width: 1.8; }
.vz-sigh .vz-wr { stroke: var(--vz-wire); }
.vz-sigh .vz-node { opacity: 0; }
.vz-sigh .vz-proc { fill: none; stroke: var(--vz-orange); stroke-width: 3; stroke-dasharray: 60 200; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vz-sigh .vz-orng { stroke: rgba(255, 160, 48, .5); }
.vz-sigh .vz-or { fill: var(--vz-chip); stroke: var(--vz-line2); }
.vz-sigh .vz-rowc { fill: none; stroke: var(--vz-line2); stroke-width: 1.4; }
/* finished state = phase A: sent to the demat account */
.vz-sigh .vz-hs0, .vz-sigh .vz-hs1, .vz-sigh .vz-hs3, .vz-sigh .vz-ab0, .vz-sigh .vz-ab2,
.vz-sigh .vz-bb1, .vz-sigh .vz-bb2, .vz-sigh .vz-accA .vz-nconn, .vz-sigh .vz-accB .vz-conn, .vz-sigh .vz-rowok { opacity: 0; }
.vz-sigh .vz-accA .vz-accc { stroke: var(--vz-green); stroke-opacity: .8; }
.vz-sigh .vz-accB { opacity: .42; }
.vz-sigh .vz-accB .vz-val { fill: var(--vz-muted); }
/* running: build-up */
.vz-sigh.vz-run .vz-late { opacity: 0; }
.vz-sigh.vz-run.s1 .vz-late { opacity: 1; transition: opacity .25s calc(var(--n) * 120ms); }
.vz-sigh.vz-run:not(.s1) .vz-cross, .vz-sigh.vz-run:not(.s1) .vz-hit, .vz-sigh.vz-run:not(.s1) .vz-hit-ok { opacity: 0; }
.vz-sigh.vz-run:not(.s2) .vz-src .vz-x-after { opacity: 0; }
.vz-sigh.vz-run:not(.s2) .vz-src .vz-x-before { opacity: 1; }
.vz-sigh.vz-run:not(.s2) .vz-srcc { stroke: var(--vz-line2); stroke-width: 1; }
.vz-sigh.vz-run:not(.s3) .vz-whr { stroke: var(--vz-line2); fill: var(--vz-chip); }
.vz-sigh.vz-run:not(.s3) .vz-whi circle { stroke: var(--vz-muted); }
.vz-sigh.vz-run:not(.s3) .vz-wtop { stroke: var(--vz-wire); stroke-width: 1.4; }
.vz-sigh.vz-run.s4:not(.s5) .vz-proc { opacity: 1; animation: vz-spin 1s linear infinite; }
.vz-sigh.vz-run.s4:not(.s5) .vz-hub-glow { animation: vz-breathe .8s ease-in-out infinite; }
.vz-sigh.vz-run:not(.s4) .vz-hs0 { opacity: 1; }
.vz-sigh.vz-run.s4:not(.s5) .vz-hs1 { opacity: 1; }
.vz-sigh.vz-run:not(.s5) .vz-hs2 { opacity: 0; }
.vz-sigh.vz-run:not(.s5) .vz-wl { stroke: var(--vz-wire); stroke-width: 1.4; }
.vz-sigh.vz-run:not(.s5) .vz-accA .vz-accc { stroke: var(--vz-line); }
.vz-sigh.vz-run:not(.s5) .vz-ab1 { opacity: 0; }
.vz-sigh.vz-run:not(.s5) .vz-ab0 { opacity: 1; }
/* phase B: the group is the target */
.vz-sigh.vz-pb .vz-accA { opacity: .42; }
.vz-sigh.vz-pb .vz-accA .vz-val { fill: var(--vz-muted); }
.vz-sigh.vz-pb .vz-accA .vz-conn { opacity: 0; } .vz-sigh.vz-pb .vz-accA .vz-nconn { opacity: 1; }
.vz-sigh.vz-pb .vz-accA .vz-ab0, .vz-sigh.vz-pb .vz-accA .vz-ab1 { opacity: 0; } .vz-sigh.vz-pb .vz-accA .vz-ab2 { opacity: 1; }
.vz-sigh.vz-pb .vz-accA .vz-accc { stroke: var(--vz-line); }
.vz-sigh.vz-pb .vz-wl { stroke: var(--vz-wire); stroke-width: 1.4; }
.vz-sigh.vz-pb .vz-accB { opacity: 1; }
.vz-sigh.vz-pb .vz-accB .vz-val { fill: var(--vz-text); }
.vz-sigh.vz-pb .vz-accB .vz-conn { opacity: 1; } .vz-sigh.vz-pb .vz-accB .vz-nconn, .vz-sigh.vz-pb .vz-bb0 { opacity: 0; }
.vz-sigh.vz-pb:not(.s5) .vz-bb1 { opacity: 1; }
.vz-sigh.vz-pb.s5 .vz-bb2, .vz-sigh.vz-pb.s5 .vz-rowok { opacity: 1; }
.vz-sigh.vz-pb.s5 .vz-accB .vz-accc { stroke: var(--vz-green); stroke-opacity: .8; }
.vz-sigh.vz-pb.s5 .vz-hs2 { opacity: 0; } .vz-sigh.vz-pb.s5 .vz-hs3 { opacity: 1; }
.vz-sigh.vz-pb.s5 .vz-wr { stroke: var(--vz-pink); stroke-width: 1.8; }
.vz-sigh.vz-pb.s4 .vz-nr { opacity: 1; }

/* ---- home product cards (960×540) ---- */
.vz-card .vz-card-bg { fill: #18181b; }
html[data-theme="light"] .vz-card .vz-card-bg { fill: #f3f2f5; }
.vz-card .vz-cs { fill: #222225; stroke: #3a3a40; stroke-width: 1.5; transition: stroke .35s; }
html[data-theme="light"] .vz-card .vz-cs { fill: #fff; stroke: #dcd8e0; }
.vz-card .vz-chub { fill: #111114; stroke: #34343a; stroke-width: 1.5; }
.vz-card .vz-chub-ring { fill: none; stroke: var(--vz-pink); stroke-width: 2.5; opacity: 0; }
.vz-card .vz-w { stroke: #4a4a52; stroke-width: 2.5; }
.vz-card .vz-cdr { fill: #1d2321; stroke: rgba(45, 212, 160, .45); stroke-width: 1.5; }
html[data-theme="light"] .vz-card .vz-cdr { fill: #f1faf6; }
.vz-card .vz-btn { fill: #26262a; stroke: #45454c; stroke-width: 1.5; }
html[data-theme="light"] .vz-card .vz-btn { fill: #f4f2f6; stroke: #dcd8e0; }
.vz-card .vz-btn-on { opacity: 0; }
.vz-card .vz-bsq .vz-btn-on { opacity: 1; }
.vz-card .vz-sep { stroke: #34343a; }
.vz-card .vz-mo { opacity: 0; }
.vz-card .vz-dash { stroke-width: 2.5; stroke-dasharray: 10 8; }
.vz-card .vz-dg { stroke: var(--vz-green); }
.vz-card .vz-dp { stroke: #ff4d6d; }
.vz-card .vz-pl { fill: none; stroke: #c24d6a; stroke-width: 4; stroke-linejoin: round; stroke-opacity: .75; }
.vz-card .vz-entry { fill: var(--vz-green); }
.vz-card .vz-cu line, .vz-card .vz-cd2 line { stroke-width: 2; }
.vz-card .vz-cu line, .vz-card .vz-cu rect { stroke: #2dd4a0; fill: #2dd4a0; }
.vz-card .vz-cd2 line, .vz-card .vz-cd2 rect { stroke: #ff5a76; fill: #ff5a76; }
/* running */
.vz-card.vz-run.s1:not(.s3) .vz-cs-src { stroke: var(--vz-pink); }
.vz-card.vz-run:not(.s1) .vz-pill1, .vz-card.vz-run:not(.s1) .vz-hitrow { opacity: 0; }
.vz-card.vz-run.s1 .vz-hitrow { transition: opacity .3s calc(var(--i) * 160ms); }
.vz-card.vz-run.s2:not(.s4) .vz-chub-ring { opacity: 1; }
.vz-card.vz-run.s3:not(.s4) .vz-w { stroke: var(--vz-pink); }
.vz-card.vz-run:not(.s3) .vz-cdr { stroke: #3a3a40; fill: #222225; }
.vz-card.vz-run:not(.s3) .vz-cd-ok, .vz-card.vz-run:not(.s3) .vz-atm { opacity: 0; }
.vz-card.vz-run.s3 .vz-cd-ok, .vz-card.vz-run.s3 .vz-cdr { transition: opacity .3s calc(var(--i) * 220ms), stroke .3s calc(var(--i) * 220ms), fill .3s calc(var(--i) * 220ms); }
/* multi-account: Buy All → BUY · Open, then Square Off All → Closed */
.vz-card-multiple-account-management.vz-run.s1:not(.s2) .vz-bbuy .vz-btn-on { opacity: 1; }
.vz-card-multiple-account-management.vz-run:not(.s2) .vz-bsq .vz-btn-on { opacity: 0; }
.vz-card-multiple-account-management.vz-run.s1:not(.s2) .vz-mo { opacity: 1; transition: opacity .3s calc(var(--i) * 120ms); }
.vz-card-multiple-account-management.vz-run:not(.s2) .vz-mc { opacity: 0; }
.vz-card-multiple-account-management.vz-run.s2 .vz-mc { transition: opacity .3s calc(var(--i) * 120ms); }
/* order manager: price line draws, trailing SL steps up, target hit */
.vz-card-order-manager .vz-tsl { transition: transform 1.4s ease; }
.vz-card-order-manager.vz-run:not(.s2) .vz-tsl { transform: translateY(95px); transition: none; }
.vz-card-order-manager .vz-pl { stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s ease; }
.vz-card-order-manager.vz-run:not(.s1) .vz-pl { stroke-dashoffset: 100; transition: none; }
.vz-card-order-manager.vz-run:not(.s1) .vz-entry, .vz-card-order-manager.vz-run:not(.s3) .vz-hit { opacity: 0; }

/* ---- shared: checkboxes, ok-chips, rows ---- */
.vz .vz-cb0 { fill: none; stroke: var(--vz-muted); stroke-width: 1.4; }
.vz .vz-cb1 { fill: var(--vz-pink); }
.vz .vz-cbk { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz .vz-rowbg { fill: var(--vz-chip); }
.vz .vz-sep { stroke: var(--vz-line2); }
.vz .vz-rowc { fill: none; stroke: var(--vz-line2); stroke-width: 1.4; }
.vz .vz-res-blue { fill: rgba(59, 130, 246, .12); stroke: rgba(96, 165, 250, .6); }
.vz .vz-dark { fill: #111; }
.vz .vz-yel { fill: #ffd43b; }
.vz .vz-chipo { fill: none; stroke: var(--vz-green); stroke-opacity: .75; }

/* ---- multiple account management ---- */
.vz-mam .vz-v0, .vz-mam .vz-v2, .vz-mam .vz-sel0 { opacity: 0; }
.vz-mam .vz-ord { stroke: var(--vz-pink); stroke-opacity: .7; }
.vz-mam .vz-sqr { fill: none; stroke: var(--vz-pink); stroke-opacity: .7; }
.vz-mam.vz-run:not(.s1) .vz-cb1, .vz-mam.vz-run:not(.s1) .vz-cbk { opacity: 0; }
.vz-mam.vz-run:not(.s1) .vz-sel1 { opacity: 0; } .vz-mam.vz-run:not(.s1) .vz-sel0 { opacity: 1; }
.vz-mam.vz-run:not(.s1) .vz-ord { stroke: var(--vz-line2); }
.vz-mam.vz-run:not(.s2) .vz-v1 { opacity: 0; }
.vz-mam.vz-run:not(.s2) .vz-v0 { opacity: 1; }
.vz-mam.vz-run.s2 .vz-mrow .vz-v1 { transition: opacity .3s calc(var(--i) * 70ms); }
.vz-mam.vz-run.s1:not(.s2) .vz-pob { filter: brightness(1.25); }
.vz-mam.vz-run.s3 .vz-v1 { opacity: 0; }
.vz-mam.vz-run.s3 .vz-v2 { opacity: 1; }
.vz-mam.vz-run.s3 .vz-sqr { fill: rgba(255, 45, 135, .15); stroke-opacity: 1; }
.vz-mam.vz-run.s4 .vz-cb1, .vz-mam.vz-run.s4 .vz-cbk, .vz-mam.vz-run.s4 .vz-sel1 { opacity: 0; }
.vz-mam.vz-run.s4 .vz-sel0 { opacity: 1; }
.vz-mam.vz-run.s4 .vz-v2 { opacity: 0; }
.vz-mam.vz-run.s4 .vz-v0 { opacity: 1; }

/* ---- options automation (finished state = premium-based) ---- */
.vz-opt .vz-otab-on { opacity: 0; }
.vz-opt .vz-ot1 .vz-otab-on { opacity: 1; }
.vz-opt .vz-oselr { fill: rgba(255, 45, 135, .16); stroke: var(--vz-pink); }
.vz-opt .vz-m0, .vz-opt .vz-m2 { opacity: 0; }
.vz-opt.vz-run .vz-m1 { opacity: 0; }
.vz-opt.vz-run .vz-ot1 .vz-otab-on { opacity: 0; }
.vz-opt.vz-run.s1:not(.s2) .vz-m0, .vz-opt.vz-run.s2:not(.s3) .vz-m1, .vz-opt.vz-run.s3 .vz-m2 { opacity: 1; }
.vz-opt.vz-run.s1:not(.s2) .vz-ot0 .vz-otab-on, .vz-opt.vz-run.s2:not(.s3) .vz-ot1 .vz-otab-on, .vz-opt.vz-run.s3 .vz-ot2 .vz-otab-on { opacity: 1; }

/* ---- order manager ---- */
.vz-om .vz-grid { stroke: var(--vz-line2); stroke-opacity: .55; }
.vz-om .vz-dl { stroke-width: 1.4; stroke-dasharray: 6 5; }
.vz-om .vz-dlg { stroke: var(--vz-green); } .vz-om .vz-dlo { stroke: var(--vz-orange); } .vz-om .vz-dlr { stroke: var(--vz-red); }
.vz-om .vz-tslline { stroke: var(--vz-pink); stroke-width: 1.6; }
.vz-om .vz-price { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
.vz-om .vz-entryd { fill: var(--vz-green); stroke: #fff; stroke-width: 1.5; }
.vz-om .vz-entryp { fill: #111114; }
html[data-theme="light"] .vz-om .vz-entryp { fill: #ecfdf5; }
.vz-om .vz-exitr { fill: none; stroke: var(--vz-orange); stroke-opacity: .5; }
.vz-om .vz-t1, .vz-om .vz-t2 { opacity: 0; }
.vz-om.vz-run:not(.s1) .vz-price { stroke-dashoffset: 72; }
.vz-om.vz-run.s1:not(.s2) .vz-price { stroke-dashoffset: 56; }
.vz-om.vz-run.s2:not(.s3) .vz-price { stroke-dashoffset: 30; }
.vz-om.vz-run.s3:not(.s4) .vz-price { stroke-dashoffset: 8; }
.vz-om.vz-run:not(.s1) .vz-entry, .vz-om.vz-run:not(.s4) .vz-exit { opacity: 0; }
.vz-om.vz-run .vz-t3 { opacity: 0; }
.vz-om.vz-run.s1:not(.s2) .vz-t1, .vz-om.vz-run.s2:not(.s3) .vz-t2, .vz-om.vz-run.s3 .vz-t3 { opacity: 1; }
.vz-om .vz-p0, .vz-om .vz-p1, .vz-om .vz-p2 { opacity: 0; }
.vz-om.vz-run .vz-p3 { opacity: 0; }
.vz-om.vz-run:not(.s1) .vz-p0, .vz-om.vz-run.s1:not(.s2) .vz-p1, .vz-om.vz-run.s2:not(.s3) .vz-p2, .vz-om.vz-run.s3 .vz-p3 { opacity: 1; }
.vz-om.vz-run .vz-chipok .vz-chipt { opacity: 0; }
.vz-om.vz-run .vz-chipok .vz-chipo { stroke: var(--vz-line2); }
.vz-om.vz-run .vz-chipok text { fill: var(--vz-muted); }
.vz-om.vz-run:not(.s1) .vz-ch0 .vz-chipo, .vz-om.vz-run.s1:not(.s2) .vz-ch1 .vz-chipo,
.vz-om.vz-run.s2:not(.s3) .vz-ch2 .vz-chipo, .vz-om.vz-run.s3:not(.s4) .vz-ch3 .vz-chipo { stroke: var(--vz-orange); stroke-opacity: 1; }
.vz-om.vz-run:not(.s1) .vz-ch0 text, .vz-om.vz-run.s1:not(.s2) .vz-ch1 text,
.vz-om.vz-run.s2:not(.s3) .vz-ch2 text, .vz-om.vz-run.s3:not(.s4) .vz-ch3 text { fill: var(--vz-text); }
.vz-om.vz-run.s1 .vz-ch0 .vz-chipt, .vz-om.vz-run.s2 .vz-ch1 .vz-chipt, .vz-om.vz-run.s3 .vz-ch2 .vz-chipt, .vz-om.vz-run.s4 .vz-ch3 .vz-chipt { opacity: 1; }
.vz-om.vz-run.s1 .vz-ch0 .vz-chipo, .vz-om.vz-run.s2 .vz-ch1 .vz-chipo, .vz-om.vz-run.s3 .vz-ch2 .vz-chipo, .vz-om.vz-run.s4 .vz-ch3 .vz-chipo { stroke: var(--vz-green); }
.vz-om.vz-run.s1 .vz-ch0 text, .vz-om.vz-run.s2 .vz-ch1 text, .vz-om.vz-run.s3 .vz-ch2 text, .vz-om.vz-run.s4 .vz-ch3 text { fill: var(--vz-text); }

/* ---- python & api ---- */
.vz-py .vz-pyw { stroke: var(--vz-wire); }
.vz-py .vz-dw { stroke: var(--vz-orange); stroke-dasharray: 2 4; stroke-width: 1.4; }
.vz-py .vz-pyglow { fill: var(--vz-pink); opacity: .14; }
.vz-py .vz-post { opacity: 0; }
.vz-py .vz-pydr { stroke: var(--vz-line2); }
.vz-py.vz-run .vz-code { opacity: 0; }
.vz-py.vz-run.s1 .vz-code { opacity: 1; transition: opacity .25s calc(var(--i) * 300ms); }
.vz-py.vz-run.s2:not(.s3) .vz-post { opacity: 1; }
.vz-py.vz-run.s2:not(.s3) .vz-pyw { stroke: var(--vz-pink); }
.vz-py.vz-run.s2:not(.s4) .vz-pyglow { animation: vz-breathe .8s ease-in-out infinite; }
.vz-py.vz-run:not(.s3) .vz-dw { stroke: var(--vz-wire); stroke-dasharray: none; }
.vz-py.vz-run:not(.s3) .vz-pyok { opacity: 0; }
.vz-py.vz-run.s3 .vz-pyok { transition: opacity .3s calc(var(--i) * 180ms); }
.vz-py.vz-run.s3:not(.s4) .vz-pydr { stroke: var(--vz-pink); transition: stroke .3s calc(var(--i) * 180ms); }

/* ---- bridge ---- */
.vz-bridge .vz-bw, .vz-bridge .vz-bwr { stroke: #3f3f46; stroke-width: 1.6; }
.vz-bridge .vz-bhub { fill: #111114; stroke: #2e2e34; }
.vz-bridge .vz-bring { fill: none; stroke: var(--vz-pink); stroke-width: 2; opacity: 0; }
.vz-bridge .vz-bdr2 { stroke: rgba(45, 212, 160, .55); }
.vz-bridge .vz-bs2 .vz-bsr { stroke: var(--vz-pink); }
.vz-bridge .vz-bw2 { stroke: var(--vz-pink); }
.vz-bridge.vz-run .vz-bs2 .vz-bsr { stroke: var(--vz-line2); }
.vz-bridge.vz-run .vz-bw2 { stroke: #3f3f46; }
.vz-bridge.vz-run.s1:not(.s2) .vz-bs0 .vz-bsr, .vz-bridge.vz-run.s2:not(.s3) .vz-bs1 .vz-bsr, .vz-bridge.vz-run.s3:not(.s4) .vz-bs2 .vz-bsr,
.vz-bridge.vz-run.s4:not(.s5) .vz-bs3 .vz-bsr, .vz-bridge.vz-run.s5 .vz-bs4 .vz-bsr { stroke: var(--vz-pink); }
.vz-bridge.vz-run.s1:not(.s2) .vz-bw0, .vz-bridge.vz-run.s2:not(.s3) .vz-bw1, .vz-bridge.vz-run.s3:not(.s4) .vz-bw2,
.vz-bridge.vz-run.s4:not(.s5) .vz-bw3, .vz-bridge.vz-run.s5 .vz-bw4 { stroke: var(--vz-pink); }
.vz-bridge.vz-run .vz-bring { animation: vz-ringpulse 2.3s ease-out infinite; }
@keyframes vz-ringpulse { 0%, 30% { opacity: 0; } 40% { opacity: 1; } 70%, 100% { opacity: 0; } }
.vz-bridge.vz-run .vz-bdok { animation: vz-okpulse 2.3s ease infinite; animation-delay: calc(var(--i) * 80ms); }
@keyframes vz-okpulse { 0%, 45% { opacity: 0; } 55%, 100% { opacity: 1; } }
.vz-bridge.vz-run .vz-bdr2 { animation: vz-bdpulse 2.3s ease infinite; animation-delay: calc(var(--i) * 80ms); }
@keyframes vz-bdpulse { 0%, 45% { stroke: var(--vz-line2); } 55%, 100% { stroke: rgba(45, 212, 160, .55); } }

/* ---- brokers orbit ---- */
.vz-orbit .vz-oring { fill: none; stroke: var(--vz-line2); stroke-width: 1.4; }
.vz-orbit .vz-obadge { fill: #fff; stroke: var(--vz-line2); }
.vz-orbit .vz-ohub-glow { fill: var(--vz-pink); opacity: .15; }
.vz-orbit .vz-orb { transform-box: view-box; transform-origin: 360px 360px; }
.vz-orbit .vz-ologo { transform-box: view-box; }
.vz-orbit.vz-run .vz-orb.cw, .vz-orbit.vz-run .vz-orb.ccw .vz-ologo { animation: vz-spin var(--t) linear infinite; }
.vz-orbit.vz-run .vz-orb.ccw, .vz-orbit.vz-run .vz-orb.cw .vz-ologo { animation: vz-spin var(--t) linear infinite reverse; }

/* ---- static IP ---- */
.vz-sip .vz-ipl { stroke: var(--vz-line2); }
.vz-sip .vz-ip4 { fill: #141418; stroke: var(--vz-orange); stroke-opacity: .85; }
.vz-sip .vz-ip6 { fill: #141418; stroke: #93a5c8; stroke-opacity: .85; }
html[data-theme="light"] .vz-sip .vz-ip4, html[data-theme="light"] .vz-sip .vz-ip6 { fill: #fff; }
.vz-sip .vz-ipdot { fill: var(--vz-pink); opacity: 0; }
.vz-sip .vz-ipc { opacity: 0; }
.vz-sip .vz-clock { fill: none; stroke: var(--vz-text); stroke-width: 1.5; }
.vz-sip .vz-hand { stroke: var(--vz-text); stroke-width: 1.6; stroke-linecap: round; }
.vz-sip .vz-hand-m { stroke: var(--vz-orange); transform-box: view-box; transform-origin: 538px 385px; }
.vz-sip.vz-run .vz-hand-m { animation: vz-spin 4s linear infinite; }
.vz-sip.vz-run .vz-ipok { opacity: 0; }
.vz-sip.vz-run .vz-ipc { opacity: 1; }
.vz-sip.vz-run.s1 .vz-ip0 .vz-ipok, .vz-sip.vz-run.s2 .vz-ip1 .vz-ipok, .vz-sip.vz-run.s3 .vz-ip2 .vz-ipok, .vz-sip.vz-run.s4 .vz-ip3 .vz-ipok { opacity: 1; }
.vz-sip.vz-run.s1 .vz-ip0 .vz-ipc, .vz-sip.vz-run.s2 .vz-ip1 .vz-ipc, .vz-sip.vz-run.s3 .vz-ip2 .vz-ipc, .vz-sip.vz-run.s4 .vz-ip3 .vz-ipc { opacity: 0; }
.vz-sip.vz-run .vz-ipr .vz-ipdot { animation: vz-ipdot .5s linear; }
.vz-sip.vz-run:not(.s1) .vz-ip0 .vz-ipdot, .vz-sip.vz-run.s1:not(.s2) .vz-ip1 .vz-ipdot,
.vz-sip.vz-run.s2:not(.s3) .vz-ip2 .vz-ipdot, .vz-sip.vz-run.s3:not(.s4) .vz-ip3 .vz-ipdot { opacity: 1; animation: vz-ipmove .5s linear infinite; }
@keyframes vz-ipmove { from { transform: translateX(0); } to { transform: translateX(170px); } }
.vz-sip.vz-run .vz-chipok .vz-chipt { opacity: 0; }
.vz-sip.vz-run .vz-chipok .vz-chipo { stroke: var(--vz-line2); }
.vz-sip.vz-run .vz-chipok text { fill: var(--vz-muted); }
.vz-sip.vz-run.s4:not(.s5) .vz-dl0 .vz-chipo, .vz-sip.vz-run.s5:not(.s6) .vz-dl1 .vz-chipo, .vz-sip.vz-run.s6:not(.s7) .vz-dl2 .vz-chipo { stroke: var(--vz-orange); }
.vz-sip.vz-run.s4 .vz-dl0 text, .vz-sip.vz-run.s5 .vz-dl1 text, .vz-sip.vz-run.s6 .vz-dl2 text { fill: var(--vz-text); }
.vz-sip.vz-run.s5 .vz-dl0 .vz-chipt, .vz-sip.vz-run.s6 .vz-dl1 .vz-chipt, .vz-sip.vz-run.s7 .vz-dl2 .vz-chipt { opacity: 1; }
.vz-sip.vz-run.s5 .vz-dl0 .vz-chipo, .vz-sip.vz-run.s6 .vz-dl1 .vz-chipo, .vz-sip.vz-run.s7 .vz-dl2 .vz-chipo { stroke: var(--vz-green); }

/* ---- connect CTA ---- */
.vz-conn .vz-cglow1 { fill: var(--vz-pink); opacity: .12; }
.vz-conn .vz-cglow2 { fill: var(--vz-pink); opacity: .2; }
.vz-conn .vz-cable { fill: none; stroke-width: 4; stroke-linecap: round; }
.vz-conn .vz-prong { fill: #e5e7eb; }
.vz-conn .vz-socket { fill: #0b0b0e; stroke: var(--vz-line2); }
.vz-conn .vz-ccard { fill: var(--vz-card); stroke: var(--vz-green); stroke-opacity: .7; }
.vz-conn .vz-cb, .vz-conn .vz-cn1, .vz-conn .vz-cn2, .vz-conn .vz-cn3, .vz-conn .vz-cn4 { opacity: 0; }
.vz-conn .vz-cb4 { opacity: 1; }
.vz-conn.vz-run .vz-cb4, .vz-conn.vz-run .vz-cn5 { opacity: 0; }
.vz-conn.vz-run.s1:not(.s2) .vz-cb0, .vz-conn.vz-run.s2:not(.s3) .vz-cb1, .vz-conn.vz-run.s3:not(.s4) .vz-cb2,
.vz-conn.vz-run.s4:not(.s5) .vz-cb3, .vz-conn.vz-run.s5 .vz-cb4 { opacity: 1; }
.vz-conn.vz-run.s1:not(.s2) .vz-cn1, .vz-conn.vz-run.s2:not(.s3) .vz-cn2, .vz-conn.vz-run.s3:not(.s4) .vz-cn3,
.vz-conn.vz-run.s4:not(.s5) .vz-cn4, .vz-conn.vz-run.s5 .vz-cn5 { opacity: 1; }
.vz-conn.vz-run .vz-cmini { opacity: .35; }
.vz-conn.vz-run .vz-cmok { opacity: 0; }
.vz-conn.vz-run.s1 .vz-cm0, .vz-conn.vz-run.s2 .vz-cm1, .vz-conn.vz-run.s3 .vz-cm2, .vz-conn.vz-run.s4 .vz-cm3, .vz-conn.vz-run.s5 .vz-cm4 { opacity: 1; }
.vz-conn.vz-run.s1 .vz-cm0 .vz-cmok, .vz-conn.vz-run.s2 .vz-cm1 .vz-cmok, .vz-conn.vz-run.s3 .vz-cm2 .vz-cmok, .vz-conn.vz-run.s4 .vz-cm3 .vz-cmok, .vz-conn.vz-run.s5 .vz-cm4 .vz-cmok { opacity: 1; }
.vz-conn.vz-run .vz-plug { animation: vz-plug 1.7s ease infinite; }
@keyframes vz-plug { 0%, 12% { transform: translate(-28px, 14px); } 30%, 100% { transform: translate(0, 0); } }
.vz-conn.vz-run .vz-cable { animation: vz-cable 1.7s ease infinite; }
@keyframes vz-cable { 0%, 25% { stroke-opacity: .25; } 35%, 100% { stroke-opacity: 1; } }

/* ---- get started ---- */
.vz-star { fill: #fff; opacity: .5; }
.vz-run .vz-star { animation: vz-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes vz-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }
html[data-theme="light"] .vz-star { fill: #8b8b99; }
.vz-gs .vz-trail { fill: none; stroke: var(--vz-muted); stroke-opacity: .5; stroke-dasharray: 4 6; }
.vz-gs .vz-gsbar0 { fill: #2a2a30; }
.vz-gs .vz-gsbase { fill: var(--vz-pink); fill-opacity: .28; }
.vz-gs .vz-gschip { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-gs .vz-gsic { fill: #fff; stroke: #fff; stroke-width: 1.4; }
.vz-gs .vz-gsic path[d*=" v"] { fill: none; }
.vz-gs .vz-rring { fill: none; stroke: var(--vz-orange); stroke-opacity: .55; }
.vz-gs .vz-rring2 { stroke-opacity: .25; }
.vz-gs .vz-flame { fill: #ffa030; }
.vz-gs .vz-rocket { transition: transform .9s cubic-bezier(.3, .7, .3, 1); }
.vz-gs.vz-run .vz-gsbar, .vz-gs.vz-run .vz-gsok { opacity: 0; }
.vz-gs.vz-run .vz-gsbase { fill-opacity: .08; }
.vz-gs.vz-run .vz-gschip { fill: transparent; stroke: var(--vz-line2); }
.vz-gs.vz-run.s1 .vz-gs0 .vz-gsbar, .vz-gs.vz-run.s2 .vz-gs1 .vz-gsbar, .vz-gs.vz-run.s3 .vz-gs2 .vz-gsbar,
.vz-gs.vz-run.s1 .vz-gs0 .vz-gsok, .vz-gs.vz-run.s2 .vz-gs1 .vz-gsok, .vz-gs.vz-run.s3 .vz-gs2 .vz-gsok { opacity: 1; }
.vz-gs.vz-run.s1 .vz-gs0 .vz-gsbase, .vz-gs.vz-run.s2 .vz-gs1 .vz-gsbase, .vz-gs.vz-run.s3 .vz-gs2 .vz-gsbase { fill-opacity: .28; }
.vz-gs.vz-run.s1 .vz-gs0 .vz-gschip, .vz-gs.vz-run.s2 .vz-gs1 .vz-gschip, .vz-gs.vz-run.s3 .vz-gs2 .vz-gschip { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-gs.vz-run:not(.s1) .vz-rocket { transform: translate(-400px, 200px); transition: none; }
.vz-gs.vz-run.s1:not(.s2) .vz-rocket { transform: translate(-300px, 120px); }
.vz-gs.vz-run.s2:not(.s3) .vz-rocket { transform: translate(-110px, 40px); }
.vz-gs.vz-run:not(.s3) .vz-rring { opacity: 0; }
.vz-gs.vz-run:not(.s4) .vz-ready { opacity: 0; }

/* ---- about map ---- */
.vz-amap .vz-dn { fill: var(--vz-pink); opacity: .4; }
.vz-amap .vz-df { fill: var(--vz-muted); opacity: .22; }
.vz-amap .vz-arc { fill: none; stroke: var(--vz-orange); stroke-width: 1.4; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease calc(var(--i) * 120ms); }
.vz-amap .vz-cdot { fill: var(--vz-orange); stroke: #fff; stroke-width: 1; }
.vz-amap .vz-hqr { fill: none; stroke: var(--vz-pink); stroke-opacity: .5; }
.vz-amap .vz-hqr2 { fill: var(--vz-pink); opacity: .25; }
.vz-amap .vz-hqpill { fill: #1a0d14; stroke: var(--vz-pink); }
html[data-theme="light"] .vz-amap .vz-hqpill { fill: #fff0f6; }
.vz-amap .vz-acr { fill: var(--vz-card); stroke: var(--vz-pink); stroke-opacity: .75; }
.vz-amap.vz-run:not(.s1) .vz-arc { stroke-dashoffset: 100; transition: none; }
.vz-amap.vz-run:not(.s1) .vz-city { opacity: 0; }
.vz-amap.vz-run.s1 .vz-city { transition: opacity .3s calc(var(--i) * 120ms + .5s); }
.vz-amap.vz-run:not(.s2) .vz-acr { stroke: var(--vz-line2); }
.vz-amap.vz-run.s2 .vz-acr { transition: stroke .3s calc(var(--i) * 150ms); }

/* ---- about vision ---- */
.vz-vision .vz-vbg { fill: #121216; stroke: var(--vz-line2); }
html[data-theme="light"] .vz-vision .vz-vbg { fill: #1a1a20; }
.vz-vision .vz-vl { stroke: var(--vz-pink); stroke-width: 2.5; }
.vz-vision .vz-vglow { fill: var(--vz-pink); opacity: .2; }
.vz-vision .vz-voff { fill: #1c1c22; stroke: #55555f; stroke-width: 1.5; }
.vz-vision .vz-vpr { fill: #19121a; stroke: var(--vz-pink); stroke-opacity: .6; }
.vz-vision .vz-vchip { fill: #2a1220; stroke: var(--vz-pink); stroke-opacity: .7; }
.vz-vision .vz-vline { stroke: var(--vz-pink); stroke-opacity: .5; }
.vz-vision .vz-vnp { fill: #ff2d87; } .vz-vision .vz-vno { fill: #ff7a45; }
.vz-vision .vz-vcore { fill: #3a2a2e; }
.vz-vision .vz-vgrid { stroke: #ffffff; stroke-opacity: .07; }
.vz-vision .vz-varea { fill: #ff2d87; fill-opacity: .2; }
.vz-vision .vz-vcurve { fill: none; stroke: #ff6a4d; stroke-width: 2.5; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
.vz-vision .vz-varea2 { fill: #ff7a45; fill-opacity: .22; }
.vz-vision .vz-vcurve2 { fill: none; stroke: #ff6a4d; stroke-width: 2.5; }
.vz-vision .vz-vwhite { fill: #fff; stroke: var(--vz-pink); stroke-width: 2; }
.vz-vision .vz-tw { fill: #fff; } .vz-vision .vz-tm { fill: #a3a3b2; }
.vz-vision.vz-run .vz-von, .vz-vision.vz-run .vz-vglow { opacity: 0; }
.vz-vision.vz-run .vz-vl { stroke: #44444c; }
.vz-vision.vz-run .vz-vpr { stroke: #44444c; }
.vz-vision.vz-run .vz-vp0c, .vz-vision.vz-run .vz-vp1c, .vz-vision.vz-run .vz-vp2c { opacity: .15; }
.vz-vision.vz-run.s1 .vz-vn0 .vz-von, .vz-vision.vz-run.s2 .vz-vn1 .vz-von, .vz-vision.vz-run.s4 .vz-vn2 .vz-von { opacity: 1; }
.vz-vision.vz-run.s1 .vz-vn0 .vz-vglow, .vz-vision.vz-run.s2 .vz-vn1 .vz-vglow, .vz-vision.vz-run.s4 .vz-vn2 .vz-vglow { opacity: .2; }
.vz-vision.vz-run.s2 .vz-vl1, .vz-vision.vz-run.s4 .vz-vl2 { stroke: var(--vz-pink); }
.vz-vision.vz-run.s1 .vz-vp0 .vz-vpr, .vz-vision.vz-run.s2 .vz-vp1 .vz-vpr, .vz-vision.vz-run.s4 .vz-vp2 .vz-vpr { stroke: var(--vz-pink); }
.vz-vision.vz-run.s1 .vz-vp0c, .vz-vision.vz-run.s2 .vz-vp1c, .vz-vision.vz-run.s4 .vz-vp2c { opacity: 1; }
.vz-vision.vz-run:not(.s2) .vz-vcurve { stroke-dashoffset: 100; transition: none; }
.vz-vision.vz-run:not(.s3) .vz-vpass { opacity: 0; }
.vz-vision.vz-run:not(.s5) .vz-vlast { opacity: 0; }

/* ---- shared ---- */
.vz .vz-inner2 { fill: #0b0b0e; stroke: var(--vz-line2); }
html[data-theme="light"] .vz .vz-inner2 { fill: #f7f6f9; }
.vz .vz-grid2 { stroke: var(--vz-line2); stroke-opacity: .6; }
.vz .vz-area { fill: #ff2d87; fill-opacity: .16; }
.vz .vz-curve, .vz .vz-curve2 { fill: none; stroke: #ff5a76; stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease; }
.vz .vz-endd { fill: #fff; }
.vz .vz-phone { fill: #0b0b0e; stroke: #4a4a52; stroke-width: 2; }

/* ---- algo development ---- */
.vz-algo .vz-atab-on { opacity: 0; }
.vz-algo .vz-at2 .vz-atab-on { opacity: 1; }
.vz-algo .vz-scr0, .vz-algo .vz-scr1 { opacity: 0; }
.vz-algo .vz-acr2 { fill: transparent; stroke: var(--vz-line2); }
.vz-algo .vz-acck { fill: none; stroke: var(--vz-muted); stroke-width: 1.6; stroke-linecap: round; }
.vz-algo .vz-on2 .vz-acr2 { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-algo .vz-on2 .vz-acck { stroke: #fff; }
.vz-algo.vz-run .vz-at2 .vz-atab-on, .vz-algo.vz-run .vz-scr2 { opacity: 0; }
.vz-algo.vz-run .vz-on2 .vz-acr2 { fill: transparent; stroke: var(--vz-line2); }
.vz-algo.vz-run.s1:not(.s2) .vz-at0 .vz-atab-on, .vz-algo.vz-run.s1:not(.s2) .vz-scr0,
.vz-algo.vz-run.s2:not(.s3) .vz-at1 .vz-atab-on, .vz-algo.vz-run.s2:not(.s3) .vz-scr1,
.vz-algo.vz-run.s3 .vz-at2 .vz-atab-on, .vz-algo.vz-run.s3 .vz-scr2 { opacity: 1; }
.vz-algo.vz-run.s1:not(.s2) .vz-on0 .vz-acr2, .vz-algo.vz-run.s2:not(.s3) .vz-on1 .vz-acr2, .vz-algo.vz-run.s3 .vz-on2 .vz-acr2 { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-algo.vz-run.s1 .vz-code { opacity: 1; transition: opacity .2s calc(var(--i) * 300ms); }
.vz-algo.vz-run:not(.s1) .vz-code { opacity: 0; }
.vz-algo.vz-run:not(.s2) .vz-curve { stroke-dashoffset: 100; transition: none; }
.vz-algo.vz-run:not(.s4) .vz-notif { opacity: 0; }

/* ---- strategy automation ---- */
.vz-strat .vz-ruler { stroke: var(--vz-pink); }
.vz-strat .vz-sw1, .vz-strat .vz-sw2 { stroke: var(--vz-pink); stroke-width: 2; }
.vz-strat .vz-hr1 { fill: none; stroke: var(--vz-pink); stroke-width: 1.5; }
.vz-strat .vz-sbr { stroke: rgba(45, 212, 160, .7); }
.vz-strat .vz-sbc, .vz-strat .vz-sf0 { opacity: 0; }
.vz-strat .vz-sfoot { stroke: rgba(45, 212, 160, .6); }
.vz-strat.vz-run:not(.s1) .vz-sig { opacity: 0; }
.vz-strat.vz-run:not(.s1) .vz-ruler { stroke: var(--vz-line2); }
.vz-strat.vz-run:not(.s1) .vz-rok { opacity: 0; }
.vz-strat.vz-run.s1 .vz-rule .vz-ruler, .vz-strat.vz-run.s1 .vz-rok { transition: opacity .3s calc(var(--i) * 200ms), stroke .3s calc(var(--i) * 200ms); }
.vz-strat.vz-run:not(.s2) .vz-sw1, .vz-strat.vz-run:not(.s3) .vz-sw2 { stroke: var(--vz-wire); }
.vz-strat.vz-run:not(.s4) .vz-sbr { stroke: var(--vz-line2); }
.vz-strat.vz-run:not(.s4) .vz-sbe { opacity: 0; }
.vz-strat.vz-run:not(.s4) .vz-sbc { opacity: 1; }
.vz-strat.vz-run.s4 .vz-sbe, .vz-strat.vz-run.s4 .vz-sbr { transition: opacity .3s calc(var(--i) * 250ms), stroke .3s calc(var(--i) * 250ms); }
.vz-strat.vz-run:not(.s5) .vz-sf1 { opacity: 0; }
.vz-strat.vz-run:not(.s5) .vz-sf0 { opacity: 1; }
.vz-strat.vz-run:not(.s5) .vz-sfoot { stroke: var(--vz-line2); }
.vz-strat.vz-run.s2:not(.s4) .vz-hub-glow { animation: vz-breathe .8s ease-in-out infinite; }

/* ---- telegram (always the dark Telegram look) ---- */
.vz-tg .vz-tgbg { fill: #0e1621; stroke: #2a3a4c; stroke-width: 1.5; }
.vz-tg .vz-tghead { fill: #17212b; }
.vz-tg .vz-tgback { fill: none; stroke: #5eb5f7; stroke-width: 2; stroke-linecap: round; }
.vz-tg .vz-tgin { fill: #182533; }
.vz-tg .vz-tgout { fill: #2b5278; }
.vz-tg .vz-tgbtn { fill: #22344a; }
.vz-tg .vz-tgblue { fill: #6ab3f3; }
.vz-tg .vz-tgm { fill: #8b9bab; }
.vz-tg .vz-tw { fill: #fff; }
.vz-tg .vz-tgtick { fill: none; stroke: #6ab3f3; stroke-width: 1.4; }
.vz-tg .vz-tgdot { fill: #8b9bab; }
.vz-tg .vz-tgbar { fill: #17212b; }
.vz-tg .vz-tm3, .vz-tg .vz-ty1 { opacity: 0; }
.vz-tg.vz-run:not(.s1) .vz-tm1, .vz-tg.vz-run:not(.s2) .vz-tm2, .vz-tg.vz-run:not(.s4) .vz-tm4, .vz-tg.vz-run:not(.s5) .vz-tm5 { opacity: 0; }
.vz-tg.vz-run.s3:not(.s4) .vz-tm3, .vz-tg.vz-run.s3:not(.s4) .vz-ty1 { opacity: 1; }
.vz-tg.vz-run.s3:not(.s4) .vz-ty0 { opacity: 0; }
.vz-tg.vz-run .vz-tgdot { animation: vz-breathe 1s ease-in-out infinite; }

/* ---- excel (always the Excel look) ---- */
.vz-xl .vz-xbg { fill: #1e1e1e; stroke: #3a3a3a; }
.vz-xl .vz-xw { fill: #f3f3f3; } .vz-xl .vz-xm { fill: #a6a6a6; } .vz-xl .vz-xg { fill: #33c481; }
.vz-xl .vz-xcell { fill: #262626; stroke: #3a3a3a; }
.vz-xl .vz-xhd { fill: #2b2b2b; stroke: #3a3a3a; }
.vz-xl .vz-xgrid { fill: #1e1e1e; stroke: #3a3a3a; }
.vz-xl .vz-xfoot { fill: transparent; stroke: #2dd4a0; }
.vz-xl .vz-tg { fill: #2dd4a0; }
.vz-xl .vz-xn0, .vz-xl .vz-xn1, .vz-xl .vz-xn2, .vz-xl .vz-xn3, .vz-xl .vz-xn4, .vz-xl .vz-xn5 { opacity: 0; }
.vz-xl.vz-run .vz-xn6 { opacity: 0; }
.vz-xl.vz-run:not(.s1) .vz-xn0, .vz-xl.vz-run.s1:not(.s2) .vz-xn1, .vz-xl.vz-run.s2:not(.s3) .vz-xn2, .vz-xl.vz-run.s3:not(.s4) .vz-xn3,
.vz-xl.vz-run.s4:not(.s5) .vz-xn4, .vz-xl.vz-run.s5:not(.s6) .vz-xn5, .vz-xl.vz-run.s6 .vz-xn6 { opacity: 1; }
.vz-xl.vz-run:not(.s1) .vz-xr0, .vz-xl.vz-run:not(.s2) .vz-xr1, .vz-xl.vz-run:not(.s3) .vz-xr2,
.vz-xl.vz-run:not(.s4) .vz-xr3, .vz-xl.vz-run:not(.s5) .vz-xr4, .vz-xl.vz-run:not(.s6) .vz-xr5 { opacity: 0; }
.vz-xl.vz-run .vz-xr .vz-xp { transition-delay: .35s; }

/* ---- backtesting ---- */
.vz-bt .vz-barp { fill: #2dd4a0; } .vz-bt .vz-barn { fill: #ff5a76; }
.vz-bt .vz-mb { transform-box: fill-box; transform-origin: 0 100%; transition: transform .4s ease calc(var(--i) * 50ms); }
.vz-bt .vz-barn.vz-mb { transform-origin: 0 0; }
.vz-bt.vz-run:not(.s1) .vz-curve2 { stroke-dashoffset: 100; transition: none; }
.vz-bt.vz-run:not(.s1) .vz-endd, .vz-bt.vz-run:not(.s5) .vz-dd { opacity: 0; }
.vz-bt.vz-run:not(.s2) .vz-bs0, .vz-bt.vz-run:not(.s3) .vz-bs1, .vz-bt.vz-run:not(.s4) .vz-bs2, .vz-bt.vz-run:not(.s5) .vz-bs3 { opacity: 0; }
.vz-bt.vz-run:not(.s6) .vz-mb { transform: scaleY(0); transition: none; }

/* ---- white label: accent follows the chosen brand colour ---- */
.vz-wl { --acc1: #2dd4a0; --acc2: #a3e635; }
.vz-wl.vz-run { --acc1: #ff2d87; --acc2: #ffa030; }
.vz-wl.vz-run.s3:not(.s4) { --acc1: #3b82f6; --acc2: #22d3ee; }
.vz-wl.vz-run.s4 { --acc1: #2dd4a0; --acc2: #a3e635; }
.vz-wl .vz-acc1 { stop-color: var(--acc1); }
.vz-wl .vz-acc2 { stop-color: var(--acc2); }
.vz-wl .vz-acc-fill { fill: var(--acc1); }
.vz-wl .vz-wline { fill: none; stroke: var(--acc1); stroke-width: 2.6; stroke-linejoin: round; }
.vz-wl .vz-dim { fill: var(--vz-line2); }
.vz-wl .vz-wph { fill: #0b0b0e; stroke: #55555f; stroke-width: 3; }
.vz-wl .vz-swsel { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; }
.vz-wl .vz-sw2 { opacity: 1; }
.vz-wl .vz-wb0, .vz-wl .vz-wd0, .vz-wl .vz-wl0, .vz-wl .vz-wn0 { opacity: 0; }
.vz-wl .vz-wfr { fill: rgba(45, 212, 160, .1); stroke: rgba(45, 212, 160, .7); }
.vz-wl.vz-run:not(.s1) .vz-wb1, .vz-wl.vz-run:not(.s1) .vz-wl1 { opacity: 0; }
.vz-wl.vz-run:not(.s1) .vz-wb0, .vz-wl.vz-run:not(.s1) .vz-wl0 { opacity: 1; }
.vz-wl.vz-run:not(.s2) .vz-wd1 { opacity: 0; }
.vz-wl.vz-run:not(.s2) .vz-wd0 { opacity: 1; }
.vz-wl.vz-run .vz-sw2 { opacity: 0; }
.vz-wl.vz-run:not(.s3) .vz-sw0, .vz-wl.vz-run.s3:not(.s4) .vz-sw1, .vz-wl.vz-run.s4 .vz-sw2 { opacity: 1; }
.vz-wl.vz-run:not(.s4) .vz-wn1 { opacity: 0; }
.vz-wl.vz-run:not(.s4) .vz-wn0 { opacity: 1; }
.vz-wl.vz-run:not(.s5) .vz-wfr { fill: transparent; stroke: var(--vz-line2); }
.vz-wl.vz-run:not(.s5) .vz-wfk { opacity: 0; }
.vz-wl.vz-run.s5 .vz-wfr, .vz-wl.vz-run.s5 .vz-wfk { transition: opacity .3s calc(var(--i) * 200ms), stroke .3s calc(var(--i) * 200ms), fill .3s calc(var(--i) * 200ms); }

/* ---- custom development (finished state = launch) ---- */
.vz-cdev .vz-cdl0 { stroke: #3a3a44; stroke-width: 3; }
.vz-cdev .vz-cdl { stroke: var(--vz-orange); stroke-width: 3; }
.vz-cdev .vz-cdc0 { fill: #2a2a30; stroke: #45454f; stroke-width: 2; }
.vz-cdev .vz-cdc1 { fill: var(--vz-pink); }
.vz-cdev .vz-cdk { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.vz-cdev .vz-cdn4 .vz-cdk { opacity: 0; }
.vz-cdev .vz-cdnl { opacity: 0; } .vz-cdev .vz-cdn4 .vz-cdnl { opacity: 1; }
.vz-cdev .vz-cdbox { fill: transparent; }
.vz-cdev .vz-cdchk { fill: none; stroke: var(--vz-pink); stroke-width: 1.6; }
.vz-cdev .vz-cdchkp { fill: none; stroke: var(--vz-pink); stroke-width: 2; stroke-linecap: round; }
.vz-cdev .vz-cdlink, .vz-cdev .vz-cdlink2 { stroke: #5a3343; stroke-width: 2; }
.vz-cdev .vz-cdlink2 { stroke: #a8326a; }
.vz-cdev .vz-cddot { fill: #3a3a44; }
.vz-cdev .vz-blue { stroke: #3b82f6; stroke-width: 2; } .vz-cdev .vz-pinkb, .vz .vz-pinkb { stroke: var(--vz-pink); stroke-width: 2; }
.vz .vz-orb { stroke: var(--vz-orange); stroke-width: 2; } .vz .vz-greenb { stroke: var(--vz-green); stroke-width: 2; }
.vz-cdev .vz-wf { fill: #2a2a30; }
.vz-cdev .vz-cdcode { fill: #0f1626; stroke: #1f2a40; }
.vz-cdev .vz-cdtab { fill: #1a2438; }
.vz-cdev .vz-cdring0 { fill: none; stroke: #2a2a30; stroke-width: 12; }
.vz-cdev .vz-cdring { fill: none; stroke: var(--vz-green); stroke-width: 12; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 2s ease; }
.vz-cdev .vz-cdtr { stroke: rgba(45, 212, 160, .7); }
.vz-cdev .vz-cdrun { opacity: 0; }
.vz-cdev .vz-cdpl { fill: none; stroke: var(--vz-orange); stroke-width: 4; stroke-linejoin: round; }
.vz-cdev .vz-cds0, .vz-cdev .vz-cds1, .vz-cdev .vz-cds2, .vz-cdev .vz-cds3 { opacity: 0; }
.vz-cdev .vz-cds { transition: opacity .45s; }
.vz-cdev.vz-run .vz-cds4 { opacity: 0; }
.vz-cdev.vz-run.s1:not(.s2) .vz-cds0, .vz-cdev.vz-run.s2:not(.s3) .vz-cds1, .vz-cdev.vz-run.s3:not(.s4) .vz-cds2,
.vz-cdev.vz-run.s4:not(.s5) .vz-cds3, .vz-cdev.vz-run.s5 .vz-cds4 { opacity: 1; }
.vz-cdev.vz-run .vz-cdl { stroke-dasharray: 202; stroke-dashoffset: 202; transition: stroke-dashoffset 2.6s linear; }
.vz-cdev.vz-run.s1 .vz-cdl0, .vz-cdev.vz-run.s2 .vz-cdl1, .vz-cdev.vz-run.s3 .vz-cdl2, .vz-cdev.vz-run.s4 .vz-cdl3 { stroke-dashoffset: 0; }
.vz-cdev.vz-run .vz-cdc1, .vz-cdev.vz-run .vz-cdk, .vz-cdev.vz-run .vz-cdnl { opacity: 0; }
.vz-cdev.vz-run.s1 .vz-cdn0 .vz-cdc1, .vz-cdev.vz-run.s2 .vz-cdn1 .vz-cdc1, .vz-cdev.vz-run.s3 .vz-cdn2 .vz-cdc1, .vz-cdev.vz-run.s4 .vz-cdn3 .vz-cdc1, .vz-cdev.vz-run.s5 .vz-cdn4 .vz-cdc1 { opacity: 1; }
.vz-cdev.vz-run.s2 .vz-cdn0 .vz-cdk, .vz-cdev.vz-run.s3 .vz-cdn1 .vz-cdk, .vz-cdev.vz-run.s4 .vz-cdn2 .vz-cdk, .vz-cdev.vz-run.s5 .vz-cdn3 .vz-cdk { opacity: 1; }
.vz-cdev.vz-run.s1:not(.s2) .vz-cdn0 .vz-cdnl, .vz-cdev.vz-run.s2:not(.s3) .vz-cdn1 .vz-cdnl, .vz-cdev.vz-run.s3:not(.s4) .vz-cdn2 .vz-cdnl,
.vz-cdev.vz-run.s4:not(.s5) .vz-cdn3 .vz-cdnl, .vz-cdev.vz-run.s5 .vz-cdn4 .vz-cdnl { opacity: 1; }
.vz-cdev.vz-run .vz-cdi { opacity: 0; transition: opacity .35s; }
.vz-cdev.vz-run.s1:not(.s2) .vz-cds0 .vz-cdi, .vz-cdev.vz-run.s2:not(.s3) .vz-cds1 .vz-cdi, .vz-cdev.vz-run.s3:not(.s4) .vz-cds2 .vz-cdi,
.vz-cdev.vz-run.s5 .vz-cds4 .vz-cdi { opacity: 1; transition-delay: calc(var(--i) * 220ms + .3s); }
.vz-cdev.vz-run .vz-cdbar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.6s ease .9s; }
.vz-cdev.vz-run.s3:not(.s4) .vz-cdbar { transform: scaleX(1); }
.vz-cdev.vz-run:not(.s4) .vz-cdring, .vz-cdev.vz-run.s5 .vz-cdring { stroke-dashoffset: 100; transition: none; }
.vz-cdev.vz-run .vz-cdt .vz-cdpass { opacity: 0; }
.vz-cdev.vz-run .vz-cdt .vz-cdrun { opacity: 1; }
.vz-cdev.vz-run .vz-cdt .vz-cdtr { stroke: var(--vz-line2); }
.vz-cdev.vz-run.s4 .vz-cdt .vz-cdpass, .vz-cdev.vz-run.s4 .vz-cdt .vz-cdtr { transition: opacity .3s calc(var(--i) * 550ms + .5s), stroke .3s calc(var(--i) * 550ms + .5s); }
.vz-cdev.vz-run.s4 .vz-cdt .vz-cdrun { transition: opacity .3s calc(var(--i) * 550ms + .5s); }
.vz-cdev.vz-run.s4 .vz-cdt .vz-cdpass { opacity: 1; }
.vz-cdev.vz-run.s4 .vz-cdt .vz-cdrun { opacity: 0; }
.vz-cdev.vz-run.s4 .vz-cdt .vz-cdtr { stroke: rgba(45, 212, 160, .7); }

/* ---- service hero: laptop + phone (finished state = trading terminal) ---- */
.vz-svh .vz-lbase { fill: #3a3a44; }
.vz-svh .vz-lbez, .vz-svh .vz-pbez { fill: #1f1f25; stroke: #4a4a55; stroke-width: 2; }
.vz-svh .vz-lscr { fill: #0e0e12; }
.vz-svh .vz-lside { fill: #121217; }
.vz-svh .vz-sent { fill: rgba(255, 160, 48, .12); stroke: rgba(255, 160, 48, .6); }
.vz-svh .vz-shk-ok { stroke: rgba(45, 212, 160, .7); } .vz-svh .vz-shk-sent { stroke: rgba(255, 160, 48, .8); }
.vz-svh .vz-shw { stroke: var(--vz-pink); stroke-width: 1.6; }
.vz-svh .vz-sh-ok { stroke: var(--vz-pink); } .vz-svh .vz-sh-sent { stroke: var(--vz-orange); } .vz-svh .vz-sh-wait { stroke: #4a4a55; }
.vz-svh .vz-shnode { fill: #fff; }
.vz-svh .vz-pink2 { stroke: var(--vz-pink); stroke-width: 2; }
.vz-svh .vz-sigbox { fill: rgba(255, 45, 135, .12); stroke: var(--vz-pink); }
.vz-svh .vz-phdot { fill: #3a3a44; } .vz-svh .vz-phd0 { fill: var(--vz-pink); }
.vz-svh .vz-shs { transition: opacity .45s; }
.vz-svh .vz-shs1, .vz-svh .vz-shs2, .vz-svh .vz-shs3, .vz-svh .vz-shn0 { opacity: 0; }
.vz-svh.vz-run .vz-shs0 { opacity: 0; } .vz-svh.vz-run .vz-shn0 { opacity: 1; }
.vz-svh.vz-run.s1:not(.s2) .vz-shs0, .vz-svh.vz-run.s2:not(.s3) .vz-shs1, .vz-svh.vz-run.s3:not(.s4) .vz-shs2, .vz-svh.vz-run.s4 .vz-shs3 { opacity: 1; }
.vz-svh.vz-run.s1:not(.s2) .vz-shn0, .vz-svh.vz-run.s2:not(.s3) .vz-shn1, .vz-svh.vz-run.s3:not(.s4) .vz-shn2, .vz-svh.vz-run.s4 .vz-shn3 { opacity: 0; }
.vz-svh .vz-shn1, .vz-svh .vz-shn2, .vz-svh .vz-shn3 { opacity: 1; }
.vz-svh.vz-run .vz-shk { opacity: 0; transition: opacity .35s; }
.vz-svh.vz-run.s2:not(.s3) .vz-shs1 .vz-shk, .vz-svh.vz-run.s3:not(.s4) .vz-shs2 .vz-shk, .vz-svh.vz-run.s4 .vz-shs3 .vz-shk { opacity: 1; transition-delay: calc(var(--i) * 260ms + .4s); }
.vz-svh .vz-shbar { transform-box: fill-box; transform-origin: 0 100%; }
.vz-svh.vz-run.s3:not(.s4) .vz-shbar { animation: vz-bar 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -90ms); }
@keyframes vz-bar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.vz-svh.vz-run .vz-phd0 { fill: #3a3a44; }
.vz-svh.vz-run.s1:not(.s2) .vz-phd0, .vz-svh.vz-run.s2:not(.s3) .vz-phd1, .vz-svh.vz-run.s3:not(.s4) .vz-phd2, .vz-svh.vz-run.s4 .vz-phd3 { fill: var(--vz-pink); }
.vz-svh .vz-cu line, .vz-svh .vz-cu rect { stroke: #26a69a; fill: #26a69a; }
.vz-svh .vz-cd line, .vz-svh .vz-cd rect { stroke: #ef5350; fill: #ef5350; }

/* ADDED: diagrams placed where the old <img> animations were */
.pf-media .vz { width: 100%; max-width: none; }
.ab-slot .vz { width: 100%; max-width: none; }
.sv-panel-art .vz, .sv-hero-visual .vz { margin-inline: auto; }