/* Ora docs visuals (static/ora-viz.js builds the markup; README: content/ORA-VIZ.md). Prefix vz-.
   Colours come from the page tokens (app.css, and site.css on public pages), so light and dark both work.
   Motion: pulses along wires, lit steps, filling meters. prefers-reduced-motion: static frames, no animation.
   .vz-off (set by ora-viz.js while a visual is off screen) pauses everything inside it. */
.vz {
  --vz-a: var(--bar); --vz-b: var(--good); --vz-c: var(--warn);
  --vz-ink: var(--text); --vz-mute: var(--muted); --vz-line: var(--line); --vz-bg: var(--panel); --vz-sunk: var(--sunk);
  --vz-wire: color-mix(in srgb, var(--muted) 45%, var(--line));
  --vz-cycle: 4.8s;
  margin: 20px 0 24px; color: var(--vz-ink); font-size: 14px; line-height: 1.45; max-width: 100%; min-width: 0;
}
.sx .vz { --vz-a: var(--accent); --vz-b: var(--accent-2, var(--good)); }
.vz code { font-size: .9em; }
.vz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vz-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vz-icon .vz-fill { fill: currentColor; stroke: none; }
.vz-icon-sm { width: 13px; height: 13px; stroke-width: 2; }
.vz-hl { background: color-mix(in srgb, var(--vz-a) 16%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------------------------------------------------------------- figure frame + caption */
.vz-flow, .vz-pair, .vz-scale { border: 1px solid var(--vz-line); border-radius: 14px; padding: 14px 16px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vz-sunk) 55%, var(--vz-bg)), var(--vz-bg)); }
.vz-cap { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.vz-cap-k { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--vz-a); }
.vz-cap b { font-weight: 600; font-size: 15px; }
.vz-foot { margin: 12px 0 0; line-height: 1.5; font-size: 12.5px; color: var(--vz-mute); }

/* ---------------------------------------------------------------- flow */
.vz-grid { display: grid; align-items: stretch; min-width: 0; }
.vz-n2 .vz-grid { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); }
.vz-n3 .vz-grid { grid-template-columns: minmax(0, 1.05fr) 52px minmax(0, .85fr) 52px minmax(0, 1.05fr); }
.vz-n4 .vz-grid { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, .9fr) 36px minmax(0, 1fr); }
.vz-n5 .vz-grid { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); }
.vz-col { display: grid; grid-auto-rows: 1fr; min-width: 0; }
.vz-cell { display: flex; align-items: center; padding: 5px 0; min-width: 0; }
.vz-node { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border: 1px solid var(--vz-line); border-radius: 10px; background: var(--vz-bg); overflow-wrap: anywhere; }
.vz-k { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--vz-mute); }
.vz-v { font-weight: 500; }
.vz-mono .vz-v { font-family: var(--mono); font-size: 12.5px; font-weight: 400; }
.vz-s { font-size: 12.5px; color: var(--vz-mute); }
.vz-t-a { border-color: color-mix(in srgb, var(--vz-a) 45%, var(--vz-line)); }
.vz-t-b { border-color: color-mix(in srgb, var(--vz-b) 50%, var(--vz-line)); }
.vz-t-c { border-color: color-mix(in srgb, var(--vz-c) 50%, var(--vz-line)); }
.vz-t-m { border-style: dashed; }
.vz-t-m .vz-v { color: var(--vz-mute); }
.vz-t-b > .vz-k, .vz-t-b .vz-card-ic { color: var(--vz-b); }
.vz-t-c > .vz-k, .vz-t-c .vz-card-ic { color: var(--vz-c); }
.vz-core { align-items: center; text-align: center; padding: 14px 12px; border: 1.5px solid var(--vz-a); background: color-mix(in srgb, var(--vz-a) 7%, var(--vz-bg)); }
.vz-core .vz-k { color: var(--vz-a); }
.vz-core .vz-v { font-family: var(--serif, inherit); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.vz-core-mark { color: var(--vz-a); line-height: 0; }
.vz-core-mark .vz-icon { width: 30px; height: 30px; stroke-width: 1.5; }
.vz-meter { display: block; height: 5px; border-radius: 3px; background: var(--vz-sunk); overflow: hidden; }
.vz-meter i { display: block; height: 100%; border-radius: 3px; background: var(--vz-b); transform-origin: left center; }
.vz-bus { position: relative; min-width: 0; }
.vz-bus svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-wire, .vz-pulse { fill: none; vector-effect: non-scaling-stroke; }
.vz-wire { stroke: var(--vz-wire); stroke-width: 1.25; }
.vz-pulse { stroke: var(--vz-a); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 300; stroke-dashoffset: 9; opacity: 0; }
.vz-down { display: none; }

/* ---------------------------------------------------------------- concept cards */
.vz-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.vz-c3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vz-cards.vz-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .vz-cards.vz-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .vz-cards.vz-c4 { grid-template-columns: minmax(0, 1fr); } }
.vz-c2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vz-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border: 1px solid var(--vz-line); border-radius: 12px; background: var(--vz-bg); min-width: 0; overflow-wrap: anywhere; transition: border-color .2s, transform .2s; }
.vz-card:hover { border-color: color-mix(in srgb, var(--vz-a) 55%, var(--vz-line)); }
.vz-card-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; color: var(--vz-a); background: color-mix(in srgb, currentColor 10%, transparent); }
.vz-card .vz-card-t { margin: 0; font: 600 14.5px/1.35 var(--sans); letter-spacing: 0; }
.vz-card p { margin: 0; font-size: 13px; color: var(--vz-mute); }
.vz-card p:first-of-type { color: var(--vz-ink); }
.vz-card-a { margin-top: auto; padding-top: 8px; font-size: 13px; }
.vz-pill { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 0 7px; border-radius: 99px; font: 500 10.5px/18px var(--sans); border: 1px solid var(--vz-line); color: var(--vz-mute); }
.vz-t-b .vz-pill { color: var(--vz-b); border-color: color-mix(in srgb, var(--vz-b) 45%, var(--vz-line)); }
.vz-t-c .vz-pill { color: var(--vz-c); border-color: color-mix(in srgb, var(--vz-c) 45%, var(--vz-line)); }

