/* falcon.com home page: the "ways in" section after the identities diagram. Three diagrams: each
   identity's own addresses, the request map, and the connected apps that start work. Same rules as
   graphics.css: classes only, each diagram's base style is its final frame, and the motion runs only
   when the visitor allows it, so reduced motion shows that frame. Geometry-bound rules (the dots'
   travel) and the timed keyframes are generated with the diagrams. */

/* Layout: the first two side by side on wide screens, the apps diagram across both. */
@media (min-width: 960px) {
  .w-figs .w-span {
    grid-column: 1 / -1;
  }
}
.w-graphic {
  max-width: 27rem;
}
.w-apps-w {
  max-width: 50rem;
}
.w-graphic .g-eyebrow {
  font-size: 9.5px;
}
.w-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Text */
.graphic .w-label {
  fill: var(--warm-600);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.graphic .w-val {
  font-size: 10px;
}
.graphic .w-code,
.graphic .w-key,
.graphic .w-back-t {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px;
}
.graphic .w-key {
  fill: var(--red-900);
  font-weight: 600;
}
.graphic .w-dim {
  fill: var(--warm-600);
}
.graphic .w-side {
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
.graphic .w-tile-t {
  font-size: 11.5px;
}

/* Shared marks */
.w-dot {
  fill: var(--accent-line);
  stroke: var(--surface);
  stroke-width: 2;
  opacity: 0;
}
.w-rule {
  fill: none;
  stroke: var(--line);
}
.w-fill {
  fill: var(--fill);
}
.w-badge-soon {
  fill: var(--surface-high);
  stroke: var(--line-strong);
}
.w-soon-ico .g-ico-line {
  stroke: var(--warm-600);
}
.w-soon-ico .g-ico {
  fill: var(--warm-600);
}

/* 1. Ways in: the address cards, the lit identity and the agent's badge */
.w-cardlit,
.w-idlit {
  fill: var(--red-100);
  stroke: var(--red-400);
  stroke-width: 1.5;
}
.w-live,
.w3-live {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 2.5;
}
.w-act rect {
  fill: var(--fill);
}
.graphic .w-act text {
  fill: var(--on-primary);
  font-size: 10.5px;
  font-weight: 600;
}
.w-msg rect {
  fill: var(--red-700);
}
.graphic .w-msg text {
  fill: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
}
.w-opt rect {
  fill: var(--surface-high);
  stroke: var(--line-strong);
}
.graphic .w-opt text {
  fill: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
}
.w-act.k2,
.w-live.k2,
.w-cardlit.k2,
.w-idlit.k2,
.w-msg.k2 {
  opacity: 0;
}

/* 2. Request map */
.w-post {
  fill: var(--fill);
}
.graphic .w-post-t {
  fill: var(--on-primary);
  font-size: 9.5px;
  font-weight: 600;
}
.w-reqlit,
.w-maplit,
.w-steplit {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.w-steplit {
  fill: var(--red-100);
  stroke: var(--red-400);
}
.w-sig {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.w-sig-tick {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graphic .w-sig-t {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.w-arrow-base {
  fill: none;
  stroke: var(--warm-300);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.w-arrow {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.8;
  stroke-dasharray: 1 1;
}
.w-arrow.a6,
.w-arrow.a7 {
  stroke: var(--red-700);
}
.w-head {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w-type {
  fill: var(--red-50);
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: right center;
}
.w-stage {
  fill: none;
  stroke: var(--red-200);
  stroke-dasharray: 4 3;
}
.w-back rect {
  fill: var(--red-900);
}
.graphic .w-back text {
  fill: var(--surface);
  font-weight: 600;
}

/* 3. Connected apps */
.w3-lit {
  fill: var(--red-50);
  stroke: var(--red-400);
  stroke-width: 1.5;
}
.w-tag rect {
  stroke-width: 1;
}
.graphic .w-tag text {
  font-size: 9.5px;
  font-weight: 600;
}
.w-tag-you rect {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .w-tag-you text {
  fill: var(--red-900);
}
.w-tag-co rect {
  fill: var(--surface-high);
  stroke: var(--line-strong);
}
.graphic .w-tag-co text {
  fill: var(--text-muted);
}
.w-tag-wait rect {
  fill: var(--surface);
  stroke: var(--red-400);
  stroke-dasharray: 3 2;
}
.graphic .w-tag-wait text {
  fill: var(--red-900);
}
.w-tag-ok rect {
  fill: var(--fill);
  stroke: var(--fill);
}
.graphic .w-tag-ok text {
  fill: var(--on-primary);
}
.w-tag-wait {
  opacity: 0;
}
.w-start {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.graphic .w-by {
  fill: var(--red-900);
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
}
.w3-lit,
.w3-live {
  opacity: 0;
}
.w3-lit.k7,
.w3-live.k7,
.graphic .w-by.k7 {
  opacity: 1;
}

.w1-dot.k1 {
  --dy: -25px;
}
.w1-dot.k2 {
  --dy: -65px;
}
.w-apps-w .w3-dot.k1 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: 177px;
  --x3: 90px;
  --y3: 177px;
}
.w-apps-w .w3-dot.k2 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: 127px;
  --x3: 90px;
  --y3: 127px;
}
.w-apps-w .w3-dot.k3 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: 77px;
  --x3: 90px;
  --y3: 77px;
}
.w-apps-w .w3-dot.k4 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: 27px;
  --x3: 90px;
  --y3: 27px;
}
.w-apps-w .w3-dot.k5 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: -23px;
  --x3: 90px;
  --y3: -23px;
}
.w-apps-w .w3-dot.k6 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: -73px;
  --x3: 90px;
  --y3: -73px;
}
.w-apps-w .w3-dot.k7 {
  --x1: 32px;
  --y1: 0px;
  --x2: 32px;
  --y2: -123px;
  --x3: 90px;
  --y3: -123px;
}
.w-apps-n .w3-dot.k1 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 455px;
  --x3: 22px;
  --y3: 455px;
}
.w-apps-n .w3-dot.k2 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 405px;
  --x3: 22px;
  --y3: 405px;
}
.w-apps-n .w3-dot.k3 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 355px;
  --x3: 22px;
  --y3: 355px;
}
.w-apps-n .w3-dot.k4 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 305px;
  --x3: 22px;
  --y3: 305px;
}
.w-apps-n .w3-dot.k5 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 255px;
  --x3: 22px;
  --y3: 255px;
}
.w-apps-n .w3-dot.k6 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 205px;
  --x3: 22px;
  --y3: 205px;
}
.w-apps-n .w3-dot.k7 {
  --x1: 22px;
  --y1: 0px;
  --x2: 22px;
  --y2: 155px;
  --x3: 22px;
  --y3: 155px;
}

