#installAnim .bg {
  fill: #f3f5f1;
}
#installAnim .ground {
  fill: none;
  stroke: #78908b;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .5;
}
#installAnim .ink {
  fill: #1f2937;
  stroke: none;
}
#installAnim .tire {
  fill: none;
  stroke: #1f2937;
  stroke-width: 26;
}
#installAnim .gapline {
  fill: none;
  stroke: #f3f5f1;
  stroke-width: 3;
  opacity: .55;
}
#installAnim .rim {
  fill: none;
  stroke: #3a4855;
  stroke-width: 24;
}
#installAnim .spokes path {
  fill: none;
  stroke: #52615f;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .8;
}
#installAnim .rotor {
  fill: none;
  stroke: #46545c;
  stroke-width: 6;
}
#installAnim .rotor-inner {
  stroke-width: 2.5;
  opacity: .6;
}
#installAnim .hub {
  fill: #1f2937;
}
#installAnim .motor {
  fill: #172321;
  stroke: #0f766e;
  stroke-width: 5;
}
#installAnim .cassette {
  fill: none;
  stroke: #8fa3ad;
  stroke-width: 2.2;
  opacity: .9;
}
#installAnim .motor-detail {
  fill: none;
  stroke: #94aaa6;
  stroke-width: 3.5;
}
#installAnim .axle {
  fill: #0b1220;
}
#installAnim .chain {
  fill: none;
  stroke: #52615f;
  stroke-width: 3;
  stroke-dasharray: 7 4;
  opacity: .75;
}
#installAnim .ring {
  fill: none;
  stroke: #46545c;
  stroke-width: 5;
}
#installAnim .ring-inner {
  stroke-width: 2.2;
  opacity: .7;
}
#installAnim .bbcap {
  fill: #f3f5f1;
  stroke: #1f2937;
  stroke-width: 5;
}
#installAnim .boss {
  fill: #f3f5f1;
  stroke: #0f766e;
  stroke-width: 2.2;
}
#installAnim .bar {
  fill: none;
  stroke: #1f2937;
  stroke-width: 15;
  stroke-linecap: round;
}
#installAnim .lever {
  fill: none;
  stroke: #1f2937;
  stroke-width: 11;
  stroke-linecap: round;
}
#installAnim .rail {
  fill: none;
  stroke: #52615f;
  stroke-width: 4;
  stroke-linecap: round;
}
#installAnim .ctrl {
  fill: #172321;
  stroke: #7f938f;
  stroke-width: 1.4;
}
#installAnim .fins {
  fill: none;
  stroke: #47565e;
  stroke-width: 2;
}
#installAnim .batt {
  fill: #2a3644;
}
#installAnim .sheen {
  fill: none;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 5;
  stroke-linecap: round;
}
#installAnim .btn {
  fill: none;
  stroke: #94aaa6;
  stroke-width: 2.5;
}
#installAnim .btn-dot {
  fill: #94aaa6;
}
#installAnim .power-ring {
  fill: none;
  stroke: #0f766e;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .9;
}
#installAnim .seam {
  fill: none;
  stroke: #47565e;
  stroke-width: 2;
  stroke-linecap: round;
}
#installAnim .cable {
  fill: none;
  stroke: #1f2937;
  stroke-width: 5;
  stroke-linecap: round;
}
#installAnim .port {
  fill: #0b1220;
  stroke: #0f766e;
  stroke-width: 2;
}
#installAnim .ziptie {
  fill: none;
  stroke: #47565e;
  stroke-width: 3.5;
  stroke-linecap: round;
}
#installAnim .cage-band {
  stroke-width: 3;
}
#installAnim .frame-body {
  stroke: none;
}
#installAnim .cage {
  fill: none;
  stroke: #1f2937;
  stroke-width: 8;
  stroke-linecap: round;
}
#installAnim .cage-thin {
  stroke-width: 5;
}
#installAnim .cage-plate {
  stroke-width: 6;
}
#installAnim .nut {
  fill: #0b1220;
  stroke: #94aaa6;
  stroke-width: 2;
}
#installAnim .screwhead {
  fill: #45535f;
  stroke: #cbd5e1;
  stroke-width: 1.5;
}
#installAnim .socket {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2;
  stroke-linecap: round;
}
#installAnim .jockey {
  fill: none;
  stroke: #8fa3ad;
  stroke-width: 2.5;
}
#installAnim .bossport {
  fill: #0b1220;
  stroke: #94aaa6;
  stroke-width: 1.8;
}
#installAnim .dlink {
  fill: none;
  stroke: #1f2937;
  stroke-width: 6;
  stroke-linecap: round;
}
#installAnim .dcage {
  fill: none;
  stroke: #46545c;
  stroke-width: 3.5;
  stroke-linecap: round;
}
#installAnim .crankbolt {
  fill: #2a3644;
  stroke: #94aaa6;
  stroke-width: 2.5;
}
#installAnim .pedal-axle {
  fill: #0b1220;
  stroke: #94aaa6;
  stroke-width: 2;
}
#installAnim .pedal-slot {
  fill: none;
  stroke: #4a5a66;
  stroke-width: 2.5;
  stroke-linecap: round;
}
#installAnim .saddle-top {
  fill: none;
  stroke: #47565e;
  stroke-width: 2;
}
#installAnim .rail-thin {
  stroke-width: 2.2;
  opacity: .6;
}
#installAnim .barplug {
  fill: #0b1220;
  stroke: #94aaa6;
  stroke-width: 2;
}
#installAnim .nut-img {
  stroke-width: 2.9;
}
#installAnim .dlink-img {
  stroke-width: 8.6;
}
#installAnim .bossport-img {
  stroke-width: 2.6;
}
#installAnim .barplug-img {
  stroke-width: 2.9;
}
#installAnim .rail-img {
  stroke-width: 5.8;
}
#installAnim .ring-img {
  stroke-width: 7.2;
}
#installAnim .ring-img-inner {
  stroke-width: 3.2;
}
#installAnim .crankbolt-img {
  stroke-width: 3.6;
}
#installAnim .pedal-axle-img {
  stroke-width: 2.9;
}
#installAnim .pedal-slot-img {
  stroke-width: 3.6;
}
#installAnim .bbhole {
  fill: #f3f5f1;
  stroke: #94aaa6;
  stroke-width: 4.3;
}
#installAnim .dim {
  fill: none;
  stroke: #0f766e;
  stroke-width: 2;
}
#installAnim .dim-label {
  font: 600 17px Consolas, monospace;
  fill: #115e59;
  letter-spacing: .08em;
}
#installAnim .teeth52 {
  fill: #141b22;
}
#installAnim .teeth36 {
  fill: #27313c;
}
#installAnim .spider {
  fill: #3d4956;
}
#installAnim .band {
  fill: #3d4956;
}
#installAnim .pedalbody {
  fill: #1f2937;
}
#installAnim .crankarm {
  fill: #2e3a46;
}
#installAnim .spindlecap {
  fill: #232d38;
  stroke: #94aaa6;
  stroke-width: 2.6;
}
#installAnim .tire2 {
  fill: none;
  stroke: #1f2937;
  stroke-width: 23.6;
}
#installAnim .sidewall {
  fill: none;
  stroke: #39434f;
  stroke-width: 2;
  opacity: .8;
}
#installAnim .rim2 {
  fill: none;
  stroke: #2b3541;
  stroke-width: 31.7;
}
#installAnim .rimedge {
  fill: none;
  stroke: #46545c;
  stroke-width: 2;
  opacity: .7;
}
#installAnim .valve2 {
  fill: none;
  stroke: #94aaa6;
  stroke-width: 3.4;
  stroke-linecap: round;
}
#installAnim .spokes2 path {
  fill: none;
  stroke: #55606a;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