/* ---------------------------------------------------------------- step strip */
.vz-steps { position: relative; display: grid; gap: 14px; list-style: none; padding: 0; grid-template-columns: repeat(var(--vz-n, 4), minmax(0, 1fr)); }
.vz-steps.vz-c3 { --vz-n: 3; } .vz-steps.vz-c4 { --vz-n: 4; } .vz-steps.vz-c5 { --vz-n: 5; } .vz-steps.vz-c6 { --vz-n: 6; }
.vz-steps > li { margin: 0; }
.vz-track { position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: var(--vz-line); border-radius: 2px; overflow: hidden; pointer-events: none; }
.vz-track i { position: absolute; inset: 0; }
.vz-track i::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--vz-a)); transform: translateX(-40px); }
.vz-step { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.vz-sn { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vz-line); background: var(--vz-bg); font: 600 12.5px/1 var(--mono); color: var(--vz-mute); }
.vz-glyph { position: absolute; top: 2px; left: 38px; color: var(--vz-a); line-height: 0; }
.vz-step-t { margin-top: 6px; font-weight: 600; font-size: 14px; }
.vz-step-p { font-size: 13px; color: var(--vz-mute); }

/* ---------------------------------------------------------------- pair */
.vz-pair-grid { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: stretch; }
.vz-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--vz-line); border-radius: 10px; background: var(--vz-bg); }
.vz-code { margin: 0; padding: 0; background: none; border: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--vz-ink); }
.vz-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; text-align: center; }
.vz-mid-l { font-size: 11.5px; color: var(--vz-mute); line-height: 1.3; }
.vz-arrow { position: relative; width: 100%; height: 12px; overflow: hidden; }
.vz-arrow::before { content: ""; position: absolute; left: 0; right: 6px; top: 5.5px; height: 1.25px; background: var(--vz-wire); }
.vz-arrow::after { content: ""; position: absolute; right: 1px; top: 2px; width: 6px; height: 6px; border-top: 1.5px solid var(--vz-wire); border-right: 1.5px solid var(--vz-wire); transform: rotate(45deg); }
.vz-arrow i { position: absolute; inset: 0; }
.vz-arrow i::before { content: ""; position: absolute; top: 3.5px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--vz-a); opacity: 0; }

