/* ERA timing challenge polish.
   Color and material only: the challenge behavior and layout stay unchanged. */

body.product-page #greenDemo {
  --demo-cyan: #19a8d1;
  --demo-cyan-deep: #075e80;
  --demo-cyan-dark: #064f6c;
  --demo-cyan-light: #90ddf3;
  --demo-cyan-rgb: 25, 168, 209;
  border-color: rgba(var(--demo-cyan-rgb), .25) !important;
  border-top-color: var(--demo-cyan) !important;
  background:
    radial-gradient(circle at 88% 0, rgba(144, 221, 243, .2), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(243, 252, 255, .9)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(8, 124, 167, .06),
    0 20px 46px rgba(8, 124, 167, .11) !important;
}

body.product-page #greenDemo .gd-badge {
  border-color: rgba(var(--demo-cyan-rgb), .24);
  color: var(--demo-cyan-deep);
  background: linear-gradient(145deg, #fff, #eefaff);
  box-shadow: inset 0 1px 0 #fff, 0 7px 18px rgba(var(--demo-cyan-rgb), .1);
}

body.product-page #greenDemo .gd-badge .pnp-badge-dot {
  background: var(--demo-cyan) !important;
  box-shadow:
    0 0 0 4px rgba(var(--demo-cyan-rgb), .12),
    0 0 12px rgba(var(--demo-cyan-rgb), .26) !important;
}

body.product-page #greenDemo .gd-meter {
  border-color: rgba(var(--demo-cyan-rgb), .22);
  background: linear-gradient(180deg, #eef8fb, #e4f2f6);
  box-shadow:
    inset 0 2px 5px rgba(6, 79, 108, .1),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 24px rgba(var(--demo-cyan-rgb), .08);
}

body.product-page #greenDemo .gd-fill,
body.product-page #greenDemo.ozark-on .gd-fill {
  background-image:
    linear-gradient(90deg, var(--demo-cyan-dark), var(--demo-cyan), var(--demo-cyan-light)) !important;
  box-shadow: 0 0 18px rgba(var(--demo-cyan-rgb), .28);
}

body.product-page #greenDemo.ozark-on .gd-fill {
  background-image:
    linear-gradient(90deg, var(--demo-cyan-deep), var(--demo-cyan) 62%, #2bd576) !important;
}

body.product-page #greenDemo .gd-shoot {
  border: 1px solid var(--demo-cyan-dark);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 38%),
    linear-gradient(135deg, var(--demo-cyan), var(--demo-cyan-deep) 56%, var(--demo-cyan-dark));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 10px 26px rgba(var(--demo-cyan-rgb), .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

body.product-page #greenDemo .gd-shoot:hover,
body.product-page #greenDemo .gd-shoot:focus-visible,
body.product-page #greenDemo.ozark-on .gd-shoot {
  border-color: #05435c;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%),
    linear-gradient(135deg, #24b9df, #087ca7 52%, #064f6c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    0 13px 30px rgba(var(--demo-cyan-rgb), .32),
    0 0 0 1px rgba(var(--demo-cyan-rgb), .08);
}

body.product-page #greenDemo .gd-shoot.is-charging {
  box-shadow:
    0 0 0 5px rgba(var(--demo-cyan-rgb), .1),
    0 14px 34px rgba(var(--demo-cyan-rgb), .3);
}

body.product-page #greenDemo .gd-toggle {
  border-color: rgba(var(--demo-cyan-rgb), .24);
  color: #18323d;
  background:
    linear-gradient(145deg, #fff 35%, #eefaff);
  box-shadow:
    inset 0 1px 0 #fff,
    0 9px 22px rgba(8, 124, 167, .1);
}

body.product-page #greenDemo .gd-toggle-dot {
  border: 1px solid rgba(8, 124, 167, .28);
  background: #d9e9ef;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85);
}

body.product-page #greenDemo .gd-toggle.on {
  border-color: var(--demo-cyan);
  color: var(--demo-cyan-deep);
  background: linear-gradient(145deg, #fff, #e7f8fd);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 26px rgba(var(--demo-cyan-rgb), .18);
}

body.product-page #greenDemo .gd-toggle.on .gd-toggle-dot {
  border-color: #12823b;
  background: #16a34a;
  box-shadow:
    0 0 0 4px rgba(22, 163, 74, .11),
    0 0 13px rgba(22, 163, 74, .4);
}

body.product-page #greenDemo .gd-score {
  border-color: rgba(var(--demo-cyan-rgb), .18);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--demo-cyan-rgb), .08), transparent 46%),
    linear-gradient(145deg, #fff, #f6fcfe);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(8, 124, 167, .09);
}

body.product-page #greenDemo .gd-score.oz {
  border-color: rgba(var(--demo-cyan-rgb), .32);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--demo-cyan-rgb), .14), transparent 52%),
    linear-gradient(145deg, #fff, #eefaff);
}

body.product-page #greenDemo .gd-score.oz .gd-score-label,
body.product-page #greenDemo .gd-score.oz strong {
  color: var(--demo-cyan-deep);
}

body.product-page #greenDemo :is(.gd-shoot, .gd-toggle):focus-visible {
  outline: 3px solid rgba(144, 221, 243, .82) !important;
  outline-offset: 3px;
}

body.product-page #greenDemo .gd-reward-dots span.next {
  background-color: rgba(var(--demo-cyan-rgb), .24) !important;
}

@media (prefers-reduced-transparency: reduce) {
  body.product-page #greenDemo :is(.gd-badge, .gd-toggle, .gd-score) {
    background: #fff;
  }
}