/* ─────────────────────────────────────────────────────────────────────────
   gloss · /lp/:slug/apply, the sentence form (Chris, 28 Oct 2026)

   The screens as drawn on the design canvas "gloss Apply Flows", board "The ad from the research and its form"
   (https://claude.ai/artifact/2sKTRtrzqpZp4aVp3Yw4h3): a 390px column on the form's dark ground, each screen an
   animation and one sentence to finish. The dropdowns, their choice cards and the typed boxes follow the working preview
   of the same form (Research and Simulation, design/one-ad/make_preview.py). The animation styles at the end of this
   file are the board's own, copied as they are; their pictures are in /apply/.

   This file is served by konekt-nextjs, so it goes live with the form. The old form's /landing/apply.css lives in the
   landing-static deployment, which only changes on a manual deploy.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --deep: #0a0e1a;
  --violet: #5a50e4;
  --violet-rich: #3a287f;

  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-h1: 'Zilla Slab', Georgia, serif;
  --font-logo: 'Syne', system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --step-dur: 460ms;

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.68);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100svh;
}

a {
  color: inherit;
}

.apply {
  min-height: 100svh;
  display: grid;
  /* minmax(0, 1fr), not auto: the animations are a fixed 350px wide, and an auto column grows to fit them on a narrower
     phone instead of letting the column shrink and the animations scale down. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Top bar and progress rail ─────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 24px clamp(20px, 5vw, 64px) 0;
}

.topbar__logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.topbar__dot {
  color: var(--violet);
}

.topbar__ref {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rail {
  height: 2px;
  margin: 22px clamp(20px, 5vw, 64px) 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

/* Grown with a transform, not its width, so moving between screens does not re-lay out the page. apply.js sets scaleX. */
.rail__fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-rich), var(--violet));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 620ms var(--ease);
}

/* ── The column ────────────────────────────────────────────────────────── */

.stage {
  display: flex;
  justify-content: center;
  padding: 4px 20px 40px;
}

.flow {
  width: 100%;
  max-width: 350px;
}

.step {
  outline: none;
}

.step[hidden] {
  display: none;
}

.step.is-entering > * {
  animation: stepIn var(--step-dur) var(--ease) both;
}

.step.is-entering > *:nth-child(2) { animation-delay: 40ms; }
.step.is-entering > *:nth-child(3) { animation-delay: 90ms; }
.step.is-entering > *:nth-child(4) { animation-delay: 140ms; }
.step.is-entering > *:nth-child(5) { animation-delay: 185ms; }
.step.is-entering > *:nth-child(6) { animation-delay: 225ms; }
.step.is-entering > *:nth-child(7) { animation-delay: 260ms; }

.step.is-entering.is-reverse > * {
  animation-name: stepInReverse;
}