/* ---------------------------------------------------------------- belief scale */
.vz-scale-main { padding: 4px 4px 0; }
.vz-scale-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--vz-mute); margin-bottom: 30px; }
.vz-scale-track { position: relative; height: 10px; border-radius: 6px; background: var(--vz-sunk); margin: 0 0 46px; }
.vz-zone { position: absolute; top: 0; bottom: 0; }
.vz-z-lo { left: 5%; width: 40%; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--vz-c) 45%, transparent), color-mix(in srgb, var(--vz-c) 8%, transparent)); }
.vz-z-mid { left: 45%; width: 10%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vz-mute) 30%, transparent) 0 3px, transparent 3px 6px); }
.vz-z-hi { left: 55%; width: 40%; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--vz-b) 8%, transparent), color-mix(in srgb, var(--vz-b) 50%, transparent)); }
.vz-tick { position: absolute; top: -5px; width: 0; height: 20px; border-left: 1.5px solid var(--vz-mute); }
.vz-tick b, .vz-tick em { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-style: normal; }
.vz-tick b { font: 600 11px/1 var(--mono); }
.vz-tick em { font-size: 10.5px; color: var(--vz-mute); }
.vz-tk1 b, .vz-tk3 b, .vz-tk5 b { bottom: 24px; } .vz-tk1 em, .vz-tk3 em, .vz-tk5 em { bottom: 37px; display: none; }
.vz-tk2 b, .vz-tk4 b { top: 24px; } .vz-tk2 em, .vz-tk4 em { top: 37px; }
.vz-tk2 b, .vz-tk2 em { transform: translateX(-90%); } .vz-tk4 b, .vz-tk4 em { transform: translateX(-10%); }
.vz-tk3 { border-left-style: dashed; }
.vz-sweep { position: absolute; inset: -4px 0; pointer-events: none; }
.vz-sweep i { position: absolute; top: 0; left: 5%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--vz-bg); background: var(--vz-a); box-shadow: 0 0 0 1px var(--vz-a); }
.vz-scale-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-scale-rows li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 54px; grid-template-areas: "l m v" "n n n"; column-gap: 12px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--vz-line); }
.vz-sl { grid-area: l; min-width: 0; overflow-wrap: anywhere; }
.vz-mini { grid-area: m; position: relative; height: 4px; border-radius: 2px; background: var(--vz-sunk); }
.vz-mini i { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--vz-a); }
.vz-sv { grid-area: v; font: 600 13px/1 var(--mono); text-align: right; }
.vz-sn2 { grid-area: n; font-size: 12px; color: var(--vz-mute); }

/* ---------------------------------------------------------------- narrow screens: flows stack vertically */
@media (max-width: 700px) {
  .vz-flow, .vz-pair, .vz-scale { padding: 12px; }
  .vz-grid, .vz-n2 .vz-grid, .vz-n3 .vz-grid, .vz-n4 .vz-grid, .vz-n5 .vz-grid { grid-template-columns: minmax(0, 1fr); }
  .vz-col { grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); column-gap: 8px; }
  .vz-cell { padding: 3px 0; align-items: stretch; }
  .vz-bus { display: none; }
  .vz-down { display: block; position: relative; height: 26px; margin: 2px auto; width: 12px; overflow: hidden; }
  .vz-down::before { content: ""; position: absolute; left: 5.4px; top: 0; bottom: 3px; width: 1.25px; background: var(--vz-wire); }
  .vz-down::after { content: ""; position: absolute; left: 2.5px; bottom: 2px; width: 5px; height: 5px; border-right: 1.5px solid var(--vz-wire); border-bottom: 1.5px solid var(--vz-wire); transform: rotate(45deg); }
  .vz-down i { position: absolute; inset: 0; }
  .vz-down i::before { content: ""; position: absolute; left: 3.5px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--vz-a); opacity: 0; }
  .vz-steps, .vz-steps.vz-c3, .vz-steps.vz-c4, .vz-steps.vz-c5, .vz-steps.vz-c6 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vz-track { left: 13px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .vz-track i::before { width: 100%; height: 40px; background: linear-gradient(180deg, transparent, var(--vz-a)); transform: translateY(-40px); }
  .vz-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
  .vz-sn { grid-row: 1 / span 2; }
  .vz-glyph { display: none; }
  .vz-step-t { margin-top: 3px; }
  .vz-pair-grid { grid-template-columns: minmax(0, 1fr); }
  .vz-mid { flex-direction: row; padding: 6px 0; }
  .vz-arrow { width: 12px; height: 26px; flex: none; }
  .vz-arrow::before { left: 5.4px; right: auto; top: 0; bottom: 6px; width: 1.25px; height: auto; }
  .vz-arrow::after { left: 2.5px; right: auto; top: auto; bottom: 2px; transform: rotate(135deg); }
  .vz-arrow i::before { left: 3.5px; top: 0; }
  .vz-scale-rows li { grid-template-columns: minmax(0, 1fr) 54px; grid-template-areas: "l v" "m m" "n n"; row-gap: 6px; }
}

