.retention-motion{position:relative;width:100%;max-width:601px;margin-inline:auto;aspect-ratio:601/720;overflow:hidden;isolation:isolate;font-family:RetentionHeroUI,Arial,sans-serif;font-size:14px;font-weight:400;line-height:normal;text-align:left;letter-spacing:normal;text-transform:none;color:#fff;}
.retention-motion .ret-art-frame,.retention-motion .ret-art-frame *{font-family:RetentionHeroUI,Arial,sans-serif;letter-spacing:normal;text-transform:none;font-style:normal;box-sizing:border-box;}
.retention-motion .retention-motion-fallback{display:block;width:100%;height:auto;max-width:100%;margin:0;}
.retention-motion[data-motion-ready] .retention-motion-fallback{visibility:hidden;}
.retention-motion:not([data-motion-ready]) .ret-art-stage{visibility:hidden;}
.retention-motion{
  color-scheme: dark;
  --ret-art-hero: #091d6a;          
  --ret-art-white: #ffffff;
  --ret-art-aqua: #00d2d6;          
  --ret-art-navy: #0b2484;          
  --ret-art-band: #e7e9f3;          
  --ret-art-ink: #002d74;           
  --ret-art-grey: #4a4a4a;
  --ret-art-primary: #1a52c5;       
  --ret-art-box: #b8bec8;           
  --ret-art-green: #50bb58;         
  --ret-art-amber: #b98700;         
  --ret-art-rule: #e2e8f0;
  --ret-art-shadow: 0 12px 25px rgba(0, 0, 0, .25);
  --ret-art-font: "RetentionHeroUI", "Helvetica Neue", Arial, sans-serif;
  --ret-art-ease: cubic-bezier(.4, 0, .2, 1);
  --ret-art-pop: cubic-bezier(.3, 1.6, .5, 1);
}.retention-motion .ret-art-stage{ display: flex; flex-direction: column; align-items: center; gap: 12px; }.retention-motion .ret-art-replay{
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); background: transparent; color: var(--ret-art-white);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}.retention-motion .ret-art-replay:hover{ border-color: var(--ret-art-white); }.retention-motion .ret-art-replay:focus-visible{ outline: 3px solid var(--ret-art-aqua); outline-offset: 3px; }.retention-motion .ret-art-replay svg{ width: 20px; height: 20px; }.retention-motion .ret-art-viewport{ position: relative; }.retention-motion .ret-art-frame{ position: absolute; left: 0; top: 0; width: 1202px; height: 1440px; transform-origin: 0 0; }.retention-motion .ret-art-content{ position: absolute; inset: 0; transition: opacity .4s ease; }.retention-motion .ret-art-content.ret-art-fade{ opacity: 0; }.retention-motion .ret-art-abs{ position: absolute; }.retention-motion .ret-art-card{ background: var(--ret-art-white); border-radius: 24px; box-shadow: var(--ret-art-shadow); }.retention-motion [data-part="ret"]{ left: 24px; top: 140px; width: 540px; height: 606px; }.retention-motion [data-part="ret"] .ret-art-title{ left: 48px; top: 48px; font-size: 51px; font-weight: 700; color: var(--ret-art-ink); line-height: 60px; white-space: nowrap; }.retention-motion [data-part="ret"] .ret-art-divider{ left: 48px; top: 150px; width: 444px; height: 2px; background: var(--ret-art-rule); }.retention-motion [data-part="ret"] .ret-art-label{ left: 48px; top: 186px; font-size: 30px; font-weight: 500; color: var(--ret-art-ink); line-height: 35px; white-space: nowrap; }.retention-motion [data-part="gauge"]{ left: 120px; top: 252px; width: 300px; height: 300px; display: block; }.retention-motion [data-part="gauge"] circle{ fill: none; stroke-width: 30; }.retention-motion [data-part="gauge"] .ret-art-track{ stroke: var(--ret-art-band); }.retention-motion [data-part="gauge"] .ret-art-value{ stroke: var(--ret-art-navy); }.retention-motion [data-part="pct"]{
  left: 120px; top: 258px; width: 300px; height: 300px; display: grid; place-items: center;
  font-size: 92px; font-weight: 700; color: var(--ret-art-ink); line-height: 108px; font-variant-numeric: tabular-nums; white-space: nowrap;
}.retention-motion [data-part="tint"]{ left: 604px; top: 140px; width: 574px; height: 606px; border-radius: 32px; background: var(--ret-art-aqua); box-shadow: var(--ret-art-shadow); }.retention-motion [data-part="photo"]{ left: 604px; top: 0; width: 574px; height: 746px; border-radius: 0 0 32px 32px; display: block; max-width: none; }.retention-motion [data-part="tasks"]{ left: 24px; top: 786px; width: 1154px; height: 614px; overflow: hidden; }.retention-motion [data-part="tasks"] .ret-art-title{ left: 48px; top: 48px; font-size: 48px; font-weight: 700; color: var(--ret-art-ink); line-height: 56px; white-space: nowrap; }.retention-motion [data-part="assign"]{
  left: 808px; top: 40px; width: 298px; height: 81px; border-radius: 12px; background: var(--ret-art-primary);
  color: var(--ret-art-white); font-size: 30px; font-weight: 500; line-height: 81px; text-align: center; white-space: nowrap;
  transition: transform .12s ease;
}.retention-motion [data-part="assign"].ret-art-press{ transform: scale(.95); }.retention-motion [data-part="prog"]{ left: 470px; top: 197px; width: 280px; height: 30px; border-radius: 15px; background: var(--ret-art-white); overflow: hidden; }.retention-motion [data-part="progFill"]{ position: absolute; left: 0; top: 0; width: 280px; height: 30px; border-radius: 15px; background: var(--ret-art-green); transition: width .5s var(--ret-art-ease), background-color .2s ease; }.retention-motion [data-part="progFill"].ret-art-zero{ background: var(--ret-art-amber); }.retention-motion [data-part="progLbl"]{ position: absolute; left: 16px; top: 2px; font-size: 22px; font-weight: 500; color: var(--ret-art-white); line-height: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }.retention-motion [data-part="tasks"] .ret-art-divider{ left: 48px; width: 1058px; height: 2px; background: var(--ret-art-rule); }.retention-motion [data-part="band"]{ left: 0; top: 162px; width: 1154px; height: 100px; background: var(--ret-art-band); }.retention-motion [data-part="avatar"]{
  left: 48px; top: 180px; width: 64px; height: 64px; border-radius: 50%; background: var(--ret-art-aqua);
  display: grid; place-items: center; color: var(--ret-art-white); font-size: 26px; font-weight: 500; line-height: 30px;
}.retention-motion [data-part="emp"]{ left: 136px; top: 190px; font-size: 38px; font-weight: 500; color: var(--ret-art-ink); line-height: 45px; white-space: nowrap; }.retention-motion [data-part="emprow"]{ left: 0; top: 0; width: 1154px; height: 262px; transition: opacity .35s ease, transform .45s var(--ret-art-ease); }.retention-motion [data-part="wf"]{ right: 48px; top: 195px; font-size: 30px; color: var(--ret-art-grey); line-height: 35px; white-space: nowrap; }.retention-motion .ret-art-task{ position: absolute; left: 48px; width: 1058px; height: 117px; }.retention-motion .ret-art-task .ret-art-box{
  position: absolute; left: 0; top: 36px; width: 46px; height: 46px; border-radius: 8px;
  background: var(--ret-art-white); box-shadow: inset 0 0 0 3px var(--ret-art-box);
  transition: background-color .2s ease, box-shadow .2s ease, transform .35s var(--ret-art-pop);
}.retention-motion .ret-art-task .ret-art-box svg{ position: absolute; left: 8px; top: 8px; width: 30px; height: 30px; display: block; overflow: visible; }.retention-motion .ret-art-task .ret-art-box path{ fill: none; stroke: var(--ret-art-white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease .08s; }.retention-motion .ret-art-task .ret-art-name{ position: absolute; left: 82px; top: 38px; font-size: 36px; color: var(--ret-art-ink); line-height: 42px; white-space: nowrap; }.retention-motion [data-part="t1"]{ top: 262px; }.retention-motion [data-part="t2"]{ top: 379px; }.retention-motion [data-part="t3"]{ top: 496px; }.retention-motion .ret-art-rowdiv{ transition: opacity .35s ease; }.retention-motion .ret-art-confetti{ position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 7; }.retention-motion .ret-art-confetti i{ position: absolute; display: block; border-radius: 3px; will-change: transform, opacity; }.retention-motion [data-part="cursor"]{ left: 1110px; top: 1300px; width: 56px; height: 56px; opacity: 0; z-index: 9; pointer-events: none; }.retention-motion [data-part="ripple"]{ left: 957px; top: 842px; width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--ret-art-aqua); box-sizing: border-box; opacity: 0; z-index: 8; pointer-events: none; }.retention-motion .ret-art-frame:not(.ret-art-assigned) [data-part="emprow"]{ opacity: 0; transform: translateY(-16px); }.retention-motion .ret-art-task{ opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .45s var(--ret-art-ease); }.retention-motion .ret-art-frame.ret-art-r1 [data-part="t1"],.retention-motion .ret-art-frame.ret-art-r2 [data-part="t2"],.retention-motion .ret-art-frame.ret-art-r3 [data-part="t3"]{ opacity: 1; transform: none; }.retention-motion .ret-art-frame:not(.ret-art-r2) [data-part="d2"],.retention-motion .ret-art-frame:not(.ret-art-r3) [data-part="d3"]{ opacity: 0; }.retention-motion .ret-art-frame.ret-art-c1 [data-part="t1"] .ret-art-box,.retention-motion .ret-art-frame.ret-art-c2 [data-part="t2"] .ret-art-box,.retention-motion .ret-art-frame.ret-art-c3 [data-part="t3"] .ret-art-box{ background: var(--ret-art-primary); box-shadow: inset 0 0 0 3px var(--ret-art-primary); }.retention-motion .ret-art-frame.ret-art-c1 [data-part="t1"] path,.retention-motion .ret-art-frame.ret-art-c2 [data-part="t2"] path,.retention-motion .ret-art-frame.ret-art-c3 [data-part="t3"] path{ stroke-dashoffset: 0; }.retention-motion .ret-art-task .ret-art-box.ret-art-pop{ transform: scale(1.12); }.retention-motion .ret-art-frame.ret-art-still,.retention-motion .ret-art-frame.ret-art-still *{ transition: none !important; }
@media (prefers-reduced-motion: reduce) {.retention-motion .ret-art-replay{ display: none; } }
.retention-motion .ret-art-stage,.retention-motion .ret-art-viewport{position:absolute;inset:0;width:100%;height:100%;display:block;}
.retention-motion [data-part="frame"]{margin:0;padding:0;}
.retention-motion [data-part="photo"]{border:0;}
.retention-motion [data-action]{position:absolute;z-index:20;top:4px;width:32px;height:32px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;padding:0;margin:0;cursor:pointer;line-height:1;}
.retention-motion [data-action="replay"]{left:12px;}.retention-motion [data-action="pause"]{left:52px;}
.retention-motion [data-action] svg{width:17px;height:17px;display:block;}.retention-motion [data-action]:hover{background:rgba(255,255,255,.12);}.retention-motion [data-action]:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.retention-motion [data-action]:focus{background:rgba(255,255,255,.12)!important;color:#fff!important;}
@media(prefers-reduced-motion:reduce){.retention-motion [data-action="pause"]{display:none;}.retention-motion [data-part="frame"] *{transition:none!important;}}