/* Namespaced rotating counter styles — safe with rest of site */
.rc-wrap{
  display:block;
  width:var(--rc-w,520px);
  height:var(--rc-h,120px);
  margin: var(--rc-mt,0) auto var(--rc-mb,16px);
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rc-tilt, 12deg));   /* symmetric tilt for both top & bottom */
  transform-origin: center;
}


.rc-tube{
  position: absolute; inset:0;
  transform-style: preserve-3d;
  display: grid; place-items: center;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}

.rc-face{
  position:absolute; left:0; right:0; margin:auto;
  width: 100%; height: 100%;
  display:flex; align-items:center; justify-content:center;
  font-size: var(--rc-f,24px);
  color: var(--rc-text,#111);
  background: var(--rc-bg, var(--panel));
  border-radius: var(--rc-radius,18px);
  box-shadow:
    0 0 calc(var(--rc-shadow,10) * 1px) rgba(0,0,0,.08),
    inset 0 0 0 1px var(--rc-edge,#cfd3da);
  text-decoration:none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .rc-wrap{ perspective: none; }
  .rc-face{ position: static; margin:.2rem 0; box-shadow:none; }
  .rc-tube{ display:block; }
}
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}
.rc-cap{
  position:absolute; left:0; right:0; margin:auto;
  width: 100%; height: var(--rc-cap-h,0);
  pointer-events:none;
  opacity: var(--rc-cap-opacity,0.35);
  filter: saturate(0.9);
  border-radius: calc(var(--rc-radius,18px) * 0.9);
  box-shadow:
    0 1px 2px rgba(0,0,0,.12),
    inset 0 0 0 1px var(--rc-edge,#cfd3da);
  background: var(--rc-bg, var(--panel));

}
.rc-cap--top{
  top: -2px;
  transform: translateZ(1px);
}
.rc-cap--bottom{
  bottom: -2px;
  transform: translateZ(1px);
}
/* let clicks pass through the empty parts of the widget */
.rc-wrap { pointer-events: none; }
.rc-face { pointer-events: auto; }  /* keep links clickable */