:root {
      --text-main: #0f172a;
      --text-sub: #64748b;
      --line: #e2e8f0;
      --soft: #f8fafc;
    }

    html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background: #ffffff;
      color: var(--text-main);
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    }

    body {
      cursor: default;
    }

    .page-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 0% 0%, rgba(248,250,252,1), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(241,245,249,0.95), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(248,250,252,1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    }

    .grid-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(15,23,42,0.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,0.028) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(circle at center, black 34%, transparent 88%);
      -webkit-mask-image: radial-gradient(circle at center, black 34%, transparent 88%);
      pointer-events: none;
    }

    .orb {
      position: fixed;
      border-radius: 9999px;
      filter: blur(60px);
      pointer-events: none;
      z-index: 0;
      opacity: 0.95;
    }

    .orb-1 {
      width: 320px;
      height: 320px;
      top: -90px;
      left: -100px;
      background: rgba(226,232,240,0.92);
      animation: orbA 9s ease-in-out infinite;
    }

    .orb-2 {
      width: 280px;
      height: 280px;
      right: -80px;
      top: 10%;
      background: rgba(241,245,249,0.98);
      animation: orbB 7s ease-in-out infinite;
    }

    .orb-3 {
      width: 240px;
      height: 240px;
      bottom: -70px;
      left: 32%;
      background: rgba(248,250,252,1);
      animation: orbC 10s ease-in-out infinite;
    }

    @keyframes orbA {
      0%,100% { transform: translate(0,0) scale(1); }
      50% { transform: translate(24px, 28px) scale(1.08); }
    }

    @keyframes orbB {
      0%,100% { transform: translate(0,0) scale(1); }
      50% { transform: translate(-18px, 18px) scale(1.06); }
    }

    @keyframes orbC {
      0%,100% { transform: translate(0,0) scale(1); }
      50% { transform: translate(12px, -24px) scale(1.05); }
    }

    .ticker-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      overflow: hidden;
      border-bottom: 1px solid rgba(226,232,240,0.9);
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .ticker {
      display: flex;
      min-width: max-content;
      gap: 40px;
      padding: 12px 24px;
      white-space: nowrap;
      animation: tickerMove 14s linear infinite;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .26em;
      text-transform: uppercase;
    }

    @keyframes tickerMove {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .main-wrap {
      position: relative;
      z-index: 10;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 92px 16px 140px;
    }

    .title-glitch {
      position: relative;
      display: inline-block;
      font-weight: 900;
      line-height: 0.92;
      letter-spacing: -0.06em;
      color: #0f172a;
      user-select: none;
    }

    .title-glitch::before,
    .title-glitch::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.55;
    }

    .title-glitch::before {
      color: #64748b;
      transform: translate(2px, -1px);
      animation: glitchA 1.7s infinite ease-in-out;
    }

    .title-glitch::after {
      color: #cbd5e1;
      transform: translate(-2px, 1px);
      animation: glitchB 2s infinite ease-in-out;
    }

    @keyframes glitchA {
      0%,100% { clip-path: inset(0 0 0 0); transform: translate(2px,-1px); }
      20% { clip-path: inset(0 0 68% 0); transform: translate(4px,-2px); }
      40% { clip-path: inset(42% 0 18% 0); transform: translate(1px,1px); }
      60% { clip-path: inset(10% 0 52% 0); transform: translate(3px,-1px); }
      80% { clip-path: inset(55% 0 8% 0); transform: translate(2px,2px); }
    }

    @keyframes glitchB {
      0%,100% { clip-path: inset(0 0 0 0); transform: translate(-2px,1px); }
      20% { clip-path: inset(58% 0 8% 0); transform: translate(-4px,2px); }
      40% { clip-path: inset(14% 0 46% 0); transform: translate(-1px,-1px); }
      60% { clip-path: inset(64% 0 6% 0); transform: translate(-3px,1px); }
      80% { clip-path: inset(28% 0 28% 0); transform: translate(-2px,-2px); }
    }

    .chip {
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 9999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.96);
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      animation: chipPulse 2.8s ease-in-out infinite;
    }

    @keyframes chipPulse {
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.04); }
    }

    .hero-art {
      position: relative;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
      box-shadow:
        0 18px 48px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.92);
      overflow: hidden;
      animation: artFloat 5s ease-in-out infinite;
    }

    .hero-art::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(15,23,42,0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,0.022) 1px, transparent 1px);
      background-size: 18px 18px;
      pointer-events: none;
    }

    @keyframes artFloat {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .popup {
      position: fixed;
      top: 66px;
      right: 18px;
      z-index: 50;
      width: min(360px, calc(100vw - 32px));
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 22px;
      box-shadow: 0 18px 44px rgba(15,23,42,0.08);
      animation: popupIn .5s ease forwards;
    }

    @keyframes popupIn {
      from {
        opacity: 0;
        transform: translateY(-10px) translateX(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0) translateX(0);
      }
    }

    .head-swing {
      transform-origin: center;
      animation: headSwing 1.08s ease-in-out infinite;
    }

    @keyframes headSwing {
      0%,100% { transform: rotate(0deg) translateY(0); }
      20% { transform: rotate(-3deg) translateY(-2px); }
      40% { transform: rotate(2.7deg) translateY(-1px); }
      60% { transform: rotate(-2.2deg) translateY(-2px); }
      80% { transform: rotate(3deg) translateY(0); }
    }

    .blink-eye {
      transform-origin: center;
      animation: blinkEye 1.9s infinite;
    }

    @keyframes blinkEye {
      0%, 40%, 44%, 100% { transform: scaleY(1); }
      42% { transform: scaleY(0.05); }
    }

    .mouth-frame-1 { animation: mouthFrame1 0.14s infinite steps(1); }
    .mouth-frame-2 { animation: mouthFrame2 0.14s infinite steps(1); }
    .mouth-frame-3 { animation: mouthFrame3 0.14s infinite steps(1); }
    .mouth-frame-4 { animation: mouthFrame4 0.14s infinite steps(1); }

    @keyframes mouthFrame1 {
      0%, 24% { opacity: 1; }
      25%, 100% { opacity: 0; }
    }
    @keyframes mouthFrame2 {
      0%, 24% { opacity: 0; }
      25%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
    @keyframes mouthFrame3 {
      0%, 49% { opacity: 0; }
      50%, 74% { opacity: 1; }
      75%, 100% { opacity: 0; }
    }
    @keyframes mouthFrame4 {
      0%, 74% { opacity: 0; }
      75%, 100% { opacity: 1; }
    }

    .swear-a { animation: swearFloatA 1.7s ease-in-out infinite; }
    .swear-b { animation: swearFloatB 1.4s ease-in-out infinite; }
    .swear-c { animation: swearFloatC 2s ease-in-out infinite; }
    .swear-d { animation: swearFloatD 1.6s ease-in-out infinite; }

    @keyframes swearFloatA {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(-6deg); }
    }
    @keyframes swearFloatB {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(10px) rotate(6deg); }
    }
    @keyframes swearFloatC {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(5deg); }
    }
    @keyframes swearFloatD {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(8px) rotate(-5deg); }
    }

    .badge-float-a { animation: badgeFloatA 3.2s ease-in-out infinite; }
    .badge-float-b { animation: badgeFloatB 2.8s ease-in-out infinite; }
    .badge-float-c { animation: badgeFloatC 3.6s ease-in-out infinite; }
    .badge-float-d { animation: badgeFloatD 3s ease-in-out infinite; }

    @keyframes badgeFloatA {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    @keyframes badgeFloatB {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
    }
    @keyframes badgeFloatC {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }
    @keyframes badgeFloatD {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(9px); }
    }

    .pulse-ring {
      animation: pulseRing 2s ease-out infinite;
      transform-origin: center;
    }

    @keyframes pulseRing {
      0% { opacity: .34; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.75); }
    }

    .eq-bar {
      width: 6px;
      border-radius: 999px;
      background: #0f172a;
      animation: eqBounce 0.8s ease-in-out infinite;
      transform-origin: bottom;
    }

    .eq-bar:nth-child(1) { height: 18px; animation-delay: 0s; }
    .eq-bar:nth-child(2) { height: 28px; animation-delay: .1s; }
    .eq-bar:nth-child(3) { height: 22px; animation-delay: .2s; }
    .eq-bar:nth-child(4) { height: 34px; animation-delay: .3s; }
    .eq-bar:nth-child(5) { height: 24px; animation-delay: .15s; }
    .eq-bar:nth-child(6) { height: 20px; animation-delay: .25s; }

    @keyframes eqBounce {
      0%,100% { transform: scaleY(0.45); opacity: .65; }
      50% { transform: scaleY(1.2); opacity: 1; }
    }

    .click-burst {
      position: fixed;
      z-index: 60;
      font-weight: 900;
      font-size: 22px;
      letter-spacing: 0.02em;
      color: #0f172a;
      pointer-events: none;
      animation: burstOut 900ms ease-out forwards;
      user-select: none;
      white-space: nowrap;
    }

    @keyframes burstOut {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
      }
      15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.15);
      }
    }

    .status-bar {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: 14px;
      z-index: 45;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(15,23,42,0.06);
    }

    .footer-line {
      border-top: 1px solid rgba(226,232,240,0.9);
    }

    .chaos-1 .head-swing { animation-duration: 0.9s; }
    .chaos-1 .mouth-frame-1,
    .chaos-1 .mouth-frame-2,
    .chaos-1 .mouth-frame-3,
    .chaos-1 .mouth-frame-4 { animation-duration: 0.12s; }

    .chaos-2 .head-swing { animation-duration: 0.75s; }
    .chaos-2 .mouth-frame-1,
    .chaos-2 .mouth-frame-2,
    .chaos-2 .mouth-frame-3,
    .chaos-2 .mouth-frame-4 { animation-duration: 0.1s; }
    .chaos-2 .title-glitch::before { animation-duration: 1s; }
    .chaos-2 .title-glitch::after { animation-duration: 1.2s; }

    .chaos-max .head-swing { animation-duration: 0.55s; }
    .chaos-max .mouth-frame-1,
    .chaos-max .mouth-frame-2,
    .chaos-max .mouth-frame-3,
    .chaos-max .mouth-frame-4 { animation-duration: 0.08s; }
    .chaos-max .title-glitch::before { animation-duration: .7s; }
    .chaos-max .title-glitch::after { animation-duration: .85s; }
    .chaos-max .hero-art { animation-duration: 1.4s; }

    @media (max-width: 768px) {
      .popup {
        top: 62px;
        right: 12px;
        left: 12px;
        width: auto;
      }

      .status-bar {
        left: 12px;
        right: 12px;
      }
    }

