* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
      background: #050912;
    }

    #root {
      height: 100vh;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fu {
      animation: fadeUp .7s ease both;
    }

    .fu1 {
      animation-delay: .08s;
    }

    .fu2 {
      animation-delay: .2s;
    }

    .fu3 {
      animation-delay: .34s;
    }

    .fu4 {
      animation-delay: .48s;
    }

    .fu5 {
      animation-delay: .62s;
    }

    @keyframes burstRing {
      0% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: .9;
      }

      100% {
        transform: translate(-50%, -50%) scale(5.5);
        opacity: 0;
      }
    }

    /* ── 彩虹扩散波纹（对齐未读回复效果）── */
    @keyframes waveExpand {
      0% {
        transform: scale(.9);
        opacity: 1;
        filter: blur(0px);
      }

      100% {
        transform: scale(3.2);
        opacity: 0;
        filter: blur(6px);
      }
    }

    .rainbow-wave-ring {
      position: absolute;
      width: var(--ring-size, 110px);
      height: var(--ring-size, 110px);
      border-radius: 50%;
      border: 2.5px solid transparent;
      background-image:
        linear-gradient(#050912, #050912),
        conic-gradient(#2792ff, #55e0ff, #ff9933, #55e0ff, #2792ff);
      background-origin: border-box;
      background-clip: content-box, border-box;
      animation: waveExpand 8s infinite cubic-bezier(.25, .46, .45, .94);
      opacity: 0;
      pointer-events: none;
    }

    .rainbow-wave-ring:nth-child(2) {
      animation-delay: 1.3s;
    }

    .rainbow-wave-ring:nth-child(3) {
      animation-delay: 2.6s;
    }

    @keyframes badgePulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); box-shadow: 0 2px 10px rgba(255, 77, 79, .7); }
      100% { transform: scale(1); }
    }

    .unread-badge {
      position: absolute;
      top: -12px;
      right: -16px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      background-color: #ff4d4f;
      color: #fff;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(255, 77, 79, .5);
      z-index: 20;
      box-sizing: border-box;
      line-height: 1;
      animation: badgePulse 2s infinite;
      pointer-events: none;
    }

    .explore-orb {
      position: relative;
      width: var(--orb-size, 380px);
      height: var(--orb-size, 380px);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .explore-glow {
      position: absolute;
      width: var(--glow-size, 200px);
      height: var(--glow-size, 200px);
      border-radius: 50%;
      background: rgba(66, 133, 244, .13);
      filter: blur(34px);
      pointer-events: none;
    }

    .explore-waves {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .explore-core-btn {
      position: relative;
      z-index: 4;
      width: var(--core-size, 124px);
      height: var(--core-size, 124px);
      border-radius: 50%;
      cursor: pointer;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: inset 0 0 18px rgba(255, 255, 255, .035);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: transform .18s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
    }

    .explore-core-btn:hover {
      transform: scale(1.06);
      background: rgba(255, 255, 255, .045);
      border-color: rgba(255, 255, 255, .12);
    }

    .explore-core-btn:active {
      transform: scale(.94);
    }

    .explore-btn-text-wrapper {
      position: relative;
      display: inline-block;
      color: rgba(255,255,255,.92);
      font-family: "Space Grotesk", sans-serif;
      font-size: var(--explore-text-size, 15px);
      font-weight: 500;
      letter-spacing: .08em;
      line-height: 1;
    }

    @keyframes cardAppear {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.88);
      }

      14% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      76% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.94);
      }
    }

    @keyframes starTwinkle {

      0%,
      100% {
        opacity: .15;
      }

      50% {
        opacity: .38;
      }
    }

    @keyframes stanzaIn {
      0% { opacity: 0; filter: blur(4px); }
      100% { opacity: 1; filter: blur(0); }
    }

    @keyframes stanzaOut {
      0% { opacity: 1; filter: blur(0); }
      100% { opacity: 0; filter: blur(4px); }
    }

    @keyframes caretBlink {
      50% { opacity: 0; }
    }

    .manifesto {
      --line-h: clamp(30px, 4vw + 14px, 40px);
      --m-font: clamp(15px, 1.6vw + 9px, 19px);
      position: relative;
      width: 100%;
      max-width: 600px;
      margin-bottom: 38px;
      text-align: center;
      font-family: "Noto Serif SC", serif;
    }

    .manifesto-window {
      position: relative;
      width: 100%;
      height: calc(var(--line-h) * 3);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 82%, rgba(0,0,0,.55) 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 82%, rgba(0,0,0,.55) 100%);
    }

    .manifesto-stack {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      transition: transform .85s cubic-bezier(.22,.61,.36,1);
      animation: stanzaIn 1.2s cubic-bezier(.2,.8,.2,1) both;
      will-change: transform;
    }

    .manifesto.exiting .manifesto-stack {
      animation: stanzaOut .9s cubic-bezier(.4,0,.6,1) both;
    }

    .manifesto-line {
      height: var(--line-h);
      line-height: var(--line-h);
      font-size: var(--m-font);
      font-weight: 300;
      letter-spacing: .05em;
      color: rgba(255, 255, 255, .86);
      white-space: nowrap;
    }

    .manifesto-line.final {
      background: linear-gradient(135deg, #B8E0F5, #5EA6D9 50%, #296BB0);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 400;
      letter-spacing: .08em;
    }

    .manifesto-caret {
      display: inline-block;
      width: 1.5px;
      height: .9em;
      background: rgba(94,166,217,.95);
      margin-left: 5px;
      vertical-align: -.04em;
      border-radius: 1px;
      box-shadow: 0 0 10px rgba(94,166,217,.85);
      animation: caretBlink 1s steps(2,start) infinite;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: clamp(54px, 7vw, 96px);
      width: 100%;
      max-width: 1120px;
    }

    .left-pane {
      flex: 1 1 0;
      max-width: 520px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .right-pane {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .manifesto-static {
      width: 100%;
      max-width: 520px;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif;
      color: rgba(255, 255, 255, .86);
    }

    .manifesto-kicker {
      margin-bottom: 16px;
      font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(94,166,217,.72);
    }

    .manifesto-title {
      max-width: 500px;
      margin: 0 0 22px;
      font-family: "Noto Serif SC", "Songti SC", serif;
      font-size: clamp(26px, 2.6vw + 10px, 42px);
      line-height: 1.34;
      font-weight: 300;
      letter-spacing: .035em;
      color: rgba(255,255,255,.92);
    }

    .manifesto-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 500px;
    }

    .manifesto-body p {
      margin: 0;
      font-size: clamp(15px, .55vw + 12px, 18px);
      line-height: 1.95;
      font-weight: 300;
      letter-spacing: .035em;
      color: rgba(255,255,255,.68);
    }

    .manifesto-line,
    .manifesto-static-line,
    .manifesto-static-copy {
      color: rgba(255,255,255,.78);
    }

    .manifesto-line.final,
    .manifesto-static-line.final,
    .manifesto-static-copy .final {
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      -webkit-text-fill-color: currentColor;
      font-weight: inherit;
      letter-spacing: inherit;
      margin-top: 0;
      font-size: inherit;
    }

    .seo-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 600px) {
      .main-layout {
        flex-direction: column;
        gap: 6px;
        align-items: center;
      }

      .left-pane, .right-pane {
        width: 100%;
        max-width: none;
        align-items: center;
      }

      .manifesto-static {
        max-width: 335px;
        text-align: center;
        margin: 8px auto 6px;
      }

      .manifesto-kicker {
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: .18em;
      }

      .manifesto-title {
        margin-bottom: 14px;
        max-width: 330px;
        font-size: clamp(21px, 6.4vw, 26px);
        line-height: 1.42;
        letter-spacing: .02em;
      }

      .manifesto-body {
        max-width: 330px;
        gap: 8px;
      }

      .manifesto-body p {
        font-size: 14px;
        line-height: 1.78;
        letter-spacing: .018em;
        color: rgba(255,255,255,.66);
      }

      .rainbow-wave-ring {
        width: var(--ring-size, 98px);
        height: var(--ring-size, 98px);
      }

      .unread-badge {
        top: -11px;
        right: -15px;
        min-width: 15px;
        height: 15px;
        font-size: 9px;
      }

      .site-card {
        width: 170px !important;
        padding: 10px 12px !important;
      }

      .site-card-title {
        font-size: 9px !important;
      }

      .site-card-body {
        font-size: 11px !important;
        line-height: 1.4 !important;
      }

      .downloads-container {
        flex-direction: column !important;
        width: 250px !important;
        margin: 0 auto !important;
      }

      .download-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
      }

      .download-btn-text {
        font-size: 15px !important;
      }

      .footer-bottom {
        flex-direction: column !important;
        gap: 6px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
      }
    }