@media (prefers-reduced-motion: no-preference) {
  .w-ways .w-msg,
  .w-ways .w-cardlit,
  .w-ways .w-dot,
  .w-ways .w-idlit,
  .w-ways .w-live,
  .w-ways .w-act {
    animation: 12s ease-in-out infinite both;
  }
  .w-map .w-arrow,
  .w-map .w-head,
  .w-map .w-sig,
  .w-map .w-sig-tick,
  .w-map .w-reqlit,
  .w-map .w-maplit,
  .w-map .w-type,
  .w-map .w-steplit,
  .w-map .w-back {
    animation: 14s ease-in-out infinite both;
  }
  .w-apps .w3-lit,
  .w-apps .w3-live,
  .w-apps .w-dot,
  .w-apps .w-by,
  .w-apps .w-tag-ok,
  .w-apps .w-tag-wait {
    animation: 16s ease-in-out infinite both;
  }
  .w-ways .w-msg.k1 {
    animation-name: w1-msg-k1;
  }
  .w-ways .w-cardlit.k1 {
    animation-name: w1-card-k1;
  }
  .w-ways .w1-dot.k1 {
    animation-name: w1-dot-k1;
  }
  .w-ways .w-idlit.k1 {
    animation-name: w1-id-k1;
  }
  .w-ways .w-live.k1 {
    animation-name: w1-act-k1;
  }
  .w-ways .w-act.k1 {
    animation-name: w1-act-k1;
  }
  .w-ways .w-msg.k2 {
    animation-name: w1-msg-k2;
  }
  .w-ways .w-cardlit.k2 {
    animation-name: w1-card-k2;
  }
  .w-ways .w1-dot.k2 {
    animation-name: w1-dot-k2;
  }
  .w-ways .w-idlit.k2 {
    animation-name: w1-id-k2;
  }
  .w-ways .w-live.k2 {
    animation-name: w1-act-k2;
  }
  .w-ways .w-act.k2 {
    animation-name: w1-act-k2;
  }
  .w-map .w-arrow.a0 {
    animation-name: w2-draw-a0;
  }
  .w-map .w-head.a0 {
    animation-name: w2-head-a0;
  }
  .w-map .w-arrow.a1 {
    animation-name: w2-draw-a1;
  }
  .w-map .w-head.a1 {
    animation-name: w2-head-a1;
  }
  .w-map .w-arrow.a2 {
    animation-name: w2-draw-a2;
  }
  .w-map .w-head.a2 {
    animation-name: w2-head-a2;
  }
  .w-map .w-arrow.a3 {
    animation-name: w2-draw-a3;
  }
  .w-map .w-head.a3 {
    animation-name: w2-head-a3;
  }
  .w-map .w-arrow.a4 {
    animation-name: w2-draw-a4;
  }
  .w-map .w-head.a4 {
    animation-name: w2-head-a4;
  }
  .w-map .w-arrow.a5 {
    animation-name: w2-draw-a5;
  }
  .w-map .w-head.a5 {
    animation-name: w2-head-a5;
  }
  .w-map .w-arrow.a6 {
    animation-name: w2-draw-a6;
  }
  .w-map .w-head.a6 {
    animation-name: w2-head-a6;
  }
  .w-map .w-arrow.a7 {
    animation-name: w2-draw-a7;
  }
  .w-map .w-head.a7 {
    animation-name: w2-head-a7;
  }
  .w-map .w-sig,
  .w-map .w-sig-tick {
    animation-name: w2-sig;
  }
  .w-map .w-maplit.m0 {
    animation-name: w2-m0;
  }
  .w-map .w-maplit.m1 {
    animation-name: w2-m1;
  }
  .w-map .w-maplit.m2 {
    animation-name: w2-m2;
  }
  .w-map .w-maplit.m3 {
    animation-name: w2-m3;
  }
  .w-map .w-maplit.m4 {
    animation-name: w2-m4;
  }
  .w-map .w-reqlit.q0 {
    animation-name: w2-q0;
  }
  .w-map .w-reqlit.q3 {
    animation-name: w2-q3;
  }
  .w-map .w-reqlit.q1 {
    animation-name: w2-q1;
  }
  .w-map .w-reqlit.q2 {
    animation-name: w2-q2;
  }
  .w-map .w-reqlit.q4 {
    animation-name: w2-q4;
  }
  .w-map .w-maplit.m5 {
    animation-name: w2-m5;
  }
  .w-map .w-type {
    animation-name: w2-type;
  }
  .w-map .w-steplit.s0 {
    animation-name: w2-s0;
  }
  .w-map .w-steplit.s1,
  .w-map .w-steplit.s2 {
    animation-name: w2-s12;
  }
  .w-map .w-back {
    animation-name: w2-back;
  }
  .w-apps .w3-lit.k1 {
    animation-name: w3-lit-k1;
  }
  .w-apps .w3-live.k1 {
    animation-name: w3-live-k1;
  }
  .w-apps .w3-dot.k1 {
    animation-name: w3-dot-k1;
  }
  .w-apps .w-by.k1 {
    animation-name: w3-by-k1;
  }
  .w-apps .w3-lit.k2 {
    animation-name: w3-lit-k2;
  }
  .w-apps .w3-live.k2 {
    animation-name: w3-live-k2;
  }
  .w-apps .w3-dot.k2 {
    animation-name: w3-dot-k2;
  }
  .w-apps .w-by.k2 {
    animation-name: w3-by-k2;
  }
  .w-apps .w3-lit.k3 {
    animation-name: w3-lit-k3;
  }
  .w-apps .w3-live.k3 {
    animation-name: w3-live-k3;
  }
  .w-apps .w3-dot.k3 {
    animation-name: w3-dot-k3;
  }
  .w-apps .w-by.k3 {
    animation-name: w3-by-k3;
  }
  .w-apps .w3-lit.k4 {
    animation-name: w3-lit-k4;
  }
  .w-apps .w3-live.k4 {
    animation-name: w3-live-k4;
  }
  .w-apps .w3-dot.k4 {
    animation-name: w3-dot-k4;
  }
  .w-apps .w-by.k4 {
    animation-name: w3-by-k4;
  }
  .w-apps .w3-lit.k5 {
    animation-name: w3-lit-k5;
  }
  .w-apps .w3-live.k5 {
    animation-name: w3-live-k5;
  }
  .w-apps .w3-dot.k5 {
    animation-name: w3-dot-k5;
  }
  .w-apps .w-by.k5 {
    animation-name: w3-by-k5;
  }
  .w-apps .w3-lit.k6 {
    animation-name: w3-lit-k6;
  }
  .w-apps .w3-live.k6 {
    animation-name: w3-live-k6;
  }
  .w-apps .w3-dot.k6 {
    animation-name: w3-dot-k6;
  }
  .w-apps .w-by.k6 {
    animation-name: w3-by-k6;
  }
  .w-apps .w3-lit.k7 {
    animation-name: w3-lit-k7;
  }
  .w-apps .w3-live.k7 {
    animation-name: w3-live-k7;
  }
  .w-apps .w3-dot.k7 {
    animation-name: w3-dot-k7;
  }
  .w-apps .w-by.k7 {
    animation-name: w3-by-k7;
  }
  .w-apps .w-tag-ok {
    animation-name: w3-ok;
  }
  .w-apps .w-tag-wait {
    animation-name: w3-wait;
  }
}