@keyframes stepIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes stepInReverse {
  from { opacity: 0; transform: translate3d(0, -26px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-entering > * {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

.step__count {
  margin: 18px 0 14px;
  font-family: var(--font-logo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The Shopify question has no count on the canvas, only this gap. */
.step__gap {
  height: 32px;
}

/* The animation is drawn 350px wide. A narrower column scales it down (apply.js sets --s), and the box keeps the scaled
   size so nothing under it moves. On a screen too short for Continue, apply.js scales the showing screen's animation down
   further, and it sits in the middle of the column. */
.anim {
  width: calc(350px * var(--s, 1));
  max-width: 100%;
  margin: 4px auto 18px;
  height: calc(var(--h) * var(--s, 1));
}

.anim > div {
  margin: 0;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

.step__line {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.sentence {
  margin: 0 0 22px;
  font-family: var(--font-h1);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.55;
  color: var(--ink);
}

/* ── The sentence's boxes ──────────────────────────────────────────────── */

.dd {
  position: relative;
  display: inline-block;
}

.dd[hidden] {
  display: none;
}

.dd__btn,
.typed {
  font: 500 18px/1.3 var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  padding: 0 2px 3px;
  margin: 0 2px;
  outline: none;
  appearance: none;
  background-image: linear-gradient(var(--violet), var(--violet));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 520ms var(--ease), box-shadow 300ms var(--ease);
}

.dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dd__btn:focus-visible,
.dd__btn[aria-expanded='true'],
.typed:focus {
  background-size: 100% 2px;
  box-shadow: rgba(90, 80, 228, 0.95) 0 18px 44px -26px;
}

.dd__value.is-empty {
  color: var(--ink-faint);
}

.dd__chev {
  color: var(--ink-faint);
  transition: transform 220ms var(--ease);
}

.dd__btn[aria-expanded='true'] .dd__chev {
  transform: rotate(180deg);
}

.typed {
  font-weight: 300;
  width: 8.5em;
  caret-color: var(--violet);
}

.typed::placeholder {
  color: rgba(255, 255, 255, 0.26);
  font-weight: 300;
}

.typed.other {
  width: 7.5em;
}

.typed[type='email'] {
  width: 10em;
}

/* "What do you use?" after a no to Shopify: the box takes the line under the question, so the placeholder shows whole. */
.more .typed {
  width: 100%;
  margin: 6px 0 0;
}

.typed[hidden] {
  display: none;
}

.typed[aria-invalid='true'] {
  border-bottom-color: #ff6b70;
}

.dd__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 262px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #121726;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font-sans);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.dd__list[hidden] {
  display: none;
}

.dd__list.is-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.043);
  cursor: pointer;
  user-select: none;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}

.chip:hover,
.chip:focus {
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
}

.chip:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.chip__key {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font: 600 12px var(--font-logo);
  color: var(--ink-faint);
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.chip__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-soft);
  transition: color 220ms var(--ease);
}

.chip[aria-selected='true'] {
  border-color: var(--violet);
  background: rgba(90, 80, 228, 0.2);
}

.chip[aria-selected='true'] .chip__key {
  background: var(--violet);
  color: #ffffff;
}

.chip[aria-selected='true'] .chip__label {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .dd__btn,
  .typed,
  .chip,
  .chip__key,
  .chip__label,
  .dd__chev {
    transition-duration: 1ms;
  }
}

/* ── Messages, buttons and the done screen ─────────────────────────────── */

.step__error {
  margin: -10px 0 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #ff8a8f;
}

.step__error[hidden] {
  display: none;
}

.step__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.step__actions:empty {
  display: none;
}

.cta {
  display: inline-block;
  padding: 15px 34px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(90, 80, 228, 0.36);
  cursor: pointer;
  transition: background 200ms, color 200ms, transform 200ms;
}

.cta:hover {
  background: #fff;
  color: var(--violet);
  transform: scale(1.04);
}

.cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cta:disabled,
.cta:disabled:hover {
  background: rgba(120, 122, 138, 0.55);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.cta--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  box-shadow: none;
  font-weight: 600;
}

.cta--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  transform: none;
}

/* Back is an arrow beside Continue, not the word (Chris, 29 Oct 2026), drawn like the storefront arrows on the done screen
   and as tall as Continue. */
.back {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 200ms, color 200ms;
}

.back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.step__echo {
  margin: 14px 0 0;
  font-family: var(--font-h1);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.step__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
}

.step__eyebrow[hidden] {
  display: none;
}

.step__headline {
  margin: 0 0 12px;
  font-family: var(--font-h1);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.step__body {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.step__legal {
  margin: 20px 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.32);
}

.step__legal a {
  color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}

/* ── The ten new ads' opening and phone (apply.js ENTRIES, Chris, 5 Nov 2026) ── */

.entry {
  margin: 0 0 6px;
}

.entry .step__eyebrow {
  margin-bottom: 10px;
}

.entry .step__headline {
  margin-bottom: 10px;
}

.entry__setup {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.entry__setup li + li {
  margin-top: 4px;
}

.entry__setup strong {
  color: var(--ink);
  font-weight: 600;
}

/* The example shop's picture, drawn 350px wide like the animations it stands in for, so apply.js scales it the same way. */
.shot {
  width: 350px;
  height: 336px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shot__phone {
  width: 140px;
  height: 303px;
  margin: 0;
  border: 2px solid #1b2033;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.shot__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot__cap {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-faint);
  text-align: center;
}

/* ── The template storefronts on the done screen ───────────────────────── */

.tpl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.tpl[hidden] {
  display: none;
}

.tpl__pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tpl__opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.043);
  color: var(--ink-soft);
  font: 500 14px/1.25 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease);
}

.tpl__opt:hover {
  border-color: rgba(255, 255, 255, 0.34);
}

.tpl__opt:focus-visible,
.tpl__arrow:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.tpl__opt[aria-pressed='true'] {
  border-color: var(--violet);
  background: rgba(90, 80, 228, 0.2);
  color: var(--ink);
}

.tpl__cat {
  font: 600 11px var(--font-logo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tpl__phone {
  width: min(100%, 300px);
  aspect-ratio: 390 / 844;
  margin: 8px auto 0;
  border: 3px solid #1b2033;
  border-radius: 34px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.tpl__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tpl__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 300px);
  margin: 0 auto;
}

.tpl__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.tpl__arrow:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.34);
}

.tpl__cap {
  flex: 1;
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .tpl__opt {
    transition-duration: 1ms;
  }
}

/* ── Footer, screen-reader text and the honeypot ──────────────────────── */

.footnote {
  padding: 0 clamp(20px, 5vw, 64px) 24px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}

.footnote p {
  margin: 0;
}

.footnote a {
  color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Off screen, never display:none or type=hidden: bots skip both. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── The animations, from the canvas board as they are ─────────────────── */

.ga{position:relative;width:350px;height:354px;margin:4px 0 18px;overflow:hidden}
.gp-layer{position:absolute;left:0;top:0;width:144px;height:294px;overflow:hidden;background:#ffffff}
.gp-tapd{opacity:0;border-radius:50%;border:2px solid #0a0e1a}
.gp-spin{animation:gp-spin .8s linear infinite}
@keyframes gp-spin{to{transform:rotate(360deg)}}
.ga-cycle{animation:ga-cycle 28.200000000000003s ease infinite both}
@keyframes ga-cycle{0%{opacity:0}1.06%,98.58%{opacity:1}100%{opacity:0}}
.gp-arrow{transform-origin:0 50%;animation:gp-arrow 28.200000000000003s ease infinite both}
@keyframes gp-arrow{0%,4.61%{transform:scaleX(0)}5.67%,100%{transform:none}}
.gp-tap{opacity:0;border-radius:50%;border:2px solid #ffffff}
.gp-tap0{animation:gp-tap0 28.200000000000003s ease-out infinite both}
@keyframes gp-tap0{0%{opacity:0;transform:scale(.4)}3.90%{opacity:0;transform:scale(.4)}3.92%{opacity:.9;transform:scale(.4)}6.03%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gp-tap1{animation:gp-tap1 28.200000000000003s ease-out infinite both}
@keyframes gp-tap1{0%{opacity:0;transform:scale(.4)}38.12%{opacity:0;transform:scale(.4)}38.14%{opacity:.9;transform:scale(.4)}41.31%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gp-tap2{animation:gp-tap2 28.200000000000003s ease-out infinite both}
@keyframes gp-tap2{0%{opacity:0;transform:scale(.4)}72.87%{opacity:0;transform:scale(.4)}72.89%{opacity:.9;transform:scale(.4)}75.00%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gp-tap3{animation:gp-tap3 28.200000000000003s ease-out infinite both}
@keyframes gp-tap3{0%{opacity:0;transform:scale(.4)}77.66%{opacity:0;transform:scale(.4)}77.68%{opacity:.9;transform:scale(.4)}79.79%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gp-tap4{animation:gp-tap4 28.200000000000003s ease-out infinite both}
@keyframes gp-tap4{0%{opacity:0;transform:scale(.4)}82.45%{opacity:0;transform:scale(.4)}82.47%{opacity:.9;transform:scale(.4)}84.57%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gp-brand{animation:gp-brand 28.200000000000003s ease-out infinite both}
@keyframes gp-brand{0%{transform:scale(0);opacity:0}41.67%{transform:scale(0);opacity:0}42.41%{transform:scale(1.12);opacity:1}42.73%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gp-donetick{animation:gp-donetick 28.200000000000003s ease-out infinite both}
@keyframes gp-donetick{0%{transform:scale(0);opacity:0}84.57%{transform:scale(0);opacity:0}85.44%{transform:scale(1.12);opacity:1}85.82%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gp-reel{animation:gp-reel 28.200000000000003s ease-out infinite both}
@keyframes gp-reel{0%,73.58%{transform:translateY(100%)}74.82%,100%{transform:none}}
.gp-cart{animation:gp-cart 28.200000000000003s ease-out infinite both}
@keyframes gp-cart{0%,78.37%{transform:translateX(100%)}79.61%,100%{transform:none}}
.gp-done{animation:gp-done 28.200000000000003s ease-out infinite both}
@keyframes gp-done{0%,83.16%{transform:translateY(105%)}84.40%,100%{transform:none}}
.gp-cards{animation:gp-cards 28.200000000000003s ease-in-out infinite both}
@keyframes gp-cards{0%,63.48%{transform:none}64.72%,67.02%{transform:translateX(-114.3px)}68.26%,70.57%{transform:translateX(-228.6px)}71.81%,100%{transform:none}}
.gp-dot0{opacity:0;animation:gp-dot0 28.200000000000003s ease infinite both}
@keyframes gp-dot0{0%,0.00%{opacity:0}1.24%,64.18%{opacity:1}67.02%,100%{opacity:0}}
.gp-dot1{opacity:0;animation:gp-dot1 28.200000000000003s ease infinite both}
@keyframes gp-dot1{0%,64.18%{opacity:0}67.20%,67.73%{opacity:1}70.57%,100%{opacity:0}}
.gp-dot2{opacity:0;animation:gp-dot2 28.200000000000003s ease infinite both}
@keyframes gp-dot2{0%,67.73%{opacity:0}70.74%,71.28%{opacity:1}73.05%,100%{opacity:0}}
.gp-dotback{animation:gp-dotback 28.200000000000003s ease infinite both}
@keyframes gp-dotback{0%,71.28%{opacity:0}73.23%,100%{opacity:1}}
.ga-in::placeholder{color:rgba(255,255,255,0.26);font-weight:300}
@property --gps{syntax:'<integer>';inherits:false;initial-value:0}
.gp-sec{--gps:7;counter-reset:gps var(--gps);animation:gp-sec 28.200000000000003s step-end infinite both}
.gp-sec::after{content:counter(gps) 's'}
@keyframes gp-sec{0%,6.03%{--gps:0}6.94%{--gps:1}7.85%{--gps:2}8.76%{--gps:3}9.68%{--gps:4}10.59%{--gps:5}11.50%{--gps:6}12.41%,100%{--gps:7}}
.gp-hand{transform-origin:7px 8px;animation:gp-hand .6s linear infinite}
@keyframes gp-hand{to{transform:rotate(360deg)}}
@property --gpc{syntax:'<integer>';inherits:false;initial-value:0}
.gp-count{--gpc:15;counter-reset:gpc var(--gpc);animation:gp-count 28.200000000000003s step-end infinite both}
.gp-count::after{content:counter(gpc)}
@keyframes gp-count{0%,21.63%{--gpc:0}22.01%{--gpc:1}22.39%{--gpc:2}22.76%{--gpc:3}23.14%{--gpc:4}23.52%{--gpc:5}23.90%{--gpc:6}24.28%{--gpc:7}24.65%{--gpc:8}25.03%{--gpc:9}25.41%{--gpc:10}25.79%{--gpc:11}26.17%{--gpc:12}26.54%{--gpc:13}26.92%{--gpc:14}27.30%,100%{--gpc:15}}
.gp-ind-clock-bad{opacity:0;animation:gp-ind-clock-bad 28.200000000000003s ease infinite both}
@keyframes gp-ind-clock-bad{0%,5.67%{opacity:0}6.91%,13.48%{opacity:1}14.54%,100%{opacity:0}}
.gp-ind-clock-good{opacity:0;animation:gp-ind-clock-good 28.200000000000003s ease infinite both}
@keyframes gp-ind-clock-good{0%,38.65%{opacity:0}39.89%,49.29%{opacity:1}50.35%,100%{opacity:0}}
.gp-ind-page-bad{opacity:0;animation:gp-ind-page-bad 28.200000000000003s ease infinite both}
@keyframes gp-ind-page-bad{0%,13.48%{opacity:0}14.72%,21.28%{opacity:1}22.34%,100%{opacity:0}}
.gp-ind-page-good{opacity:0;animation:gp-ind-page-good 28.200000000000003s ease infinite both}
@keyframes gp-ind-page-good{0%,49.29%{opacity:0}50.53%,57.45%{opacity:1}58.51%,100%{opacity:0}}
.gp-ind-grid-bad{opacity:0;animation:gp-ind-grid-bad 28.200000000000003s ease infinite both}
@keyframes gp-ind-grid-bad{0%,21.28%{opacity:0}22.52%,29.08%{opacity:1}30.14%,100%{opacity:0}}
.gp-ind-grid-good{opacity:0;animation:gp-ind-grid-good 28.200000000000003s ease infinite both}
@keyframes gp-ind-grid-good{0%,57.45%{opacity:0}58.69%,71.81%{opacity:1}73.58%,100%{opacity:0}}
.gp-ind-bag-bad{opacity:0;animation:gp-ind-bag-bad 28.200000000000003s ease infinite both}
@keyframes gp-ind-bag-bad{0%,29.26%{opacity:0}30.50%,38.30%{opacity:1}39.36%,100%{opacity:0}}
.gp-ind-bag-good{animation:gp-ind-bag-good 28.200000000000003s ease infinite both}
@keyframes gp-ind-bag-good{0%,85.64%{opacity:0}86.88%,100%{opacity:1}}
.gp-creative{animation:gp-creative 28.200000000000003s ease infinite both}
@keyframes gp-creative{0%,0.00%{opacity:0;transform:translateX(-12px)}1.24%,100%{opacity:1;transform:none}}
.gp-tags{animation:gp-tags 28.200000000000003s ease infinite both}
@keyframes gp-tags{0%,1.24%{opacity:0}3.90%,100%{opacity:1}}
.gp-old{opacity:0;animation:gp-old 28.200000000000003s ease infinite both}
@keyframes gp-old{0%,0.00%{opacity:0}1.24%,38.30%{opacity:1}39.36%,100%{opacity:0}}
.gp-new{animation:gp-new 28.200000000000003s ease infinite both}
@keyframes gp-new{0%,38.65%{opacity:0}39.89%,100%{opacity:1}}
.gp-slow{opacity:0;animation:gp-slow 28.200000000000003s ease infinite both}
@keyframes gp-slow{0%,5.67%{opacity:0}6.91%,13.48%{opacity:1}14.54%,100%{opacity:0}}
.gp-generic{opacity:0;animation:gp-generic 28.200000000000003s ease infinite both}
@keyframes gp-generic{0%,13.48%{opacity:0}14.72%,21.28%{opacity:1}22.34%,100%{opacity:0}}
.gp-crowd{opacity:0;animation:gp-crowd 28.200000000000003s ease infinite both}
@keyframes gp-crowd{0%,21.28%{opacity:0}22.52%,38.65%{opacity:1}39.72%,100%{opacity:0}}
.gp-gloss{animation:gp-gloss 28.200000000000003s ease infinite both}
@keyframes gp-gloss{0%,38.65%{opacity:0;transform:translateX(30px)}39.89%,100%{opacity:1;transform:none}}
.gp-bad0{opacity:0;animation:gp-bad0 28.200000000000003s ease-in-out infinite both}
@keyframes gp-bad0{0%,6.56%{opacity:0;transform:translate(255px,-71px) translateX(-50%) scale(1.15)}7.45%,11.88%{opacity:1;transform:translate(255px,-71px) translateX(-50%) scale(1.15)}13.30%,48.23%{opacity:1;transform:none}49.29%,100%{opacity:0;transform:none}}
.gp-good0{animation:gp-good0 28.200000000000003s ease-in-out infinite both}
@keyframes gp-good0{0%,41.84%{opacity:0;transform:translate(255px,-71px) translateX(-50%) scale(1.15)}42.73%,47.16%{opacity:1;transform:translate(255px,-71px) translateX(-50%) scale(1.15)}48.58%,100%{opacity:1;transform:none}}
.gp-bad1{opacity:0;animation:gp-bad1 28.200000000000003s ease-in-out infinite both}
@keyframes gp-bad1{0%,14.36%{opacity:0;transform:translate(255px,-98px) translateX(-50%) scale(1.15)}15.25%,19.68%{opacity:1;transform:translate(255px,-98px) translateX(-50%) scale(1.15)}21.10%,56.38%{opacity:1;transform:none}57.45%,100%{opacity:0;transform:none}}
.gp-good1{animation:gp-good1 28.200000000000003s ease-in-out infinite both}
@keyframes gp-good1{0%,50.00%{opacity:0;transform:translate(255px,-98px) translateX(-50%) scale(1.15)}50.89%,55.32%{opacity:1;transform:translate(255px,-98px) translateX(-50%) scale(1.15)}56.74%,100%{opacity:1;transform:none}}
.gp-bad2{opacity:0;animation:gp-bad2 28.200000000000003s ease-in-out infinite both}
@keyframes gp-bad2{0%,22.16%{opacity:0;transform:translate(255px,-125px) translateX(-50%) scale(1.15)}23.05%,27.48%{opacity:1;transform:translate(255px,-125px) translateX(-50%) scale(1.15)}28.90%,64.54%{opacity:1;transform:none}67.38%,100%{opacity:0;transform:none}}
.gp-good2{animation:gp-good2 28.200000000000003s ease-in-out infinite both}
@keyframes gp-good2{0%,58.16%{opacity:0;transform:translate(255px,-125px) translateX(-50%) scale(1.15)}59.04%,63.48%{opacity:1;transform:translate(255px,-125px) translateX(-50%) scale(1.15)}64.89%,100%{opacity:1;transform:none}}
.gp-bad3{opacity:0;animation:gp-bad3 28.200000000000003s ease-in-out infinite both}
@keyframes gp-bad3{0%,29.26%{opacity:0;transform:translate(255px,-152px) translateX(-50%) scale(1.15)}30.14%,34.57%{opacity:1;transform:translate(255px,-152px) translateX(-50%) scale(1.15)}35.99%,92.02%{opacity:1;transform:none}93.09%,100%{opacity:0;transform:none}}
.gp-good3{animation:gp-good3 28.200000000000003s ease-in-out infinite both}
@keyframes gp-good3{0%,85.64%{opacity:0;transform:translate(255px,-152px) translateX(-50%) scale(1.15)}86.52%,90.96%{opacity:1;transform:translate(255px,-152px) translateX(-50%) scale(1.15)}92.38%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ga *{animation:none !important}}

.ga2{position:relative;width:350px;height:344px;margin:4px 0 18px;overflow:hidden}
.ga2-cycle{animation:ga2-cycle 18.2s ease infinite both}
@keyframes ga2-cycle{0%{opacity:0}1.65%,97.80%{opacity:1}100%{opacity:0}}
.gf-without{opacity:0;animation:gf-without 18.2s ease infinite both}
@keyframes gf-without{0%,0.00%{opacity:0}1.65%,25.82%{opacity:1}27.47%,100%{opacity:0}}
.gf-with{animation:gf-with 18.2s ease infinite both}
@keyframes gf-with{0%,26.37%{opacity:0}28.02%,100%{opacity:1}}
.gf-funnel{opacity:0;animation:gf-funnel 18.2s ease infinite both}
@keyframes gf-funnel{0%,0.00%{opacity:0}1.65%,51.65%{opacity:1}53.30%,100%{opacity:0}}
.gf-graph{opacity:0;animation:gf-graph 18.2s ease infinite both}
@keyframes gf-graph{0%,53.30%{opacity:0}54.95%,73.63%{opacity:1}75.27%,100%{opacity:0}}
.gf-happy{animation:gf-happy 18.2s ease infinite both}
@keyframes gf-happy{0%,74.73%{opacity:0;transform:translateY(8px)}76.37%,100%{opacity:1;transform:none}}
.gf-say-without{opacity:0;animation:gf-say-without 18.2s ease infinite both}
@keyframes gf-say-without{0%,12.09%{opacity:0}13.74%,25.82%{opacity:1}27.47%,100%{opacity:0}}
.gf-say-with{opacity:0;animation:gf-say-with 18.2s ease infinite both}
@keyframes gf-say-with{0%,35.16%{opacity:0}36.81%,51.65%{opacity:1}53.30%,100%{opacity:0}}
.gf-bad0{opacity:0;animation:gf-bad0 18.2s ease infinite both}
@keyframes gf-bad0{0%,2.75%{opacity:0}4.40%,26.37%{opacity:1}28.02%,100%{opacity:0}}
.gf-good0{animation:gf-good0 18.2s ease infinite both}
@keyframes gf-good0{0%,27.20%{opacity:0}28.85%,100%{opacity:1}}
.gf-patch0{animation:gf-patch0 18.2s ease-out infinite both}
@keyframes gf-patch0{0%,26.37%{transform:scale(0)}27.47%{transform:scale(1.15)}28.02%,100%{transform:none}}
.gf-bad1{opacity:0;animation:gf-bad1 18.2s ease infinite both}
@keyframes gf-bad1{0%,6.04%{opacity:0}7.69%,28.02%{opacity:1}29.67%,100%{opacity:0}}
.gf-good1{animation:gf-good1 18.2s ease infinite both}
@keyframes gf-good1{0%,28.85%{opacity:0}30.49%,100%{opacity:1}}
.gf-patch1{animation:gf-patch1 18.2s ease-out infinite both}
@keyframes gf-patch1{0%,28.02%{transform:scale(0)}29.12%{transform:scale(1.15)}29.67%,100%{transform:none}}
.gf-bad2{opacity:0;animation:gf-bad2 18.2s ease infinite both}
@keyframes gf-bad2{0%,9.34%{opacity:0}10.99%,29.67%{opacity:1}31.32%,100%{opacity:0}}
.gf-good2{animation:gf-good2 18.2s ease infinite both}
@keyframes gf-good2{0%,30.49%{opacity:0}32.14%,100%{opacity:1}}
.gf-patch2{animation:gf-patch2 18.2s ease-out infinite both}
@keyframes gf-patch2{0%,29.67%{transform:scale(0)}30.77%{transform:scale(1.15)}31.32%,100%{transform:none}}
.gf-pp0{opacity:0;color:#ffffff;animation:gf-pp0 18.2s linear infinite both}
@keyframes gf-pp0{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}3.30%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}3.57%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}5.77%{transform:translate(-34.4px,34.9px);opacity:1;color:#ffffff}6.59%{transform:translate(-54.4px,38.9px);opacity:1;color:#e5484d}8.79%{transform:translate(-74.4px,82.9px);opacity:0;color:#e5484d}100.00%{transform:translate(-74.4px,82.9px);opacity:0;color:#e5484d}}
.gf-pp1{opacity:0;color:#ffffff;animation:gf-pp1 18.2s linear infinite both}
@keyframes gf-pp1{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}5.77%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}6.04%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}8.24%{transform:translate(30.5px,59.0px);opacity:1;color:#ffffff}9.07%{transform:translate(50.5px,63.0px);opacity:1;color:#e5484d}11.26%{transform:translate(70.5px,107.0px);opacity:0;color:#e5484d}100.00%{transform:translate(70.5px,107.0px);opacity:0;color:#e5484d}}
.gf-pp2{opacity:0;color:#ffffff;animation:gf-pp2 18.2s linear infinite both}
@keyframes gf-pp2{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}8.24%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}8.52%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}10.71%{transform:translate(-35.3px,91.2px);opacity:1;color:#ffffff}11.54%{transform:translate(-55.3px,95.2px);opacity:1;color:#e5484d}13.74%{transform:translate(-75.3px,139.2px);opacity:0;color:#e5484d}100.00%{transform:translate(-75.3px,139.2px);opacity:0;color:#e5484d}}
.gf-pp3{opacity:0;color:#ffffff;animation:gf-pp3 18.2s linear infinite both}
@keyframes gf-pp3{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}10.71%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}10.99%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}13.19%{transform:translate(-70.0px,98.0px);opacity:1;color:#ffffff}14.56%{transform:translate(-70.0px,188.0px);opacity:1;color:#1f9d55}15.38%{transform:translate(-70.0px,216.0px);opacity:1;color:#1f9d55}16.21%{transform:translate(-70.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(-70.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp4{opacity:0;color:#ffffff;animation:gf-pp4 18.2s linear infinite both}
@keyframes gf-pp4{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}13.19%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}13.46%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}15.66%{transform:translate(-54.4px,34.9px);opacity:1;color:#ffffff}16.48%{transform:translate(-74.4px,38.9px);opacity:1;color:#e5484d}18.68%{transform:translate(-94.4px,82.9px);opacity:0;color:#e5484d}100.00%{transform:translate(-94.4px,82.9px);opacity:0;color:#e5484d}}
.gf-pp5{opacity:0;color:#ffffff;animation:gf-pp5 18.2s linear infinite both}
@keyframes gf-pp5{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}15.66%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}15.93%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}18.13%{transform:translate(55.5px,59.0px);opacity:1;color:#ffffff}18.96%{transform:translate(75.5px,63.0px);opacity:1;color:#e5484d}21.15%{transform:translate(95.5px,107.0px);opacity:0;color:#e5484d}100.00%{transform:translate(95.5px,107.0px);opacity:0;color:#e5484d}}
.gf-pp6{opacity:0;color:#ffffff;animation:gf-pp6 18.2s linear infinite both}
@keyframes gf-pp6{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}18.13%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}18.41%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}20.60%{transform:translate(-100.3px,91.2px);opacity:1;color:#ffffff}21.43%{transform:translate(-120.3px,95.2px);opacity:1;color:#e5484d}23.63%{transform:translate(-140.3px,139.2px);opacity:0;color:#e5484d}100.00%{transform:translate(-140.3px,139.2px);opacity:0;color:#e5484d}}
.gf-pp7{opacity:0;color:#ffffff;animation:gf-pp7 18.2s linear infinite both}
@keyframes gf-pp7{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}31.87%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}32.14%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}34.34%{transform:translate(55.0px,98.0px);opacity:1;color:#ffffff}35.71%{transform:translate(55.0px,188.0px);opacity:1;color:#1f9d55}36.54%{transform:translate(55.0px,216.0px);opacity:1;color:#1f9d55}37.36%{transform:translate(55.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(55.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp8{opacity:0;color:#ffffff;animation:gf-pp8 18.2s linear infinite both}
@keyframes gf-pp8{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}33.24%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}33.52%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}35.71%{transform:translate(-40.0px,98.0px);opacity:1;color:#ffffff}37.09%{transform:translate(-40.0px,188.0px);opacity:1;color:#1f9d55}37.91%{transform:translate(-40.0px,216.0px);opacity:1;color:#1f9d55}38.74%{transform:translate(-40.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(-40.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp9{opacity:0;color:#ffffff;animation:gf-pp9 18.2s linear infinite both}
@keyframes gf-pp9{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}34.62%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}34.89%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}37.09%{transform:translate(10.0px,98.0px);opacity:1;color:#ffffff}38.46%{transform:translate(10.0px,188.0px);opacity:1;color:#1f9d55}39.29%{transform:translate(10.0px,216.0px);opacity:1;color:#1f9d55}40.11%{transform:translate(10.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(10.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp10{opacity:0;color:#ffffff;animation:gf-pp10 18.2s linear infinite both}
@keyframes gf-pp10{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}35.99%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}36.26%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}38.46%{transform:translate(-70.0px,98.0px);opacity:1;color:#ffffff}39.84%{transform:translate(-70.0px,188.0px);opacity:1;color:#1f9d55}40.66%{transform:translate(-70.0px,216.0px);opacity:1;color:#1f9d55}41.48%{transform:translate(-70.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(-70.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp11{opacity:0;color:#ffffff;animation:gf-pp11 18.2s linear infinite both}
@keyframes gf-pp11{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}37.36%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}37.64%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}39.84%{transform:translate(35.0px,98.0px);opacity:1;color:#ffffff}41.21%{transform:translate(35.0px,188.0px);opacity:1;color:#1f9d55}42.03%{transform:translate(35.0px,216.0px);opacity:1;color:#1f9d55}42.86%{transform:translate(35.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(35.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp12{opacity:0;color:#ffffff;animation:gf-pp12 18.2s linear infinite both}
@keyframes gf-pp12{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}38.74%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}39.01%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}41.21%{transform:translate(-15.0px,98.0px);opacity:1;color:#ffffff}42.58%{transform:translate(-15.0px,188.0px);opacity:1;color:#1f9d55}43.41%{transform:translate(-15.0px,216.0px);opacity:1;color:#1f9d55}44.23%{transform:translate(-15.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(-15.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-pp13{opacity:0;color:#ffffff;animation:gf-pp13 18.2s linear infinite both}
@keyframes gf-pp13{0.00%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}40.11%{transform:translate(0.0px,0.0px);opacity:0;color:#ffffff}40.38%{transform:translate(0.0px,0.0px);opacity:1;color:#ffffff}42.58%{transform:translate(-55.0px,98.0px);opacity:1;color:#ffffff}43.96%{transform:translate(-55.0px,188.0px);opacity:1;color:#1f9d55}44.78%{transform:translate(-55.0px,216.0px);opacity:1;color:#1f9d55}45.60%{transform:translate(-55.0px,220.0px);opacity:0;color:#1f9d55}100.00%{transform:translate(-55.0px,220.0px);opacity:0;color:#1f9d55}}
.gf-line{stroke-dasharray:360;animation:gf-line 18.2s linear infinite both}
@keyframes gf-line{0%,54.95%{stroke-dashoffset:360}64.84%,100%{stroke-dashoffset:0}}
@property --gfn{syntax:'<integer>';inherits:false;initial-value:0}
.gf-count{--gfn:128;counter-reset:gfn var(--gfn);animation:gf-count 18.2s step-end infinite both}
.gf-count::after{content:counter(gfn)}
@keyframes gf-count{0%{--gfn:0}55.15%{--gfn:1}55.35%{--gfn:2}55.55%{--gfn:3}55.75%{--gfn:4}55.95%{--gfn:5}56.15%{--gfn:6}56.35%{--gfn:7}56.48%{--gfn:8}56.61%{--gfn:9}56.74%{--gfn:10}56.87%{--gfn:11}57.00%{--gfn:12}57.13%{--gfn:13}57.26%{--gfn:14}57.39%{--gfn:15}57.52%{--gfn:16}57.65%{--gfn:17}57.78%{--gfn:18}57.87%{--gfn:19}57.95%{--gfn:20}58.03%{--gfn:21}58.12%{--gfn:22}58.20%{--gfn:23}58.28%{--gfn:24}58.37%{--gfn:25}58.45%{--gfn:26}58.53%{--gfn:27}58.61%{--gfn:28}58.70%{--gfn:29}58.78%{--gfn:30}58.86%{--gfn:31}58.95%{--gfn:32}59.03%{--gfn:33}59.11%{--gfn:34}59.20%{--gfn:35}59.28%{--gfn:36}59.36%{--gfn:37}59.43%{--gfn:38}59.50%{--gfn:39}59.56%{--gfn:40}59.63%{--gfn:41}59.70%{--gfn:42}59.77%{--gfn:43}59.83%{--gfn:44}59.90%{--gfn:45}59.97%{--gfn:46}60.04%{--gfn:47}60.11%{--gfn:48}60.17%{--gfn:49}60.24%{--gfn:50}60.31%{--gfn:51}60.38%{--gfn:52}60.44%{--gfn:53}60.51%{--gfn:54}60.58%{--gfn:55}60.65%{--gfn:56}60.71%{--gfn:57}60.78%{--gfn:58}60.85%{--gfn:59}60.92%{--gfn:60}60.99%{--gfn:61}61.05%{--gfn:62}61.11%{--gfn:63}61.17%{--gfn:64}61.23%{--gfn:65}61.29%{--gfn:66}61.35%{--gfn:67}61.40%{--gfn:68}61.46%{--gfn:69}61.52%{--gfn:70}61.58%{--gfn:71}61.64%{--gfn:72}61.70%{--gfn:73}61.76%{--gfn:74}61.82%{--gfn:75}61.87%{--gfn:76}61.93%{--gfn:77}61.99%{--gfn:78}62.05%{--gfn:79}62.11%{--gfn:80}62.17%{--gfn:81}62.23%{--gfn:82}62.29%{--gfn:83}62.34%{--gfn:84}62.40%{--gfn:85}62.46%{--gfn:86}62.52%{--gfn:87}62.58%{--gfn:88}62.64%{--gfn:89}62.70%{--gfn:90}62.75%{--gfn:91}62.81%{--gfn:92}62.87%{--gfn:93}62.93%{--gfn:94}62.98%{--gfn:95}63.04%{--gfn:96}63.10%{--gfn:97}63.15%{--gfn:98}63.21%{--gfn:99}63.26%{--gfn:100}63.32%{--gfn:101}63.38%{--gfn:102}63.43%{--gfn:103}63.49%{--gfn:104}63.55%{--gfn:105}63.60%{--gfn:106}63.66%{--gfn:107}63.71%{--gfn:108}63.77%{--gfn:109}63.83%{--gfn:110}63.88%{--gfn:111}63.94%{--gfn:112}63.99%{--gfn:113}64.05%{--gfn:114}64.11%{--gfn:115}64.16%{--gfn:116}64.22%{--gfn:117}64.27%{--gfn:118}64.33%{--gfn:119}64.39%{--gfn:120}64.44%{--gfn:121}64.50%{--gfn:122}64.55%{--gfn:123}64.61%{--gfn:124}64.67%{--gfn:125}64.72%{--gfn:126}64.78%{--gfn:127}64.84%{--gfn:128}100%{--gfn:128}}
.gf-area{animation:gf-area 18.2s ease infinite both}
@keyframes gf-area{0%,57.69%{opacity:0}59.34%,100%{opacity:1}}
.gf-arrow{animation:gf-arrow 18.2s ease infinite both}
@keyframes gf-arrow{0%,64.56%{opacity:0}66.21%,100%{opacity:1}}
.gf-tag{animation:gf-tag 18.2s ease-out infinite both}
@keyframes gf-tag{0%,78.02%{transform:scale(0);opacity:0}79.12%{transform:scale(1.1);opacity:1}79.67%,100%{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.ga2 *{animation:none !important}}

.ga3{position:relative;width:350px;height:330px;margin:4px 0 18px;overflow:hidden}
.ga3-cycle{animation:ga3-cycle 27.8s ease infinite both}
@keyframes ga3-cycle{0%{opacity:0}1.08%,98.56%{opacity:1}100%{opacity:0}}
.gc-layer{position:absolute;left:0;top:0;width:144px;height:294px;overflow:hidden;background:#ffffff}
.gc-tap{opacity:0;border-radius:50%;border:2px solid #ffffff}
.gc-tapd{opacity:0;border-radius:50%;border:2px solid #0a0e1a}
.gc-nudge-x{animation:gc-nudge-x 1s ease-in-out infinite}
@keyframes gc-nudge-x{0%,100%{transform:none}50%{transform:translateX(-6px)}}
.gc-nudge-y{animation:gc-nudge-y 1s ease-in-out infinite}
@keyframes gc-nudge-y{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.gc-act0{opacity:0;animation:gc-act0 27.8s ease infinite both}
@keyframes gc-act0{0%,0.72%{opacity:0}1.80%,13.31%{opacity:1}14.39%,100%{opacity:0}}
.gc-done0{animation:gc-done0 27.8s ease infinite both}
@keyframes gc-done0{0%,13.31%{opacity:0}14.39%,100%{opacity:1}}
.gc-act1{opacity:0;animation:gc-act1 27.8s ease infinite both}
@keyframes gc-act1{0%,13.31%{opacity:0}14.39%,29.50%{opacity:1}30.58%,100%{opacity:0}}
.gc-done1{animation:gc-done1 27.8s ease infinite both}
@keyframes gc-done1{0%,29.50%{opacity:0}30.58%,100%{opacity:1}}
.gc-act2{opacity:0;animation:gc-act2 27.8s ease infinite both}
@keyframes gc-act2{0%,29.50%{opacity:0}30.58%,40.65%{opacity:1}41.73%,100%{opacity:0}}
.gc-done2{animation:gc-done2 27.8s ease infinite both}
@keyframes gc-done2{0%,40.65%{opacity:0}41.73%,100%{opacity:1}}
.gc-act3{opacity:0;animation:gc-act3 27.8s ease infinite both}
@keyframes gc-act3{0%,40.65%{opacity:0}41.73%,54.32%{opacity:1}57.19%,100%{opacity:0}}
.gc-done3{animation:gc-done3 27.8s ease infinite both}
@keyframes gc-done3{0%,54.32%{opacity:0}57.19%,100%{opacity:1}}
.gc-act4{opacity:0;animation:gc-act4 27.8s ease infinite both}
@keyframes gc-act4{0%,54.32%{opacity:0}57.19%,92.09%{opacity:1}93.17%,100%{opacity:0}}
.gc-done4{animation:gc-done4 27.8s ease infinite both}
@keyframes gc-done4{0%,92.09%{opacity:0}93.17%,100%{opacity:1}}
.gc-t0{opacity:0;animation:gc-t0 27.8s ease infinite both}
@keyframes gc-t0{0%,0.72%{opacity:0}1.80%,12.95%{opacity:1}14.03%,100%{opacity:0}}
.gc-t1{opacity:0;animation:gc-t1 27.8s ease infinite both}
@keyframes gc-t1{0%,13.31%{opacity:0}14.39%,29.14%{opacity:1}30.22%,100%{opacity:0}}
.gc-t2{opacity:0;animation:gc-t2 27.8s ease infinite both}
@keyframes gc-t2{0%,29.50%{opacity:0}30.58%,40.29%{opacity:1}41.37%,100%{opacity:0}}
.gc-t3{opacity:0;animation:gc-t3 27.8s ease infinite both}
@keyframes gc-t3{0%,40.65%{opacity:0}41.73%,53.60%{opacity:1}54.68%,100%{opacity:0}}
.gc-t4{opacity:0;animation:gc-t4 27.8s ease infinite both}
@keyframes gc-t4{0%,53.96%{opacity:0}55.04%,59.35%{opacity:1}60.43%,100%{opacity:0}}
.gc-t5{opacity:0;animation:gc-t5 27.8s ease infinite both}
@keyframes gc-t5{0%,59.71%{opacity:0}60.79%,67.63%{opacity:1}68.71%,100%{opacity:0}}
.gc-t6{opacity:0;animation:gc-t6 27.8s ease infinite both}
@keyframes gc-t6{0%,67.99%{opacity:0}69.06%,77.70%{opacity:1}80.22%,100%{opacity:0}}
.gc-t7{animation:gc-t7 27.8s ease infinite both}
@keyframes gc-t7{0%,79.50%{opacity:0}80.58%,100%{opacity:1}}
.gc-connect{opacity:0;animation:gc-connect 27.8s ease infinite both}
@keyframes gc-connect{0%,0.72%{opacity:0}1.80%,12.95%{opacity:1}14.03%,100%{opacity:0}}
.gc-btn{opacity:0;animation:gc-btn 27.8s ease infinite both}
@keyframes gc-btn{0%,0.00%{opacity:0}1.08%,7.37%{opacity:1}8.45%,100%{opacity:0}}
.gc-ok{animation:gc-ok 27.8s ease infinite both}
@keyframes gc-ok{0%,7.37%{opacity:0}8.45%,100%{opacity:1}}
.gc-tap0{animation:gc-tap0 27.8s ease-out infinite both}
@keyframes gc-tap0{0%{opacity:0;transform:scale(.4)}6.47%{opacity:0;transform:scale(.4)}6.50%{opacity:.9;transform:scale(.4)}8.63%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-grid{opacity:0;animation:gc-grid 27.8s ease infinite both}
@keyframes gc-grid{0%,13.31%{opacity:0}14.39%,28.78%{opacity:1}29.86%,100%{opacity:0}}
.gc-p0{animation:gc-p0 27.8s ease infinite both}
@keyframes gc-p0{0%,13.67%{opacity:0;transform:translate(-14px,-18px) scale(.8)}14.75%,100%{opacity:1;transform:none}}
.gc-p1{animation:gc-p1 27.8s ease infinite both}
@keyframes gc-p1{0%,14.32%{opacity:0;transform:translate(-14px,-18px) scale(.8)}15.40%,100%{opacity:1;transform:none}}
.gc-p2{animation:gc-p2 27.8s ease infinite both}
@keyframes gc-p2{0%,14.96%{opacity:0;transform:translate(-14px,-18px) scale(.8)}16.04%,100%{opacity:1;transform:none}}
.gc-p3{animation:gc-p3 27.8s ease infinite both}
@keyframes gc-p3{0%,15.61%{opacity:0;transform:translate(-14px,-18px) scale(.8)}16.69%,100%{opacity:1;transform:none}}
.gc-p4{animation:gc-p4 27.8s ease infinite both}
@keyframes gc-p4{0%,16.26%{opacity:0;transform:translate(-14px,-18px) scale(.8)}17.34%,100%{opacity:1;transform:none}}
.gc-p5{animation:gc-p5 27.8s ease infinite both}
@keyframes gc-p5{0%,16.91%{opacity:0;transform:translate(-14px,-18px) scale(.8)}17.99%,100%{opacity:1;transform:none}}
.gc-p6{animation:gc-p6 27.8s ease infinite both}
@keyframes gc-p6{0%,17.55%{opacity:0;transform:translate(-14px,-18px) scale(.8)}18.63%,100%{opacity:1;transform:none}}
.gc-p7{animation:gc-p7 27.8s ease infinite both}
@keyframes gc-p7{0%,18.20%{opacity:0;transform:translate(-14px,-18px) scale(.8)}19.28%,100%{opacity:1;transform:none}}
.gc-p8{animation:gc-p8 27.8s ease infinite both}
@keyframes gc-p8{0%,18.85%{opacity:0;transform:translate(-14px,-18px) scale(.8)}19.93%,100%{opacity:1;transform:none}}
.gc-tick0{animation:gc-tick0 27.8s ease-out infinite both}
@keyframes gc-tick0{0%{transform:scale(0);opacity:0}21.94%{transform:scale(0);opacity:0}22.82%{transform:scale(1.12);opacity:1}23.20%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-fly0{opacity:0;animation:gc-fly0 27.8s ease-out infinite both}
@keyframes gc-fly0{0%{opacity:0;transform:none}27.34%{opacity:0;transform:none}27.36%{opacity:1;transform:none}29.14%{opacity:0;transform:translate(240px,101px) scale(.5)}100%{opacity:0;transform:translate(240px,101px) scale(.5)}}
.gc-tick1{animation:gc-tick1 27.8s ease-out infinite both}
@keyframes gc-tick1{0%{transform:scale(0);opacity:0}22.66%{transform:scale(0);opacity:0}23.54%{transform:scale(1.12);opacity:1}23.92%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-fly1{opacity:0;animation:gc-fly1 27.8s ease-out infinite both}
@keyframes gc-fly1{0%{opacity:0;transform:none}27.70%{opacity:0;transform:none}27.72%{opacity:1;transform:none}29.50%{opacity:0;transform:translate(124px,101px) scale(.5)}100%{opacity:0;transform:translate(124px,101px) scale(.5)}}
.gc-tick2{animation:gc-tick2 27.8s ease-out infinite both}
@keyframes gc-tick2{0%{transform:scale(0);opacity:0}23.38%{transform:scale(0);opacity:0}24.26%{transform:scale(1.12);opacity:1}24.64%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-fly2{opacity:0;animation:gc-fly2 27.8s ease-out infinite both}
@keyframes gc-fly2{0%{opacity:0;transform:none}28.06%{opacity:0;transform:none}28.08%{opacity:1;transform:none}29.86%{opacity:0;transform:translate(182px,45px) scale(.5)}100%{opacity:0;transform:translate(182px,45px) scale(.5)}}
.gc-tick3{animation:gc-tick3 27.8s ease-out infinite both}
@keyframes gc-tick3{0%{transform:scale(0);opacity:0}24.10%{transform:scale(0);opacity:0}24.98%{transform:scale(1.12);opacity:1}25.36%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-fly3{opacity:0;animation:gc-fly3 27.8s ease-out infinite both}
@keyframes gc-fly3{0%{opacity:0;transform:none}28.42%{opacity:0;transform:none}28.44%{opacity:1;transform:none}30.22%{opacity:0;transform:translate(240px,-11px) scale(.5)}100%{opacity:0;transform:translate(240px,-11px) scale(.5)}}
.gc-front{animation:gc-front 27.8s ease infinite both}
@keyframes gc-front{0%,28.78%{opacity:0}29.86%,100%{opacity:1}}
.gc-built{opacity:0;animation:gc-built 27.8s ease infinite both}
@keyframes gc-built{0%,29.32%{opacity:0;transform:translateY(6px)}30.40%,40.29%{opacity:1;transform:none}41.37%,100%{opacity:0;transform:translateY(6px)}}
.gc-launch{opacity:0;animation:gc-launch 27.8s ease infinite both}
@keyframes gc-launch{0%,29.50%{opacity:0}30.58%,40.29%{opacity:1}41.37%,100%{opacity:0}}
.gc-tap1{animation:gc-tap1 27.8s ease-out infinite both}
@keyframes gc-tap1{0%{opacity:0;transform:scale(.4)}33.45%{opacity:0;transform:scale(.4)}33.47%{opacity:.9;transform:scale(.4)}35.61%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-b-launch{opacity:0;animation:gc-b-launch 27.8s ease infinite both}
@keyframes gc-b-launch{0%,0.00%{opacity:0}1.08%,33.99%{opacity:1}35.07%,100%{opacity:0}}
.gc-b-going{opacity:0;animation:gc-b-going 27.8s ease infinite both}
@keyframes gc-b-going{0%,33.99%{opacity:0}35.07%,35.61%{opacity:1}36.69%,100%{opacity:0}}
.gc-b-live{animation:gc-b-live 27.8s ease infinite both}
@keyframes gc-b-live{0%,35.61%{opacity:0}36.69%,100%{opacity:1}}
.gc-s-draft{opacity:0;animation:gc-s-draft 27.8s ease infinite both}
@keyframes gc-s-draft{0%,0.00%{opacity:0}1.08%,35.61%{opacity:1}36.69%,100%{opacity:0}}
.gc-s-pub{animation:gc-s-pub 27.8s ease infinite both}
@keyframes gc-s-pub{0%,35.61%{opacity:0}36.69%,100%{opacity:1}}
.gc-draft{opacity:0;animation:gc-draft 27.8s ease infinite both}
@keyframes gc-draft{0%,28.78%{opacity:0}29.86%,35.61%{opacity:1}36.69%,100%{opacity:0}}
.gc-live{opacity:0;animation:gc-live 27.8s ease infinite both}
@keyframes gc-live{0%,35.61%{opacity:0}36.69%,53.24%{opacity:1}54.32%,100%{opacity:0}}
.gc-phone{animation:gc-phone 27.8s ease infinite both}
@keyframes gc-phone{0%,39.93%{opacity:1}41.01%,53.96%{opacity:0}55.04%,100%{opacity:1}}
.gc-share{opacity:0;animation:gc-share 27.8s ease infinite both}
@keyframes gc-share{0%,40.65%{opacity:0}41.73%,53.60%{opacity:1}54.68%,100%{opacity:0}}
.gc-tap2{animation:gc-tap2 27.8s ease-out infinite both}
@keyframes gc-tap2{0%{opacity:0;transform:scale(.4)}44.96%{opacity:0;transform:scale(.4)}44.99%{opacity:.9;transform:scale(.4)}47.12%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-msg0{opacity:0;animation:gc-msg0 27.8s ease-out infinite both}
@keyframes gc-msg0{0%{opacity:0;transform:none}44.96%{opacity:0;transform:none}44.97%{opacity:1;transform:none}46.04%{opacity:0;transform:translate(79px,-68px)}100%{opacity:0;transform:translate(79px,-68px)}}
.gc-note0{animation:gc-note0 27.8s ease-out infinite both}
@keyframes gc-note0{0%{transform:scale(0);opacity:0}46.04%{transform:scale(0);opacity:0}46.92%{transform:scale(1.12);opacity:1}47.30%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring0{opacity:0;animation:gc-ring0 27.8s ease-out infinite both}
@keyframes gc-ring0{0%{opacity:0;transform:scale(.6)}46.04%{opacity:0;transform:scale(.6)}46.06%{opacity:.9;transform:scale(.6)}48.20%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg1{opacity:0;animation:gc-msg1 27.8s ease-out infinite both}
@keyframes gc-msg1{0%{opacity:0;transform:none}45.40%{opacity:0;transform:none}45.41%{opacity:1;transform:none}46.47%{opacity:0;transform:translate(131px,-68px)}100%{opacity:0;transform:translate(131px,-68px)}}
.gc-note1{animation:gc-note1 27.8s ease-out infinite both}
@keyframes gc-note1{0%{transform:scale(0);opacity:0}46.47%{transform:scale(0);opacity:0}47.36%{transform:scale(1.12);opacity:1}47.73%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring1{opacity:0;animation:gc-ring1 27.8s ease-out infinite both}
@keyframes gc-ring1{0%{opacity:0;transform:scale(.6)}46.47%{opacity:0;transform:scale(.6)}46.50%{opacity:.9;transform:scale(.6)}48.63%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg2{opacity:0;animation:gc-msg2 27.8s ease-out infinite both}
@keyframes gc-msg2{0%{opacity:0;transform:none}45.83%{opacity:0;transform:none}45.84%{opacity:1;transform:none}46.91%{opacity:0;transform:translate(183px,-68px)}100%{opacity:0;transform:translate(183px,-68px)}}
.gc-note2{animation:gc-note2 27.8s ease-out infinite both}
@keyframes gc-note2{0%{transform:scale(0);opacity:0}46.91%{transform:scale(0);opacity:0}47.79%{transform:scale(1.12);opacity:1}48.17%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring2{opacity:0;animation:gc-ring2 27.8s ease-out infinite both}
@keyframes gc-ring2{0%{opacity:0;transform:scale(.6)}46.91%{opacity:0;transform:scale(.6)}46.93%{opacity:.9;transform:scale(.6)}49.06%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg3{opacity:0;animation:gc-msg3 27.8s ease-out infinite both}
@keyframes gc-msg3{0%{opacity:0;transform:none}46.26%{opacity:0;transform:none}46.27%{opacity:1;transform:none}47.34%{opacity:0;transform:translate(79px,24px)}100%{opacity:0;transform:translate(79px,24px)}}
.gc-note3{animation:gc-note3 27.8s ease-out infinite both}
@keyframes gc-note3{0%{transform:scale(0);opacity:0}47.34%{transform:scale(0);opacity:0}48.22%{transform:scale(1.12);opacity:1}48.60%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring3{opacity:0;animation:gc-ring3 27.8s ease-out infinite both}
@keyframes gc-ring3{0%{opacity:0;transform:scale(.6)}47.34%{opacity:0;transform:scale(.6)}47.36%{opacity:.9;transform:scale(.6)}49.50%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg4{opacity:0;animation:gc-msg4 27.8s ease-out infinite both}
@keyframes gc-msg4{0%{opacity:0;transform:none}46.69%{opacity:0;transform:none}46.70%{opacity:1;transform:none}47.77%{opacity:0;transform:translate(131px,24px)}100%{opacity:0;transform:translate(131px,24px)}}
.gc-note4{animation:gc-note4 27.8s ease-out infinite both}
@keyframes gc-note4{0%{transform:scale(0);opacity:0}47.77%{transform:scale(0);opacity:0}48.65%{transform:scale(1.12);opacity:1}49.03%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring4{opacity:0;animation:gc-ring4 27.8s ease-out infinite both}
@keyframes gc-ring4{0%{opacity:0;transform:scale(.6)}47.77%{opacity:0;transform:scale(.6)}47.79%{opacity:.9;transform:scale(.6)}49.93%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg5{opacity:0;animation:gc-msg5 27.8s ease-out infinite both}
@keyframes gc-msg5{0%{opacity:0;transform:none}47.12%{opacity:0;transform:none}47.13%{opacity:1;transform:none}48.20%{opacity:0;transform:translate(183px,24px)}100%{opacity:0;transform:translate(183px,24px)}}
.gc-note5{animation:gc-note5 27.8s ease-out infinite both}
@keyframes gc-note5{0%{transform:scale(0);opacity:0}48.20%{transform:scale(0);opacity:0}49.08%{transform:scale(1.12);opacity:1}49.46%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring5{opacity:0;animation:gc-ring5 27.8s ease-out infinite both}
@keyframes gc-ring5{0%{opacity:0;transform:scale(.6)}48.20%{opacity:0;transform:scale(.6)}48.22%{opacity:.9;transform:scale(.6)}50.36%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg6{opacity:0;animation:gc-msg6 27.8s ease-out infinite both}
@keyframes gc-msg6{0%{opacity:0;transform:none}47.55%{opacity:0;transform:none}47.56%{opacity:1;transform:none}48.63%{opacity:0;transform:translate(79px,116px)}100%{opacity:0;transform:translate(79px,116px)}}
.gc-note6{animation:gc-note6 27.8s ease-out infinite both}
@keyframes gc-note6{0%{transform:scale(0);opacity:0}48.63%{transform:scale(0);opacity:0}49.51%{transform:scale(1.12);opacity:1}49.89%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring6{opacity:0;animation:gc-ring6 27.8s ease-out infinite both}
@keyframes gc-ring6{0%{opacity:0;transform:scale(.6)}48.63%{opacity:0;transform:scale(.6)}48.65%{opacity:.9;transform:scale(.6)}50.79%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg7{opacity:0;animation:gc-msg7 27.8s ease-out infinite both}
@keyframes gc-msg7{0%{opacity:0;transform:none}47.99%{opacity:0;transform:none}48.00%{opacity:1;transform:none}49.06%{opacity:0;transform:translate(131px,116px)}100%{opacity:0;transform:translate(131px,116px)}}
.gc-note7{animation:gc-note7 27.8s ease-out infinite both}
@keyframes gc-note7{0%{transform:scale(0);opacity:0}49.06%{transform:scale(0);opacity:0}49.95%{transform:scale(1.12);opacity:1}50.32%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring7{opacity:0;animation:gc-ring7 27.8s ease-out infinite both}
@keyframes gc-ring7{0%{opacity:0;transform:scale(.6)}49.06%{opacity:0;transform:scale(.6)}49.09%{opacity:.9;transform:scale(.6)}53.38%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-msg8{opacity:0;animation:gc-msg8 27.8s ease-out infinite both}
@keyframes gc-msg8{0%{opacity:0;transform:none}48.42%{opacity:0;transform:none}48.43%{opacity:1;transform:none}49.50%{opacity:0;transform:translate(183px,116px)}100%{opacity:0;transform:translate(183px,116px)}}
.gc-note8{animation:gc-note8 27.8s ease-out infinite both}
@keyframes gc-note8{0%{transform:scale(0);opacity:0}49.50%{transform:scale(0);opacity:0}50.38%{transform:scale(1.12);opacity:1}50.76%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-ring8{opacity:0;animation:gc-ring8 27.8s ease-out infinite both}
@keyframes gc-ring8{0%{opacity:0;transform:scale(.6)}49.50%{opacity:0;transform:scale(.6)}49.52%{opacity:.9;transform:scale(.6)}53.81%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.gc-lock{opacity:0;animation:gc-lock 27.8s ease infinite both}
@keyframes gc-lock{0%,53.96%{opacity:0}55.04%,58.27%{opacity:1}59.35%,100%{opacity:0}}
.gc-tap3{animation:gc-tap3 27.8s ease-out infinite both}
@keyframes gc-tap3{0%{opacity:0;transform:scale(.4)}57.55%{opacity:0;transform:scale(.4)}57.58%{opacity:.9;transform:scale(.4)}59.71%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-cards{transform:translateX(-228.6px);animation:gc-cards 27.8s ease-in-out infinite both}
@keyframes gc-cards{0%,60.07%{transform:none}61.33%,64.03%{transform:translateX(-114.3px)}65.29%,100.00%{transform:translateX(-228.6px)}}
.gc-hint-x{opacity:0;animation:gc-hint-x 27.8s ease infinite both}
@keyframes gc-hint-x{0%,59.71%{opacity:0}60.79%,67.63%{opacity:1}68.71%,100%{opacity:0}}
.gc-dot0{opacity:0;animation:gc-dot0 27.8s ease infinite both}
@keyframes gc-dot0{0%,0.00%{opacity:0}1.08%,60.79%{opacity:1}63.67%,100%{opacity:0}}
.gc-dot1{opacity:0;animation:gc-dot1 27.8s ease infinite both}
@keyframes gc-dot1{0%,60.79%{opacity:0}63.67%,64.75%{opacity:1}67.63%,100%{opacity:0}}
.gc-dot2{animation:gc-dot2 27.8s ease infinite both}
@keyframes gc-dot2{0%,64.75%{opacity:0}67.63%,100%{opacity:1}}
.gc-tap4{animation:gc-tap4 27.8s ease-out infinite both}
@keyframes gc-tap4{0%{opacity:0;transform:scale(.4)}67.63%{opacity:0;transform:scale(.4)}67.65%{opacity:.9;transform:scale(.4)}69.78%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-reels{animation:gc-reels 27.8s ease-out infinite both}
@keyframes gc-reels{0%,68.35%{transform:translateY(100%)}69.60%,100%{transform:none}}
.gc-reelstrip{transform:translateY(-588.0px);animation:gc-reelstrip 27.8s ease-in-out infinite both}
@keyframes gc-reelstrip{0%,72.30%{transform:none}73.56%,76.26%{transform:translateY(-294.0px)}77.52%,100.00%{transform:translateY(-588.0px)}}
.gc-hint-y{opacity:0;animation:gc-hint-y 27.8s ease infinite both}
@keyframes gc-hint-y{0%,67.99%{opacity:0}69.06%,77.70%{opacity:1}80.22%,100%{opacity:0}}
.gc-tap5{animation:gc-tap5 27.8s ease-out infinite both}
@keyframes gc-tap5{0%{opacity:0;transform:scale(.4)}79.86%{opacity:0;transform:scale(.4)}79.88%{opacity:.9;transform:scale(.4)}82.01%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-cart{animation:gc-cart 27.8s ease-out infinite both}
@keyframes gc-cart{0%,80.58%{transform:translateX(100%)}81.83%,100%{transform:none}}
.gc-tap6{animation:gc-tap6 27.8s ease-out infinite both}
@keyframes gc-tap6{0%{opacity:0;transform:scale(.4)}84.89%{opacity:0;transform:scale(.4)}84.91%{opacity:.9;transform:scale(.4)}87.05%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gc-done{animation:gc-done 27.8s ease-out infinite both}
@keyframes gc-done{0%,85.61%{transform:translateY(105%)}86.87%,100%{transform:none}}
.gc-donetick{animation:gc-donetick 27.8s ease-out infinite both}
@keyframes gc-donetick{0%{transform:scale(0);opacity:0}87.05%{transform:scale(0);opacity:0}87.93%{transform:scale(1.12);opacity:1}88.31%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-buyers{animation:gc-buyers 27.8s ease infinite both}
@keyframes gc-buyers{0%,87.05%{opacity:0}88.13%,100%{opacity:1}}
.gc-bought0{animation:gc-bought0 27.8s ease-out infinite both}
@keyframes gc-bought0{0%{transform:scale(0);opacity:0}87.77%{transform:scale(0);opacity:0}88.65%{transform:scale(1.12);opacity:1}89.03%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought1{animation:gc-bought1 27.8s ease-out infinite both}
@keyframes gc-bought1{0%{transform:scale(0);opacity:0}88.06%{transform:scale(0);opacity:0}88.94%{transform:scale(1.12);opacity:1}89.32%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought2{animation:gc-bought2 27.8s ease-out infinite both}
@keyframes gc-bought2{0%{transform:scale(0);opacity:0}88.35%{transform:scale(0);opacity:0}89.23%{transform:scale(1.12);opacity:1}89.60%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought3{animation:gc-bought3 27.8s ease-out infinite both}
@keyframes gc-bought3{0%{transform:scale(0);opacity:0}88.63%{transform:scale(0);opacity:0}89.51%{transform:scale(1.12);opacity:1}89.89%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought4{animation:gc-bought4 27.8s ease-out infinite both}
@keyframes gc-bought4{0%{transform:scale(0);opacity:0}88.92%{transform:scale(0);opacity:0}89.80%{transform:scale(1.12);opacity:1}90.18%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought5{animation:gc-bought5 27.8s ease-out infinite both}
@keyframes gc-bought5{0%{transform:scale(0);opacity:0}89.21%{transform:scale(0);opacity:0}90.09%{transform:scale(1.12);opacity:1}90.47%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought6{animation:gc-bought6 27.8s ease-out infinite both}
@keyframes gc-bought6{0%{transform:scale(0);opacity:0}89.50%{transform:scale(0);opacity:0}90.38%{transform:scale(1.12);opacity:1}90.76%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought7{animation:gc-bought7 27.8s ease-out infinite both}
@keyframes gc-bought7{0%{transform:scale(0);opacity:0}89.78%{transform:scale(0);opacity:0}90.67%{transform:scale(1.12);opacity:1}91.04%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-bought8{animation:gc-bought8 27.8s ease-out infinite both}
@keyframes gc-bought8{0%{transform:scale(0);opacity:0}90.07%{transform:scale(0);opacity:0}90.95%{transform:scale(1.12);opacity:1}91.33%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gc-sales{animation:gc-sales 27.8s ease infinite both}
@keyframes gc-sales{0%,90.72%{opacity:0;transform:translateY(6px)}91.80%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ga3 *{animation:none !important}}

.ga4{position:relative;width:350px;height:330px;margin:4px 0 18px;overflow:hidden}
.ga4-cycle{animation:ga4-cycle 11.600000000000001s ease infinite both}
@keyframes ga4-cycle{0%{opacity:0}2.59%,96.55%{opacity:1}100%{opacity:0}}
.gs-layer{position:absolute;left:0;top:0;width:144px;height:294px;overflow:hidden;background:#ffffff}
.gs-tap{opacity:0;border-radius:50%;border:2px solid #ffffff}
.gs-t0{opacity:0;animation:gs-t0 11.600000000000001s ease infinite both}
@keyframes gs-t0{0%,1.72%{opacity:0}4.31%,32.76%{opacity:1}35.34%,100%{opacity:0}}
.gs-t1{opacity:0;animation:gs-t1 11.600000000000001s ease infinite both}
@keyframes gs-t1{0%,33.62%{opacity:0}36.21%,62.07%{opacity:1}68.97%,100%{opacity:0}}
.gs-t2{animation:gs-t2 11.600000000000001s ease infinite both}
@keyframes gs-t2{0%,67.24%{opacity:0}69.83%,100%{opacity:1}}
.gs-connect{opacity:0;animation:gs-connect 11.600000000000001s ease infinite both}
@keyframes gs-connect{0%,1.72%{opacity:0}4.31%,32.76%{opacity:1}35.34%,100%{opacity:0}}
.gs-btn{opacity:0;animation:gs-btn 11.600000000000001s ease infinite both}
@keyframes gs-btn{0%,0.00%{opacity:0}2.59%,17.67%{opacity:1}20.26%,100%{opacity:0}}
.gs-ok{animation:gs-ok 11.600000000000001s ease infinite both}
@keyframes gs-ok{0%,17.67%{opacity:0}20.26%,100%{opacity:1}}
.gs-tap0{animation:gs-tap0 11.600000000000001s ease-out infinite both}
@keyframes gs-tap0{0%{opacity:0;transform:scale(.4)}15.52%{opacity:0;transform:scale(.4)}15.57%{opacity:.9;transform:scale(.4)}20.69%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.gs-grid{opacity:0;animation:gs-grid 11.600000000000001s ease infinite both}
@keyframes gs-grid{0%,33.62%{opacity:0}36.21%,72.41%{opacity:1}75.00%,100%{opacity:0}}
.gs-p0{animation:gs-p0 11.600000000000001s ease infinite both}
@keyframes gs-p0{0%,34.48%{opacity:0;transform:translate(-14px,-18px) scale(.8)}37.07%,100%{opacity:1;transform:none}}
.gs-p1{animation:gs-p1 11.600000000000001s ease infinite both}
@keyframes gs-p1{0%,36.03%{opacity:0;transform:translate(-14px,-18px) scale(.8)}38.62%,100%{opacity:1;transform:none}}
.gs-p2{animation:gs-p2 11.600000000000001s ease infinite both}
@keyframes gs-p2{0%,37.59%{opacity:0;transform:translate(-14px,-18px) scale(.8)}40.17%,100%{opacity:1;transform:none}}
.gs-p3{animation:gs-p3 11.600000000000001s ease infinite both}
@keyframes gs-p3{0%,39.14%{opacity:0;transform:translate(-14px,-18px) scale(.8)}41.72%,100%{opacity:1;transform:none}}
.gs-p4{animation:gs-p4 11.600000000000001s ease infinite both}
@keyframes gs-p4{0%,40.69%{opacity:0;transform:translate(-14px,-18px) scale(.8)}43.28%,100%{opacity:1;transform:none}}
.gs-p5{animation:gs-p5 11.600000000000001s ease infinite both}
@keyframes gs-p5{0%,42.24%{opacity:0;transform:translate(-14px,-18px) scale(.8)}44.83%,100%{opacity:1;transform:none}}
.gs-p6{animation:gs-p6 11.600000000000001s ease infinite both}
@keyframes gs-p6{0%,43.79%{opacity:0;transform:translate(-14px,-18px) scale(.8)}46.38%,100%{opacity:1;transform:none}}
.gs-p7{animation:gs-p7 11.600000000000001s ease infinite both}
@keyframes gs-p7{0%,45.34%{opacity:0;transform:translate(-14px,-18px) scale(.8)}47.93%,100%{opacity:1;transform:none}}
.gs-p8{animation:gs-p8 11.600000000000001s ease infinite both}
@keyframes gs-p8{0%,46.90%{opacity:0;transform:translate(-14px,-18px) scale(.8)}49.48%,100%{opacity:1;transform:none}}
.gs-tick0{animation:gs-tick0 11.600000000000001s ease-out infinite both}
@keyframes gs-tick0{0%{transform:scale(0);opacity:0}54.31%{transform:scale(0);opacity:0}56.42%{transform:scale(1.12);opacity:1}57.33%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gs-fly0{opacity:0;animation:gs-fly0 11.600000000000001s ease-out infinite both}
@keyframes gs-fly0{0%{opacity:0;transform:none}67.24%{opacity:0;transform:none}67.28%{opacity:1;transform:none}71.55%{opacity:0;transform:translate(240px,101px) scale(.5)}100%{opacity:0;transform:translate(240px,101px) scale(.5)}}
.gs-tick1{animation:gs-tick1 11.600000000000001s ease-out infinite both}
@keyframes gs-tick1{0%{transform:scale(0);opacity:0}56.03%{transform:scale(0);opacity:0}58.15%{transform:scale(1.12);opacity:1}59.05%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gs-fly1{opacity:0;animation:gs-fly1 11.600000000000001s ease-out infinite both}
@keyframes gs-fly1{0%{opacity:0;transform:none}68.10%{opacity:0;transform:none}68.15%{opacity:1;transform:none}72.41%{opacity:0;transform:translate(124px,101px) scale(.5)}100%{opacity:0;transform:translate(124px,101px) scale(.5)}}
.gs-tick2{animation:gs-tick2 11.600000000000001s ease-out infinite both}
@keyframes gs-tick2{0%{transform:scale(0);opacity:0}57.76%{transform:scale(0);opacity:0}59.87%{transform:scale(1.12);opacity:1}60.78%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gs-fly2{opacity:0;animation:gs-fly2 11.600000000000001s ease-out infinite both}
@keyframes gs-fly2{0%{opacity:0;transform:none}68.97%{opacity:0;transform:none}69.01%{opacity:1;transform:none}73.28%{opacity:0;transform:translate(182px,45px) scale(.5)}100%{opacity:0;transform:translate(182px,45px) scale(.5)}}
.gs-tick3{animation:gs-tick3 11.600000000000001s ease-out infinite both}
@keyframes gs-tick3{0%{transform:scale(0);opacity:0}59.48%{transform:scale(0);opacity:0}61.59%{transform:scale(1.12);opacity:1}62.50%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.gs-fly3{opacity:0;animation:gs-fly3 11.600000000000001s ease-out infinite both}
@keyframes gs-fly3{0%{opacity:0;transform:none}69.83%{opacity:0;transform:none}69.87%{opacity:1;transform:none}74.14%{opacity:0;transform:translate(240px,-11px) scale(.5)}100%{opacity:0;transform:translate(240px,-11px) scale(.5)}}
.gs-shop{animation:gs-shop 11.600000000000001s ease infinite both}
@keyframes gs-shop{0%,70.69%{opacity:0}73.28%,100%{opacity:1}}
.gs-added{animation:gs-added 11.600000000000001s ease infinite both}
@keyframes gs-added{0%,74.14%{opacity:0;transform:translateY(6px)}76.72%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ga4 *{animation:none !important}}