/* Supplied RainbowButton layers, adapted to static controls and TecViva fill. */
:root{
  --color-1:0 100% 63%;
  --color-2:270 100% 63%;
  --color-3:210 100% 63%;
  --color-4:195 100% 63%;
  --color-5:90 100% 63%;
  --rainbow-fill:#102d40;
  --rainbow-speed:3s;
}

/* Specificity keeps every existing component variant on the same skin. */
.rainbow-button.rainbow-button.rainbow-button{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 20px;
  border:1.3px solid transparent;
  border-radius:var(--radius-control,8px);
  background-image:
    linear-gradient(var(--rainbow-fill),var(--rainbow-fill)),
    linear-gradient(var(--rainbow-fill) 50%,#102d4099 80%,#102d4000),
    linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)));
  background-color:transparent;
  background-size:200% 100%;
  background-clip:padding-box,border-box,border-box;
  background-origin:border-box;
  color:var(--rainbow-ink,#f5f8fa);
  font-family:inherit;
  font-weight:500;
  font-size:13px;
  line-height:1.35;
  letter-spacing:0;
  text-decoration:none;
  list-style:none;
  cursor:pointer;
  animation:tecviva-rainbow var(--rainbow-speed) linear infinite;
  transition:filter .2s,box-shadow .2s,transform .2s;
}
.rainbow-button.rainbow-button.rainbow-button:before{
  content:'';
  position:absolute;
  bottom:-20%;
  left:50%;
  z-index:-1;
  width:60%;
  height:20%;
  transform:translateX(-50%);
  border-radius:inherit;
  background:linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)));
  background-size:200% 100%;
  filter:blur(12px);
  opacity:.55;
  pointer-events:none;
  animation:tecviva-rainbow var(--rainbow-speed) linear infinite;
}
.rainbow-button.rainbow-button.rainbow-button:hover{
  filter:brightness(1.12);
  box-shadow:0 6px 22px #004e7c24;
}
.rainbow-button.rainbow-button.rainbow-button:focus-visible{outline:2px solid #4594bf;outline-offset:4px}
.rainbow-button.rainbow-button.rainbow-button:disabled{opacity:.45;pointer-events:none;cursor:default;animation:none}
.rainbow-button.rainbow-button.rainbow-button:disabled:before{animation:none;opacity:0}
.rainbow-button.rainbow-button.rainbow-button[aria-pressed=true],
.rainbow-button.rainbow-button.rainbow-button[aria-current=true]{box-shadow:0 0 0 2px #9fc5dd70}

/* Compact modes preserve the density of menus and utility controls. */
.navigation .rainbow-button.rainbow-button.rainbow-button,
.header-home.rainbow-button.rainbow-button.rainbow-button,
.menu-toggle.rainbow-button.rainbow-button.rainbow-button{font-size:12px;padding:8px 14px;min-height:38px}
.header-home.rainbow-button.rainbow-button.rainbow-button,
.menu-toggle.rainbow-button.rainbow-button.rainbow-button{display:none}
.filter.rainbow-button.rainbow-button.rainbow-button{font-size:12px;padding:9px 15px;min-height:40px}
.bwf .rainbow-button.rainbow-button.rainbow-button{font-size:10px}
.bwf .bwf-soc.rainbow-button.rainbow-button.rainbow-button:not(.bwf-motion){width:42px;height:42px;min-height:42px;padding:0;border-radius:50%}
.bwf .bwf-motion.rainbow-button.rainbow-button.rainbow-button{width:auto;padding:8px 12px;min-height:42px}
.gallery-tools .rainbow-button.rainbow-button.rainbow-button{font-size:10px;min-height:36px;padding:8px 11px}
.gallery-close.rainbow-button.rainbow-button.rainbow-button,
.training-close.rainbow-button.rainbow-button.rainbow-button{font-size:11px;padding:8px 12px;min-height:38px}
.gallery-arrow.rainbow-button.rainbow-button.rainbow-button,
.pad-wheel-controls .rainbow-button.rainbow-button.rainbow-button,
.timeline-controls .rainbow-button.rainbow-button.rainbow-button{width:auto;height:auto;min-width:82px;min-height:38px;padding:9px 12px;border-radius:var(--radius-control);font-size:11px}
.pad-wheel-nav .rainbow-button.rainbow-button.rainbow-button{font-size:11px;padding:9px 10px;min-height:40px;margin-bottom:5px;text-align:left;justify-content:flex-start}
.pad-training-copy .rainbow-button.rainbow-button.rainbow-button{font-size:11px;padding:11px 14px}
.text-link.rainbow-button.rainbow-button.rainbow-button{font-size:12px;min-height:40px;padding:9px 16px}
.form-note .text-link.rainbow-button.rainbow-button.rainbow-button{font-size:10px;min-height:30px;padding:5px 9px;vertical-align:middle}
summary.rainbow-button::-webkit-details-marker{display:none}
summary.rainbow-button::marker{content:''}

@keyframes tecviva-rainbow{from{background-position:0% 50%}to{background-position:200% 50%}}
@media(max-width:900px){
  .header-home.rainbow-button.rainbow-button.rainbow-button,
  .menu-toggle.rainbow-button.rainbow-button.rainbow-button{display:inline-flex}
  .pad-wheel-nav .rainbow-button.rainbow-button.rainbow-button{width:36px;height:36px;min-height:36px;margin-inline:auto;padding:0;border-radius:50%;justify-content:center}
}
@media(max-width:700px){
  .gallery-meta{gap:8px;flex-wrap:wrap;justify-content:space-between}
  .gallery-caption{flex-basis:calc(100% - 110px);order:-2}
  .gallery-count{order:-1}
  .gallery-arrow.rainbow-button.rainbow-button.rainbow-button{min-width:78px}
  .timeline-controls .rainbow-button.rainbow-button.rainbow-button{min-width:75px}
  .gallery-tools{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 .rainbow-button.rainbow-button.rainbow-button,
 .rainbow-button.rainbow-button.rainbow-button:before{animation:none;transition:none}
}