@keyframes w1-msg-k1 {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 0;
  }
  4.2% {
    opacity: 1;
  }
  43% {
    opacity: 1;
  }
  44.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-card-k1 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  6.2% {
    opacity: 1;
  }
  43% {
    opacity: 1;
  }
  44.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-dot-k1 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  7% {
    opacity: 0;
    transform: translate(0, 0);
  }
  8% {
    opacity: 1;
    transform: translate(0, 0);
  }
  14% {
    opacity: 1;
    transform: translate(0, var(--dy));
  }
  15.5% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
  100% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
}
@keyframes w1-id-k1 {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0;
  }
  15.2% {
    opacity: 1;
  }
  44% {
    opacity: 1;
  }
  45.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-act-k1 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  16.2% {
    opacity: 1;
  }
  44% {
    opacity: 1;
  }
  45.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-msg-k2 {
  0% {
    opacity: 0;
  }
  53% {
    opacity: 0;
  }
  54.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-card-k2 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  56.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-dot-k2 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  57% {
    opacity: 0;
    transform: translate(0, 0);
  }
  58% {
    opacity: 1;
    transform: translate(0, 0);
  }
  64% {
    opacity: 1;
    transform: translate(0, var(--dy));
  }
  65.5% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
  100% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
}
@keyframes w1-id-k2 {
  0% {
    opacity: 0;
  }
  64% {
    opacity: 0;
  }
  65.2% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  95.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w1-act-k2 {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  66.2% {
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  95.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a0 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  2% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  6% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a0 {
  0% {
    opacity: 0;
  }
  5.5% {
    opacity: 0;
  }
  6.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a1 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  10% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  14% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a1 {
  0% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  14.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a2 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  18% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  22% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a2 {
  0% {
    opacity: 0;
  }
  21.5% {
    opacity: 0;
  }
  22.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a3 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  26% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  30% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a3 {
  0% {
    opacity: 0;
  }
  29.5% {
    opacity: 0;
  }
  30.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a4 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  34% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  38% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a4 {
  0% {
    opacity: 0;
  }
  37.5% {
    opacity: 0;
  }
  38.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a5 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  42% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  46% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a5 {
  0% {
    opacity: 0;
  }
  45.5% {
    opacity: 0;
  }
  46.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a6 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  60% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  64% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a6 {
  0% {
    opacity: 0;
  }
  63.5% {
    opacity: 0;
  }
  64.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-draw-a7 {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
  68% {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  72% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  93% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes w2-head-a7 {
  0% {
    opacity: 0;
  }
  71.5% {
    opacity: 0;
  }
  72.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-sig {
  0% {
    opacity: 0;
  }
  5.5% {
    opacity: 0;
  }
  6.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-q0 {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  3.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m0 {
  0% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  14.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m1 {
  0% {
    opacity: 0;
  }
  21.5% {
    opacity: 0;
  }
  22.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m2 {
  0% {
    opacity: 0;
  }
  29.5% {
    opacity: 0;
  }
  30.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m3 {
  0% {
    opacity: 0;
  }
  37.5% {
    opacity: 0;
  }
  38.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m4 {
  0% {
    opacity: 0;
  }
  45.5% {
    opacity: 0;
  }
  46.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-q3 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-q1 {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  19.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-q2 {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  27.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-q4 {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-m5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51.2% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-type {
  0% {
    transform: scaleX(1);
  }
  51% {
    transform: scaleX(1);
  }
  57% {
    transform: scaleX(0);
  }
  95% {
    transform: scaleX(0);
  }
  96% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes w2-s0 {
  0% {
    opacity: 0;
  }
  63.5% {
    opacity: 0;
  }
  64.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-s12 {
  0% {
    opacity: 0;
  }
  71.5% {
    opacity: 0;
  }
  72.7% {
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  94.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w2-back {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  78% {
    opacity: 0;
    transform: translateY(6px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  93% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes w3-lit-k1 {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  2.8% {
    opacity: 1;
  }
  11.5% {
    opacity: 1;
  }
  12.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k1 {
  0% {
    opacity: 0;
  }
  2.5% {
    opacity: 0;
  }
  3.3% {
    opacity: 1;
  }
  11.5% {
    opacity: 1;
  }
  12.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k1 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  2.5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  3% {
    opacity: 1;
    transform: translate(0, 0);
  }
  4% {
    transform: translate(var(--x1), var(--y1));
  }
  6.5% {
    transform: translate(var(--x2), var(--y2));
  }
  7.5% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  8.2% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k1 {
  0% {
    opacity: 0;
  }
  7.5% {
    opacity: 0;
  }
  8.3% {
    opacity: 1;
  }
  18.5% {
    opacity: 1;
  }
  19.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-lit-k2 {
  0% {
    opacity: 0;
  }
  14.5% {
    opacity: 0;
  }
  15.3% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  24.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k2 {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  15.8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  24.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k2 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15.5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  16.5% {
    transform: translate(var(--x1), var(--y1));
  }
  19% {
    transform: translate(var(--x2), var(--y2));
  }
  20% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  20.7% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  20.8% {
    opacity: 1;
  }
  31% {
    opacity: 1;
  }
  31.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-lit-k3 {
  0% {
    opacity: 0;
  }
  27% {
    opacity: 0;
  }
  27.8% {
    opacity: 1;
  }
  36.5% {
    opacity: 1;
  }
  37.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k3 {
  0% {
    opacity: 0;
  }
  27.5% {
    opacity: 0;
  }
  28.3% {
    opacity: 1;
  }
  36.5% {
    opacity: 1;
  }
  37.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k3 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  27.5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  28% {
    opacity: 1;
    transform: translate(0, 0);
  }
  29% {
    transform: translate(var(--x1), var(--y1));
  }
  31.5% {
    transform: translate(var(--x2), var(--y2));
  }
  32.5% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  33.2% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k3 {
  0% {
    opacity: 0;
  }
  32.5% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  43.5% {
    opacity: 1;
  }
  44.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-lit-k4 {
  0% {
    opacity: 0;
  }
  39.5% {
    opacity: 0;
  }
  40.3% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  49.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k4 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  40.8% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  49.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k4 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40.5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  41.5% {
    transform: translate(var(--x1), var(--y1));
  }
  44% {
    transform: translate(var(--x2), var(--y2));
  }
  45% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  45.7% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k4 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.8% {
    opacity: 1;
  }
  56% {
    opacity: 1;
  }
  56.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-lit-k5 {
  0% {
    opacity: 0;
  }
  52% {
    opacity: 0;
  }
  52.8% {
    opacity: 1;
  }
  61.5% {
    opacity: 1;
  }
  62.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k5 {
  0% {
    opacity: 0;
  }
  52.5% {
    opacity: 0;
  }
  53.3% {
    opacity: 1;
  }
  61.5% {
    opacity: 1;
  }
  62.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k5 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  52.5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  53% {
    opacity: 1;
    transform: translate(0, 0);
  }
  54% {
    transform: translate(var(--x1), var(--y1));
  }
  56.5% {
    transform: translate(var(--x2), var(--y2));
  }
  57.5% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  58.2% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k5 {
  0% {
    opacity: 0;
  }
  57.5% {
    opacity: 0;
  }
  58.3% {
    opacity: 1;
  }
  68.5% {
    opacity: 1;
  }
  69.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-lit-k6 {
  0% {
    opacity: 0;
  }
  64.5% {
    opacity: 0;
  }
  65.3% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  74.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k6 {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.8% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  74.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k6 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  65% {
    opacity: 0;
    transform: translate(0, 0);
  }
  65.5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  66.5% {
    transform: translate(var(--x1), var(--y1));
  }
  69% {
    transform: translate(var(--x2), var(--y2));
  }
  70% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  70.7% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k6 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  70.8% {
    opacity: 1;
  }
  81% {
    opacity: 1;
  }
  81.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-ok {
  0% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  78% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  97% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-wait {
  0% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  96% {
    opacity: 0;
  }
  97% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes w3-lit-k7 {
  0% {
    opacity: 0;
  }
  79.5% {
    opacity: 0;
  }
  80.3% {
    opacity: 1;
  }
  89% {
    opacity: 1;
  }
  89.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-live-k7 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  80.8% {
    opacity: 1;
  }
  89% {
    opacity: 1;
  }
  89.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes w3-dot-k7 {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  80% {
    opacity: 0;
    transform: translate(0, 0);
  }
  80.5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  81.5% {
    transform: translate(var(--x1), var(--y1));
  }
  84% {
    transform: translate(var(--x2), var(--y2));
  }
  85% {
    opacity: 1;
    transform: translate(var(--x3), var(--y3));
  }
  85.7% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--x3), var(--y3));
  }
}
@keyframes w3-by-k7 {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  85.8% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  97.8% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}