#installAnim .rotor2 {
  fill: #3d4750;
}
#installAnim .rotor-slot {
  fill: none;
  stroke: #232d38;
  stroke-width: 2.6;
  stroke-linecap: round;
}
#installAnim .carrier {
  fill: #333e49;
}
#installAnim .rotor-bolt {
  fill: #94aaa6;
}
#installAnim .hub2 {
  fill: #1f2937;
}
#installAnim .hubcap {
  fill: none;
  stroke: #94aaa6;
  stroke-width: 2.4;
}
#installAnim .axle2 {
  fill: #0b1220;
}
#installAnim .ctrl-hole {
  fill: #0b1220;
  stroke: #0f766e;
  stroke-width: 1.6;
}
#installAnim .nipple {
  fill: #7e8a94;
}
#installAnim .rotor-far {
  fill: #2a333c;
}
#installAnim .mflange {
  fill: #232d38;
}
#installAnim .motor2 {
  fill: #172321;
  stroke: #0f766e;
  stroke-width: 4.5;
}
#installAnim .motor-ring {
  fill: none;
  stroke: #2e3a46;
  stroke-width: 3;
}
#installAnim .cassette2 {
  fill: none;
  stroke: #8fa3ad;
  stroke-width: 2;
  opacity: .85;
}
#installAnim .lockring {
  fill: none;
  stroke: #94aaa6;
  stroke-width: 2.6;
}
#installAnim .pigtail {
  fill: none;
  stroke: #1f2937;
  stroke-width: 5;
  stroke-linecap: round;
}
#installAnim .screw-head {
  fill: #45535f;
  stroke: #202a33;
  stroke-width: .6;
}
#installAnim .screw-knurl {
  fill: none;
  stroke: #2c3843;
  stroke-width: .5;
}
#installAnim .screw-shaft {
  fill: #55636f;
}
#installAnim .screw-thread {
  fill: none;
  stroke: #9fb0ba;
  stroke-width: .7;
}
#installAnim .screw-hex {
  fill: #1b242c;
}
#installAnim .csink {
  fill: #10161d;
  stroke: #7f938f;
  stroke-width: 1.4;
}
#installAnim .ringback {
  fill: #27313c;
}
#installAnim .chainlink {
  fill: none;
  stroke: #3a4653;
  stroke-width: 6;
  stroke-dasharray: 7 4.6;
}
#installAnim .ringband {
  fill: #232d38;
}
#installAnim .spiderback {
  fill: #333e49;
}
#installAnim .ringboss {
  fill: #2c3843;
}
#installAnim .caliper {
  fill: #1b242c;
  stroke: #3a4653;
  stroke-width: 1.5;
}
#installAnim .caliper-bolt {
  fill: #94aaa6;
}
#installAnim .der-body {
  fill: #232d38;
}
#installAnim .der-cage {
  fill: #2c3843;
}
#installAnim .jockey2 {
  fill: #27313c;
}
#installAnim .jockey-teeth {
  fill: none;
  stroke: #55606a;
  stroke-width: 2.4;
  stroke-dasharray: 3 3.6;
}
#installAnim .jockey-bolt {
  fill: #94aaa6;
}
#installAnim .cageband {
  fill: #1f2937;
}
#installAnim .cage-bandline {
  fill: none;
  stroke: #4a5a66;
  stroke-width: 3.5;
  stroke-linecap: round;
}
#installAnim .anim-shell {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 20px;
  align-items: stretch;
}
#installAnim .anim-stage {
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f5f1;
  box-shadow: 0 10px 34px rgba(31, 41, 55, .07);
  display: flex;
  flex-direction: column;
}
#installAnim .anim-stage svg {
  width: 100%;
  height: auto;
  display: block;
}
#installAnim .anim-canvas {
  position: relative;
}
#installAnim .anim-caption {
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  font-size: 13px;
  letter-spacing: .1em;
  color: #134e4a;
  background: rgba(255, 255, 255, .72);
  border-top: 1px dashed rgba(15, 118, 110, .35);
  padding: 10px 16px;
  min-height: 40px;
}
#installAnim .anim-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#installAnim .anim-step {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #e5e7eb;
  border-radius: 10px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .25s ease, background-color .25s ease;
}
#installAnim .anim-step b {
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  font-size: 18px;
  color: #6b7280;
}
#installAnim .anim-step strong {
  display: block;
  font-size: 15px;
}
#installAnim .anim-step small {
  display: block;
  font-size: 12.5px;
  color: #6b7280;
}
#installAnim .anim-step.is-done {
  border-left-color: #0f766e;
}
#installAnim .anim-step.is-done b {
  color: #0f766e;
}
#installAnim .anim-step.is-active {
  border-color: #0f766e;
  border-left-color: #f59e0b;
  background: #f0fdfa;
}
#installAnim .anim-step.is-active b {
  color: #f59e0b;
}
#installAnim .anim-controls {
  max-width: 1200px;
  margin: 14px auto 40px;
  padding: 0 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