/* 页面加载动画 */
.page-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #e2e8f0;
  border-top-color: #0f172a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 音量控制按钮 */
.audio-control {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  font-size: 20px;
  color: #0f172a;
}

.audio-control:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.audio-control.muted {
  color: #94a3b8;
}

/* 分享按钮 */
.share-btn {
  position: fixed;
  bottom: 160px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0f172a;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  font-size: 20px;
  color: #ffffff;
}

.share-btn:hover {
  transform: scale(1.1);
  background: #1e293b;
}

/* 移动端优化 */
@media (max-width: 640px) {
  .title-glitch {
    font-size: 2.5rem !important;
  }
  
  .hero-art {
    padding: 12px !important;
  }
  
  .ticker {
    font-size: 12px;
  }
  
  .popup {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
  
  .audio-control,
  .share-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    right: 15px;
  }
  
  .audio-control {
    bottom: 80px;
  }
  
  .share-btn {
    bottom: 130px;
  }
  
  .status-bar {
    padding: 12px 16px;
  }
}

/* 彩蛋提示 */
.easter-egg-hint {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 100;
}

.easter-egg-hint.show {
  opacity: 1;
  transform: translateY(0);
}

/* Toast 提示 */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  padding: 12px 24px;
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  transition: transform 0.3s ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}