assets/header.svg

<svg fill="none" viewBox="0 0 800 110" width="100%" height="110" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%" x="0" y="0">
    <div xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width: 100%; position: relative;">
      <style>
        .rainbow-text {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
          font-size: 60px;
          line-height: 1.2; /* 显式行高防止切头 */
          font-weight: 900;
          text-align: center;
          
          /* 绝对定位核心代码：强制垂直水平居中 */
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%; /* 确保文字不换行 */
          margin: 0;
          padding: 0;
          
          /* 渐变与动画 */
          background-image: linear-gradient(
            to right, 
            #FF6B6B, #FF9E42, #F0C330, #6BCB77, #4D96FF, #9D78E3, #FF6B6B
          );
          background-size: 200% auto;
          animation: rainbow-flow 4s linear infinite;
          
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          
          filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.15));
        }

        @keyframes rainbow-flow {
          0% { background-position: 0% center; }
          100% { background-position: -200% center; }
        }
      </style>
      <div class="rainbow-text">PersonaLive!</div>
    </div>
  </foreignObject>
</svg>