@media (max-width: 940px) {
  #installAnim .anim-shell {
    grid-template-columns: 1fr;
  }
  #installAnim .anim-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
#installAnim .ground {
  fill: none;
  stroke: #78908b;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .5;
}
#installAnim .scene-hill {
  fill: #e6ece8;
}
#installAnim .tree-leaf {
  fill: #cbd6d0;
}
#installAnim .tree-trunk {
  fill: #a9b8b2;
}
#installAnim .scene-pebble {
  fill: none;
  stroke: #c5d0ca;
  stroke-width: 4;
  stroke-linecap: round;
}
#installAnim.p4 .scene-near .scene-strip {
  animation: scene-scroll 7.7s linear infinite;
}
#installAnim.p4 .scene-far .scene-strip {
  animation: scene-scroll 23s linear infinite;
}
@keyframes scene-scroll {
  to {
    transform: translateX(1920px);
  }
}
#installAnim #W-rearwheel {
  transform: translate(274px, 153px) scale(.5);
  transform-box: view-box;
  transform-origin: 1481px 719px;
  opacity: 0;
}
#installAnim #W-chain {
  opacity: 0;
}
#installAnim #W-ctrl {
  opacity: 0;
}
#installAnim #W-cage {
  transform: translate(-170px, -60px);
  opacity: 0;
}
#installAnim #W-battery {
  transform: translate(419px, 396px) rotate(-15.9deg);
  transform-box: view-box;
  transform-origin: 1101px 537px;
  opacity: 0;
}
#installAnim #W-ctrl {
  transform-box: view-box;
  transform-origin: 1147px 556px;
}
#installAnim #W-screwA,
#installAnim #W-screwB {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0px 0px;
}
#installAnim .holeping {
  fill: none;
  stroke: #0f766e;
  stroke-width: 3;
  opacity: 0;
}
#installAnim .acable {
  fill: none;
  stroke: #1f2937;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
}
#installAnim .aziptie {
  fill: none;
  stroke: #47565e;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
}
#installAnim .aconn {
  opacity: 0;
}
#installAnim .aconn rect {
  fill: #1f2937;
  stroke: #9fb0ba;
  stroke-width: 1.6;
}
#installAnim .aconn path {
  fill: none;
  stroke: #9fb0ba;
  stroke-width: 1.4;
}
#installAnim .acurrent {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: .28 1.72;
  stroke-dashoffset: .28;
  opacity: 0;
}
#installAnim .aflash {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
}
#installAnim .aguide {
  fill: none;
  stroke: #0f766e;
  stroke-width: 2;
  stroke-dasharray: 7 7;
  opacity: 0;
}
#installAnim .a-intro {
  opacity: 0;
}
#installAnim .ilabel {
  font:
    700 34px "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;
  fill: #115e59;
  letter-spacing: .06em;
}
#installAnim .ileader {
  fill: none;
  stroke: #0f766e;
  stroke-width: 2.5;
}
#installAnim .spin-front,
#installAnim .spin-rear {
  transform-box: view-box;
}
#installAnim .spin-front {
  transform-origin: 605px 719px;
}
#installAnim .spin-rear {
  transform-origin: 1481px 719px;
}
#installAnim.p1 .il-ctrl {
  animation: intro-label 2.2s ease .3s both;
}
#installAnim.p1 .il-batt {
  animation: intro-label 2.2s ease .5s both;
}
#installAnim.p1 .il-wheel {
  animation: intro-label 2.2s ease .65s both;
}
#installAnim.p1 #W-battery {
  animation: aw-fadein .45s ease .4s both;
}
#installAnim.p1 #W-rearwheel {
  animation: aw-fadein .45s ease .55s both, aw-wheel-in 1.7s cubic-bezier(.3, .8, .35, 1) 2.7s both;
}
#installAnim.p1 .ag-wheel {
  animation: ag-blink 1.5s ease 2.8s both;
}
#installAnim.p1 #W-chain {
  animation: aw-fadein .45s ease 4.3s both;
}
#installAnim.p1 #flip3d {
  animation: flip3d-run 4.55s ease .2s both;
}
#installAnim.p1 .ctrl3d {
  animation: ctrl3d-turn 4.55s ease .2s both;
}
#installAnim.p1 .ctrl3d-side {
  animation: ctrl3d-side 4.55s ease .2s both;
}
#installAnim.p1 .ctrl3d-front {
  animation: ctrl3d-front 4.55s ease .2s both;
}
#installAnim.p1 .holeping {
  animation: ag-ping .9s ease 3.4s 1 both;
}
#installAnim.p1 .holeping2 {
  animation-delay: 3.6s;
}
#installAnim.p1 #W-ctrl {
  animation: aw-fadein .35s ease-out 4.6s both;
}
#installAnim.p1 #W-cage {
  animation: aw-cage-in .5s cubic-bezier(.25, .8, .35, 1) 4.95s both;
}
#installAnim.p1 .ag-screw {
  animation: ag-blink 1.3s ease 5.1s both;
}
#installAnim.p1 #W-screwA {
  animation: aw-screwA 1.05s ease-in 5.25s both;
}
#installAnim.p1 #W-screwB {
  animation: aw-screwB 1.05s ease-in 5.45s both;
}
#installAnim.p1 .aflash-seatA {
  animation: ag-flash .4s ease 6.3s both;
}
#installAnim.p1 .aflash-seatB {
  animation: ag-flash .4s ease 6.5s both;
}
#installAnim.p2 #W-battery {
  animation: aw-batt-in 1.6s cubic-bezier(.25, .75, .35, 1) .1s both, aw-fadein 0s linear both;
}
#installAnim.p2 .ag-batt {
  animation: ag-blink 1.25s ease both;
}
#installAnim.p3 #cableShort {
  animation: aw-draw .55s ease-in-out both;
}
#installAnim.p3 .aflash-batt {
  animation: ag-flash .45s ease .58s both;
}
#installAnim.p3 #cableLongA {
  animation: aw-draw 1.15s ease-in-out .25s both;
}
#installAnim.p3 #cableLongB {
  animation: aw-draw .7s ease-in-out .7s both;
}
#installAnim.p3 .aconn {
  animation: aw-fadein .3s ease 1.32s both;
}
#installAnim.p3 .aflash-motor {
  animation: ag-flash .45s ease 1.42s both;
}
#installAnim.p3 .aziptie {
  animation: aw-fadein .4s ease 1.7s both;
}
#installAnim.p4 .acurrent {
  animation: a-pulse 2.4s linear .3s infinite;
}
#installAnim.p4 .power-ring {
  animation: a-ring 2.4s ease-in-out infinite;
}
#installAnim.p4 .motor2 {
  animation: a-motor 2.4s ease-in-out infinite;
}
#installAnim.p4 .spin-front {
  animation: a-spin 8s linear infinite;
}
#installAnim.p4 .spin-rear {
  animation: a-spin 8s linear infinite;
}
@keyframes aw-wheel-in {
  0% {
    transform: translate(274px, 153px) scale(.5);
  }
  38% {
    transform: translate(170px, 80px) scale(1);
  }
  88% {
    transform: translate(-4px, -3px) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes aw-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes flip3d-run {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(0deg) scale(.5845);
    left: 71.46%;
    top: 85.11%;
  }
  4.4% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(.5845);
    left: 71.46%;
    top: 85.11%;
  }
  57.1% {
    opacity: 1;
    transform: rotate(0deg) scale(.5845);
    left: 71.46%;
    top: 85.11%;
  }
  68.1% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    left: 49.2%;
    top: 42.84%;
  }
  76.9% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    left: 49.2%;
    top: 42.84%;
  }
  94.6% {
    opacity: 1;
    transform: rotate(13.5deg) scale(.66);
    left: 56.03%;
    top: 44.17%;
  }
  97.3% {
    opacity: 1;
    transform: rotate(14.7deg) scale(.62);
    left: 56.63%;
    top: 44.29%;
  }
  100% {
    opacity: 0;
    transform: rotate(15.9deg) scale(.5845);
    left: 57.24%;
    top: 44.4%;
  }
}
@keyframes ctrl3d-turn {
  0%, 76.9% {
    width: 100%;
  }
  81% {
    width: 106.5%;
  }
  85.1% {
    width: 103.6%;
  }
  89.1% {
    width: 91.6%;
  }
  91.8% {
    width: 79%;
  }
  94.6% {
    width: 63.3%;
  }
  97.3% {
    width: 52.3%;
  }
  100% {
    width: 40.6%;
  }
}
@keyframes ctrl3d-side {
  0%, 76.9% {
    width: 0%;
  }
  81% {
    width: 10.3%;
  }
  85.1% {
    width: 20.2%;
  }
  89.1% {
    width: 31.6%;
  }
  91.8% {
    width: 41.8%;
  }
  94.6% {
    width: 56.4%;
  }
  97.3% {
    width: 70.1%;
  }
  100% {
    width: 91.4%;
  }
}
@keyframes ctrl3d-front {
  0%, 76.9% {
    left: 0%;
  }
  81% {
    left: 10.3%;
  }
  85.1% {
    left: 20.2%;
  }
  89.1% {
    left: 31.6%;
  }
  91.8% {
    left: 41.8%;
  }
  94.6% {
    left: 56.4%;
  }
  97.3% {
    left: 70.1%;
  }
  100% {
    left: 91.4%;
  }
}
@keyframes intro-label {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  10%, 84% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
#installAnim .flip3d {
  position: absolute;
  left: 49.2%;
  top: 42.84%;
  width: 4.99%;
  aspect-ratio: 56 / 102;
  opacity: 0;
  pointer-events: none;
  will-change:
    transform,
    left,
    top;
}
#installAnim .ctrl3d {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateX(-50%);
  background: #172321;
  border: 1px solid rgba(127, 147, 143, .75);
  border-radius: 16% / 8.8%;
  box-sizing: border-box;
  overflow: hidden;
}
#installAnim .ctrl3d-side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background:
    linear-gradient(
      90deg,
      transparent 0 20%,
      rgba(71, 86, 94, .9) 20% 28%,
      transparent 28% 46%,
      rgba(71, 86, 94, .9) 46% 54%,
      transparent 54% 72%,
      rgba(71, 86, 94, .9) 72% 80%,
      transparent 80% 100%),
    linear-gradient(
      90deg,
      rgba(3, 9, 8, .55),
      rgba(3, 9, 8, .16));
}
#installAnim .ctrl3d-front {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  right: 0;
}
#installAnim .ctrl3d .ctrl3d-front svg {
  width: 100%;
  height: 100%;
  display: block;
}
#installAnim .anim-stage {
  position: relative;
}
#installAnim.s1 #flip3d,
#installAnim.is-reduced #flip3d,
#installAnim.p2 #flip3d {
  opacity: 0 !important;
  animation: none;
}
@keyframes ag-ping {
  0% {
    opacity: 0;
    transform: scale(.5);
    transform-box: fill-box;
    transform-origin: center;
  }
  30% {
    opacity: .95;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes aw-ctrl-in {
  0% {
    opacity: 0;
    transform: scale(.06, 1);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes aw-cage-in {
  0% {
    transform: translate(-170px, -60px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes aw-screwA {
  0% {
    opacity: 0;
    transform: translate(1078px, 505px) scale(1.6);
  }
  18% {
    opacity: 1;
  }
  60% {
    transform: translate(1126px, 519px) scale(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(1148.5px, 526.3px) scale(1);
  }
}
@keyframes aw-screwB {
  0% {
    opacity: 0;
    transform: translate(1062px, 561px) scale(1.6);
  }
  18% {
    opacity: 1;
  }
  60% {
    transform: translate(1110px, 575px) scale(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(1132.6px, 582.1px) scale(1);
  }
}
#installAnim.p1 #W-screwA,
#installAnim.p1 #W-screwB {
  animation-fill-mode: both;
}
#installAnim.p2 #W-screwA,
#installAnim.p2 #W-screwB,
#installAnim.s1 #W-screwA,
#installAnim.s1 #W-screwB {
  opacity: 0 !important;
}
@keyframes ag-blink {
  0% {
    opacity: 0;
  }
  20% {
    opacity: .7;
  }
  78% {
    opacity: .6;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ag-flash {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes aw-batt-in {
  0% {
    transform: translate(419px, 396px) rotate(-15.9deg);
  }
  40% {
    transform: translate(74px, -260px) rotate(0deg);
  }
  85% {
    transform: translate(-2px, 7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes aw-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes a-pulse {
  0% {
    stroke-dashoffset: .28;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  46% {
    stroke-dashoffset: -1;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
@keyframes a-ring {
  0%, 40% {
    stroke: #0f766e;
    stroke-width: 5;
  }
  60% {
    stroke: #14b8a6;
    stroke-width: 7;
  }
  100% {
    stroke: #0f766e;
    stroke-width: 5;
  }
}
@keyframes a-motor {
  0%, 45% {
    stroke: #0f766e;
  }
  62% {
    stroke: #14b8a6;
  }
  100% {
    stroke: #0f766e;
  }
}
@keyframes a-spin {
  to {
    transform: rotate(-360deg);
  }
}
#installAnim.s1 #W-rearwheel,
#installAnim.s1 #W-cage {
  transform: none;
  opacity: 1;
}
#installAnim.s1 #W-chain,
#installAnim.s1 #W-ctrl {
  opacity: 1;
}
#installAnim.s2 #W-battery {
  transform: none;
  opacity: 1;
}
#installAnim.s3 #cableShort,
#installAnim.s3 #cableLongA,
#installAnim.s3 #cableLongB {
  stroke-dashoffset: 0;
}
#installAnim.s3 .aziptie,
#installAnim.s3 .aconn {
  opacity: 1;
}
#installAnim.is-reduced *,
#installAnim.is-reduced {
  animation: none !important;
  transition: none !important;
}
#installAnim.is-reduced #W-rearwheel,
#installAnim.is-reduced #W-cage,
#installAnim.is-reduced #W-battery {
  transform: none;
  opacity: 1;
}
#installAnim.is-reduced #W-chain,
#installAnim.is-reduced #W-ctrl {
  opacity: 1;
}
#installAnim.is-reduced #W-screwA,
#installAnim.is-reduced #W-screwB {
  opacity: 0;
}
#installAnim.is-reduced .acable {
  stroke-dashoffset: 0;
}
#installAnim.is-reduced .aziptie,
#installAnim.is-reduced .aconn {
  opacity: 1;
}
#installAnim.is-reduced .aguide,
#installAnim.is-reduced .aflash,
#installAnim.is-reduced .acurrent,
#installAnim.is-reduced .holeping {
  opacity: 0;
}
#installAnim .acable {
  filter: drop-shadow(0 0 1px rgba(243, 245, 241, 1)) drop-shadow(0 0 1px rgba(243, 245, 241, .95)) drop-shadow(0 0 2px rgba(243, 245, 241, .6));
}
#installAnim.install-anim .anim-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) 264px;
}
#installAnim.install-anim .anim-controls {
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
}
@media (max-width: 940px) {
  #installAnim.install-anim .anim-shell {
    grid-template-columns: 1fr;
  }
}