/* ---------------------------------------------------------------- motion (only when the reader allows it) */
@media (prefers-reduced-motion: no-preference) {
  .vz-pulse { animation: vz-run var(--vz-cycle) cubic-bezier(.45, 0, .3, 1) infinite; }
  .vz-g2.vz-pulse, .vz-g2 .vz-pulse { animation-delay: 1.1s; }
  .vz-g3.vz-pulse, .vz-g3 .vz-pulse { animation-delay: 2.2s; }
  .vz-g4.vz-pulse { animation-delay: 3.1s; }
  .vz-p2 { animation-delay: .25s; } .vz-p3 { animation-delay: .5s; } .vz-p4 { animation-delay: .75s; }
  .vz-g2.vz-p2 { animation-delay: 1.35s; } .vz-g2.vz-p3 { animation-delay: 1.6s; } .vz-g2.vz-p4 { animation-delay: 1.85s; }
  .vz-g3.vz-p2 { animation-delay: 2.45s; } .vz-g3.vz-p3 { animation-delay: 2.7s; }
  .vz-down i::before { animation: vz-drop var(--vz-cycle) ease-in-out infinite; }
  .vz-down.vz-g2 i::before { animation-delay: 1.1s; } .vz-down.vz-g3 i::before { animation-delay: 2.2s; } .vz-down.vz-g4 i::before { animation-delay: 3.1s; }
  .vz-core { animation: vz-glow var(--vz-cycle) ease-out infinite; animation-delay: 1s; }
  .vz-n4 .vz-core, .vz-n5 .vz-core { animation-delay: 2.2s; }
  .vz-spin { animation: vz-turn 12s linear infinite; transform-origin: 50% 50%; }
  .vz-col:last-child .vz-meter i { animation: vz-fill var(--vz-cycle) cubic-bezier(.3, .7, .2, 1) infinite; }
  .vz-n4 .vz-col:last-child .vz-meter i, .vz-n5 .vz-col:last-child .vz-meter i { animation-name: vz-fill-late; }
  .vz-track i::before { animation: vz-track 6s linear infinite; }
  .vz-sn { animation: vz-lit 6s ease-out infinite; }
  .vz-step.vz-i2 .vz-sn { animation-delay: .9s; } .vz-step.vz-i3 .vz-sn { animation-delay: 1.8s; } .vz-step.vz-i4 .vz-sn { animation-delay: 2.7s; }
  .vz-step.vz-i5 .vz-sn { animation-delay: 3.6s; } .vz-step.vz-i6 .vz-sn { animation-delay: 4.5s; }
  .vz-glyph .vz-icon { animation: vz-bob 6s ease-in-out infinite; }
  .vz-step.vz-i2 .vz-glyph .vz-icon { animation-delay: .9s; } .vz-step.vz-i3 .vz-glyph .vz-icon { animation-delay: 1.8s; }
  .vz-step.vz-i4 .vz-glyph .vz-icon { animation-delay: 2.7s; } .vz-step.vz-i5 .vz-glyph .vz-icon { animation-delay: 3.6s; }
  .vz-a-key .vz-icon { animation-name: vz-twist; } .vz-a-send .vz-icon { animation-name: vz-nudge; } .vz-a-bell .vz-icon { animation-name: vz-ring; }
  .vz-arrow i::before { animation: vz-slide 2.6s ease-in-out infinite; }
  .vz-pair .vz-r .vz-hl { animation: vz-mark 2.6s ease-out infinite; }
  .vz-sweep i { animation: vz-sweep 7s ease-in-out infinite alternate; }
  .vz-card:hover { transform: translateY(-2px); }
  .vz-card:hover .vz-card-ic .vz-icon { animation: vz-bob 1.2s ease-in-out; }
  .vz-off *, .vz-off *::before, .vz-off { animation-play-state: paused !important; }
  @media (max-width: 700px) {
    .vz-track i::before { animation-name: vz-track-v; }
    .vz-arrow i::before { animation-name: vz-slide-v; }
  }
}
@keyframes vz-run { 0% { stroke-dashoffset: 9; opacity: 0; } 6% { opacity: 1; } 34% { stroke-dashoffset: -100; opacity: 1; } 35%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes vz-drop { 0% { transform: translateY(-6px); opacity: 0; } 6% { opacity: 1; } 32% { transform: translateY(22px); opacity: 1; } 34%, 100% { transform: translateY(22px); opacity: 0; } }
@keyframes vz-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vz-a) 35%, transparent); } 28%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--vz-a) 0%, transparent); } }
@keyframes vz-turn { to { transform: rotate(360deg); } }
@keyframes vz-fill { 0%, 44% { transform: scaleX(0); } 62%, 92% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .35; } }
@keyframes vz-fill-late { 0%, 64% { transform: scaleX(0); } 80%, 94% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .35; } }
@keyframes vz-track { 0% { transform: translateX(-40px); } 100% { transform: translateX(calc(100vw)); } }
@keyframes vz-track-v { 0% { transform: translateY(-40px); } 100% { transform: translateY(600px); } }
@keyframes vz-lit { 0%, 4% { border-color: var(--vz-line); color: var(--vz-mute); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vz-a) 40%, transparent); }
  10% { border-color: var(--vz-a); color: var(--vz-a); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vz-a) 0%, transparent); }
  60% { border-color: var(--vz-a); color: var(--vz-a); } 80%, 100% { border-color: var(--vz-line); color: var(--vz-mute); } }
