/* The hero and process use the same overhead light and blue enamel. */
:root {
  --control-blue-fill:
    radial-gradient(62% 54% at 27% 16%,rgb(220 237 255 / .9) 0%,transparent 72%),
    linear-gradient(132deg,#8fbaf6 0%,#3f79df 46%,#1f4a9b 100%);
}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-node {
  background:var(--control-blue-fill)!important;
}
html .hero .hero-scene .hero-mode svg {
  background:radial-gradient(58% 52% at 28% 17%,#fff,transparent 74%),linear-gradient(132deg,#fff7ee,#faf7f1 43%,#e8eaf0)!important;
  border:1px solid rgb(99 107 124 / .16)!important;
  color:#3d4656!important;filter:none!important;opacity:1!important;
  box-shadow:inset 1px 1px 0 rgb(255 244 231 / .96),inset -1px -2px 2px rgb(60 72 100 / .18),0 3px 0 #bdb6ad,0 5px 3px rgb(52 42 34 / .14),0 10px 16px rgb(52 42 34 / .14)!important;
  transition:transform 260ms cubic-bezier(.2,.8,.3,1),box-shadow 260ms ease,color 180ms ease!important;
}
html[data-skin="nocturne"] .hero .hero-scene .hero-mode svg {
  background:radial-gradient(58% 52% at 28% 17%,rgb(176 208 249 / .24),transparent 74%),linear-gradient(132deg,#354765,#1a2941)!important;
  color:#dce8f7!important;
  box-shadow:inset 1px 1px 0 rgb(218 236 255 / .22),inset -1px -2px 2px rgb(0 4 13 / .5),0 3px 0 #081223,0 8px 16px rgb(0 0 0 / .3)!important;
}
html .hero .hero-scene .hero-mode:is(:hover,:focus-visible) svg {
  background:radial-gradient(58% 52% at 28% 17%,#fff,transparent 74%),linear-gradient(132deg,#e5f1ff,#c1d9fa 46%,#92b6e8)!important;
  border-color:rgb(99 147 217 / .6)!important;color:#2457a6!important;
  transform:translateY(-2px) scale(1.04)!important;
  box-shadow:inset 1px 1px 0 rgb(255 255 255 / .8),inset -1px -2px 2px rgb(54 91 148 / .24),0 4px 0 #7898c5,0 10px 18px rgb(39 77 134 / .2)!important;
}
/* Keep selection blue during autoplay pauses as well as clicks and detents. */
html .hero .hero-scene .hero-services .hero-mode[aria-checked="true"] svg {
  background:var(--control-blue-fill)!important;
  border-color:rgb(110 151 229 / .76)!important;color:#fff!important;
  transform:translateY(-3px) scale(1.08)!important;
  box-shadow:inset 1px 1px 0 rgb(255 245 232 / .52),inset -1px -2px 3px rgb(8 25 58 / .5),0 5px 0 #173a78,0 8px 5px rgb(19 47 100 / .3),0 15px 24px rgb(47 102 201 / .28)!important;
  animation:none!important;
}
html .hero .hero-mode[aria-checked="true"] svg > * {
  transform-box:view-box;transform-origin:50% 50%;
  animation:hero-control-arrive 520ms cubic-bezier(.2,.8,.3,1) both;
}
@keyframes hero-control-arrive {
  0% {transform:scale(.82) rotate(-9deg);opacity:.6;}
  55% {transform:scale(1.08) rotate(3deg);opacity:1;}
  100% {transform:scale(1) rotate(0);opacity:1;}
}
@media(prefers-reduced-motion:reduce) {
  html .hero .hero-scene .hero-mode svg {transition:none!important;}
  html .hero .hero-mode[aria-checked="true"] svg > * {animation:none;}
}