#bookmark-tip {
      position: absolute;
      left: 50%;
      top: calc(100% + 6px);
      transform: translateX(-50%);
      background: #222;
      color: #fff;
      font-size: 0.875rem;
      padding: 8px 10px 8px 12px;
      border-radius: 8px;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 999;
  }

  #bookmark-tip::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: #222;
      margin-bottom: -1px;
  }

  #bookmark-tip.is-visible {
      opacity: 1;
      pointer-events: auto;
      animation: tipFloat 1.25s ease-in-out infinite;
  }

  @keyframes tipFloat {

      0%,
      100% {
          transform: translateX(-50%) translateY(0);
      }

      50% {
          transform: translateX(-50%) translateY(3px);
      }
  }

  #bookmark-tip-close {
      position: relative;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.22);
      color: #cbcbcb;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
  }

  #bookmark-tip-close::after {
      content: '×';
      font-size: 16px;
      line-height: 1;
      transform: translateY(-2px);
  }

  #bookmark-tip-close::before {
      content: '';
      position: absolute;
      inset: -8px;
  }

  #bookmark-tip-close:hover {
      background: rgba(255, 255, 255, 0.38);
  }