@keyframes vz-bob { 0%, 4%, 22%, 100% { transform: translateY(0); } 12% { transform: translateY(-3px); } }
@keyframes vz-twist { 0%, 4%, 24%, 100% { transform: rotate(0); } 12% { transform: rotate(-35deg); } }
@keyframes vz-nudge { 0%, 4%, 24%, 100% { transform: translate(0, 0); } 12% { transform: translate(4px, -3px); } }
@keyframes vz-ring { 0%, 4%, 26%, 100% { transform: rotate(0); } 9% { transform: rotate(14deg); } 15% { transform: rotate(-12deg); } 20% { transform: rotate(6deg); } }
@keyframes vz-slide { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateX(70px); opacity: 1; } 76%, 100% { transform: translateX(70px); opacity: 0; } }
@keyframes vz-slide-v { 0% { transform: translateY(-4px); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateY(18px); opacity: 1; } 76%, 100% { transform: translateY(18px); opacity: 0; } }
@keyframes vz-mark { 0%, 62% { background: color-mix(in srgb, var(--vz-a) 16%, transparent); } 72% { background: color-mix(in srgb, var(--vz-a) 38%, transparent); } 100% { background: color-mix(in srgb, var(--vz-a) 16%, transparent); } }
@keyframes vz-sweep { 0%, 6% { left: 5%; } 30%, 38% { left: 45%; } 48%, 54% { left: 50%; } 64%, 70% { left: 55%; } 94%, 100% { left: 95%; } }
@media (prefers-reduced-motion: reduce) {
  .vz *, .vz *::before, .vz *::after { animation: none !important; transition: none !important; }
  .vz-sweep { display: none; }
}

