.clipo-section-thought-nav {
  position: fixed;
  z-index: 80;
  top: calc(var(--instatic-logical-viewport-height, 100vh) * 0.5);
  right: 2px;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(12px, -50%, 0) scale(0.9);
  transform-origin: 100% 50%;
  transition:
    opacity 0.22s ease,
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.38s;
  will-change: transform, opacity;
  pointer-events: none;
}

.clipo-section-thought-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, -50%, 0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

.clipo-section-thought-nav__dot {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.clipo-section-thought-nav__dot::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border: 1px solid #f7f7f6;
  background: #cacac9;
  transform: translate3d(var(--dock-shift, 0px), 0, 0) scale(var(--dock-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

.clipo-section-thought-nav__dot.is-active::before {
  background: #2336f1 !important;
}

.clipo-section-thought-nav__dot:focus-visible {
  outline: 1px solid #2336f1;
  outline-offset: 1px;
}

.clipo-section-thought-nav__bubble {
  position: absolute;
  top: var(--bubble-top, -40px);
  /* The bolt tip lives at the bubble's right edge. */
  right: 7px;
  left: auto;
  width: 112px;
  height: 52px;
  opacity: 0;
  transform-origin: var(--bubble-tip-x, 100%) var(--bubble-tip-y, 50px);
}

.clipo-section-thought-nav.show-bubble .clipo-section-thought-nav__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.clipo-section-thought-nav__bubble {
  visibility: hidden;
  pointer-events: none;
}

.clipo-section-thought-nav__thought {
  position: absolute;
  inset: 0;
  transform-origin: var(--bubble-tip-x, 100%) var(--bubble-tip-y, 50px);
  animation: clipo-thought-corner-drift 2.8s ease-in-out infinite alternate;
}

.clipo-section-thought-nav__bolt {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.clipo-section-thought-nav__name {
  position: absolute;
  top: 6px;
  right: 24%;
  left: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin: 0;
  color: #f7f7f6;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.36px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(2deg) skewX(8deg);
  transform-origin: 50% 50%;
}

@keyframes clipo-thought-corner-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2px, -1px, 0) scale(1.035); }
}

@media not all {
  .clipo-section-thought-nav__thought {
    animation: none;
  }
}