/* ---------------------------------------------------------------- generated: meter widths (vz-w0..100) and positions (vz-x0..100) */
.vz-w0{width:0%} .vz-w1{width:1%} .vz-w2{width:2%} .vz-w3{width:3%} .vz-w4{width:4%} .vz-w5{width:5%} .vz-w6{width:6%} .vz-w7{width:7%} .vz-w8{width:8%} .vz-w9{width:9%} .vz-w10{width:10%} .vz-w11{width:11%} .vz-w12{width:12%} .vz-w13{width:13%} .vz-w14{width:14%} .vz-w15{width:15%} .vz-w16{width:16%} .vz-w17{width:17%} .vz-w18{width:18%} .vz-w19{width:19%} .vz-w20{width:20%} .vz-w21{width:21%} .vz-w22{width:22%} .vz-w23{width:23%} .vz-w24{width:24%} .vz-w25{width:25%} .vz-w26{width:26%} .vz-w27{width:27%} .vz-w28{width:28%} .vz-w29{width:29%} .vz-w30{width:30%} .vz-w31{width:31%} .vz-w32{width:32%} .vz-w33{width:33%} .vz-w34{width:34%} .vz-w35{width:35%} .vz-w36{width:36%} .vz-w37{width:37%} .vz-w38{width:38%} .vz-w39{width:39%} .vz-w40{width:40%} .vz-w41{width:41%} .vz-w42{width:42%} .vz-w43{width:43%} .vz-w44{width:44%} .vz-w45{width:45%} .vz-w46{width:46%} .vz-w47{width:47%} .vz-w48{width:48%} .vz-w49{width:49%} .vz-w50{width:50%} .vz-w51{width:51%} .vz-w52{width:52%} .vz-w53{width:53%} .vz-w54{width:54%} .vz-w55{width:55%} .vz-w56{width:56%} .vz-w57{width:57%} .vz-w58{width:58%} .vz-w59{width:59%} .vz-w60{width:60%} .vz-w61{width:61%} .vz-w62{width:62%} .vz-w63{width:63%} .vz-w64{width:64%} .vz-w65{width:65%} .vz-w66{width:66%} .vz-w67{width:67%} .vz-w68{width:68%} .vz-w69{width:69%} .vz-w70{width:70%} .vz-w71{width:71%} .vz-w72{width:72%} .vz-w73{width:73%} .vz-w74{width:74%} .vz-w75{width:75%} .vz-w76{width:76%} .vz-w77{width:77%} .vz-w78{width:78%} .vz-w79{width:79%} .vz-w80{width:80%} .vz-w81{width:81%} .vz-w82{width:82%} .vz-w83{width:83%} .vz-w84{width:84%} .vz-w85{width:85%} .vz-w86{width:86%} .vz-w87{width:87%} .vz-w88{width:88%} .vz-w89{width:89%} .vz-w90{width:90%} .vz-w91{width:91%} .vz-w92{width:92%} .vz-w93{width:93%} .vz-w94{width:94%} .vz-w95{width:95%} .vz-w96{width:96%} .vz-w97{width:97%} .vz-w98{width:98%} .vz-w99{width:99%} .vz-w100{width:100%}
.vz-x0{left:0%} .vz-x1{left:1%} .vz-x2{left:2%} .vz-x3{left:3%} .vz-x4{left:4%} .vz-x5{left:5%} .vz-x6{left:6%} .vz-x7{left:7%} .vz-x8{left:8%} .vz-x9{left:9%} .vz-x10{left:10%} .vz-x11{left:11%} .vz-x12{left:12%} .vz-x13{left:13%} .vz-x14{left:14%} .vz-x15{left:15%} .vz-x16{left:16%} .vz-x17{left:17%} .vz-x18{left:18%} .vz-x19{left:19%} .vz-x20{left:20%} .vz-x21{left:21%} .vz-x22{left:22%} .vz-x23{left:23%} .vz-x24{left:24%} .vz-x25{left:25%} .vz-x26{left:26%} .vz-x27{left:27%} .vz-x28{left:28%} .vz-x29{left:29%} .vz-x30{left:30%} .vz-x31{left:31%} .vz-x32{left:32%} .vz-x33{left:33%} .vz-x34{left:34%} .vz-x35{left:35%} .vz-x36{left:36%} .vz-x37{left:37%} .vz-x38{left:38%} .vz-x39{left:39%} .vz-x40{left:40%} .vz-x41{left:41%} .vz-x42{left:42%} .vz-x43{left:43%} .vz-x44{left:44%} .vz-x45{left:45%} .vz-x46{left:46%} .vz-x47{left:47%} .vz-x48{left:48%} .vz-x49{left:49%} .vz-x50{left:50%} .vz-x51{left:51%} .vz-x52{left:52%} .vz-x53{left:53%} .vz-x54{left:54%} .vz-x55{left:55%} .vz-x56{left:56%} .vz-x57{left:57%} .vz-x58{left:58%} .vz-x59{left:59%} .vz-x60{left:60%} .vz-x61{left:61%} .vz-x62{left:62%} .vz-x63{left:63%} .vz-x64{left:64%} .vz-x65{left:65%} .vz-x66{left:66%} .vz-x67{left:67%} .vz-x68{left:68%} .vz-x69{left:69%} .vz-x70{left:70%} .vz-x71{left:71%} .vz-x72{left:72%} .vz-x73{left:73%} .vz-x74{left:74%} .vz-x75{left:75%} .vz-x76{left:76%} .vz-x77{left:77%} .vz-x78{left:78%} .vz-x79{left:79%} .vz-x80{left:80%} .vz-x81{left:81%} .vz-x82{left:82%} .vz-x83{left:83%} .vz-x84{left:84%} .vz-x85{left:85%} .vz-x86{left:86%} .vz-x87{left:87%} .vz-x88{left:88%} .vz-x89{left:89%} .vz-x90{left:90%} .vz-x91{left:91%} .vz-x92{left:92%} .vz-x93{left:93%} .vz-x94{left:94%} .vz-x95{left:95%} .vz-x96{left:96%} .vz-x97{left:97%} .vz-x98{left:98%} .vz-x99{left:99%} .vz-x100{left:100%}