* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 100%; height: 100vh;
      overflow: hidden; position: relative;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: #020308;
    }
    /* ===== 天空渐变层 ===== */
    .sky-layer {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
    }
    .sky-deep {
      background: radial-gradient(ellipse at 50% 0%, #0a0e2a 0%, #050714 40%, #020308 100%);
    }
    .sky-mid {
      background: radial-gradient(ellipse at 30% 60%, rgba(20, 25, 60, 0.6) 0%, transparent 60%);
    }
    .sky-near {
      background: radial-gradient(ellipse at 70% 80%, rgba(15, 30, 50, 0.4) 0%, transparent 50%);
    }
    /* ===== 月亮 ===== */
    .moon-wrapper {
      position: absolute; top: 6%; right: 12%;
      width: 70px; height: 70px;
      z-index: 2;
    }
    .moon {
      position: absolute; width: 60px; height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 38%, #fffef0 0%, #f5f0d0 40%, #d8d0a8 100%);
      box-shadow:
        inset -3px -3px 6px rgba(160, 150, 100, 0.3),
        0 0 25px 5px rgba(255, 254, 240, 0.15),
        0 0 50px 15px rgba(255, 254, 240, 0.06);
    }
    .moon::after {
      content: ''; position: absolute;
      width: 52px; height: 52px; border-radius: 50%;
      background: #020308;
      top: -6px; right: -14px;
    }
    .moon-glow {
      position: absolute; top: -20px; left: -20px;
      width: 100px; height: 100px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 254, 240, 0.08) 0%, transparent 70%);
      animation: moonPulse 4s ease-in-out infinite;
    }
    @keyframes moonPulse {
      0%, 100% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.15); opacity: 0.9; }
    }
    /* ===== 星云薄雾 ===== */
    .nebula {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 1;
      opacity: 0.35;
    }
    .neb {
      position: absolute; border-radius: 50%;
      filter: blur(40px);
      animation: nebFloat 20s ease-in-out infinite alternate;
    }
    @keyframes nebFloat {
      0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      100% { transform: translate(30px, -20px) scale(1.1); opacity: 0.5; }
    }
    /* ===== 星星 ===== */
    .stars {
      position: absolute; top: 0; left: 0; width: 100%; height: 65%;
      pointer-events: none; z-index: 1;
    }
    .star {
      position: absolute; border-radius: 50%;
      animation: twinkle var(--dur) ease-in-out infinite alternate;
    }
    .star.white {
      background: #fff;
      box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.7);
    }
    .star.warm {
      background: #fff8d0;
      box-shadow: 0 0 4px 1px rgba(255, 248, 200, 0.8), 0 0 10px 3px rgba(255, 248, 200, 0.2);
    }
    .star.cool {
      background: #c0d8ff;
      box-shadow: 0 0 3px 1px rgba(160, 200, 255, 0.5);
    }
    @keyframes twinkle {
      0% { opacity: 0.2; transform: scale(0.6); }
      100% { opacity: 1; transform: scale(1.15); }
    }
    /* ===== 流星 ===== */
    .meteors {
      position: absolute; top: 0; left: 0; width: 100%; height: 60%;
      pointer-events: none; z-index: 1; overflow: hidden;
    }
    .meteor {
      position: absolute;
      width: 100px; height: 2px;
      background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
      border-radius: 2px;
      transform: rotate(-35deg);
      opacity: 0;
      animation: meteorFall var(--dur) linear infinite;
      animation-delay: var(--delay);
    }
    .meteor::after {
      content: ''; position: absolute; right: 0; top: -1px;
      width: 4px; height: 4px; border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 6px 2px rgba(255,255,255,0.6);
    }
    @keyframes meteorFall {
      0% { opacity: 0; transform: translateX(0) translateY(0) rotate(-35deg); }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; transform: translateX(-300px) translateY(200px) rotate(-35deg); }
    }
    /* ===== 萤火虫 ===== */
    .fireflies {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 4;
      overflow: hidden;
    }
    .firefly {
      position: absolute;
      width: 3px; height: 3px; border-radius: 50%;
      background: #ccff44;
      box-shadow:
        0 0 6px 2px rgba(180, 255, 60, 0.8),
        0 0 16px 5px rgba(180, 255, 60, 0.3);
      animation:
        flyX var(--durX) ease-in-out infinite alternate,
        flyY var(--durY) ease-in-out infinite alternate,
        glow 3s ease-in-out infinite alternate;
    }
    .firefly::after {
      content: ''; position: absolute;
      width: 1px; height: 1px; border-radius: 50%;
      background: rgba(200, 255, 100, 0.9);
      top: 1px; left: 1px;
    }
    @keyframes flyX {
      0% { transform: translateX(0); }
      100% { transform: translateX(var(--moveX)); }
    }
    @keyframes flyY {
      0% { transform: translateY(0); }
      100% { transform: translateY(var(--moveY)); }
    }
    @keyframes glow {
      0% { opacity: 0.3; box-shadow: 0 0 4px 1px rgba(180,255,60,0.3), 0 0 8px 2px rgba(180,255,60,0.08); }
      100% { opacity: 1; box-shadow: 0 0 10px 3px rgba(180,255,60,0.9), 0 0 22px 7px rgba(180,255,60,0.3); }
    }
    /* ===== 远山 ===== */
    .mountains {
      position: absolute; bottom: 80px; left: 0; width: 100%;
      height: 200px; z-index: 2; pointer-events: none;
    }
    .mountain {
      position: absolute; bottom: 0;
      background: linear-gradient(to top, #060a14, #0c1428);
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }
    .mountain.m1 {
      width: 60%; height: 140px; left: -5%;
      opacity: 0.5;
    }
    .mountain.m2 {
      width: 50%; height: 180px; left: 30%;
      opacity: 0.4;
    }
    .mountain.m3 {
      width: 55%; height: 110px; right: -10%;
      opacity: 0.55;
    }
    /* ===== 地面层 ===== */
    .ground-layer {
      position: absolute; bottom: 0; left: 0; width: 100%;
      z-index: 3; pointer-events: none;
    }
    .hills {
      position: relative; width: 100%; height: 100px;
    }
    .hill {
      position: absolute; bottom: 0;
      background: linear-gradient(to top, #03060c, #081018);
      border-radius: 50% 50% 0 0;
    }
    .hill.h1 {
      width: 120%; height: 90px; left: -10%;
      opacity: 0.85;
    }
    .hill.h2 {
      width: 100%; height: 60px; left: 0;
      opacity: 0.95;
    }
    .grass-field {
      position: relative; width: 100%; height: 40px;
      overflow: hidden;
    }
    .grass {
      position: absolute; bottom: 0; left: 0;
      width: 100%; height: 100%;
    }
    .blade {
      position: absolute; bottom: 0;
      width: 2px;
      background: linear-gradient(to top, #0a1a10, #0f2a18);
      border-radius: 2px 2px 0 0;
      transform-origin: bottom center;
      animation: sway var(--dur) ease-in-out infinite alternate;
    }
    @keyframes sway {
      0% { transform: rotate(-3deg); }
      100% { transform: rotate(3deg); }
    }
    .roses {
      position: absolute; bottom: 10px; left: 0; width: 100%; height: 60px;
      pointer-events: none;
    }
    .rose {
      position: absolute; bottom: 0;
      opacity: 0.35;
    }
    .rose-stem {
      width: 2px;
      background: linear-gradient(to top, #0a1a10, #152818);
      position: absolute; bottom: 0; left: 50%;
      transform: translateX(-50%);
      border-radius: 1px;
    }
    .rose-head {
      position: absolute; top: -6px; left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 8px;
      background: #152818;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    .rose-head::after {
      content: ''; position: absolute;
      top: 2px; left: 2px;
      width: 3px; height: 3px;
      background: #0a1a10;
      border-radius: 50%;
    }
    /* ===== 更新时间 ===== */
    .update-time {
      position: absolute; top: 16px; right: 20px;
      color: rgba(200, 220, 255, 0.7); font-size: 12px;
      text-shadow: 0 0 8px rgba(160, 200, 255, 0.2);
      z-index: 10; letter-spacing: 1px;
      font-family: 'Courier New', monospace;
    }
    /* ===== 内容卡片 ===== */
    .content {
      position: relative; z-index: 5;
      display: flex; align-items: center; justify-content: center;
      height: 100%; width: 100%;
    }
    .card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 28px;
      padding: 40px 52px;
      text-align: center;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 80px rgba(180, 220, 255, 0.02);
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .title {
      color: #e0e8f8; font-size: 18px; font-weight: 600;
      margin-bottom: 22px; letter-spacing: 2px;
      text-shadow: 0 0 14px rgba(180, 210, 255, 0.25);
    }
    .avatar-glow {
      width: 88px; height: 88px; margin: 0 auto 18px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      animation: pulse 3s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 20px 4px var(--glow-color, rgba(180, 220, 255, 0.2)); }
      50% { box-shadow: 0 0 45px 14px var(--glow-color, rgba(180, 220, 255, 0.35)); }
    }
    .avatar {
      width: 64px; height: 64px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      border: 2px solid var(--border-color, rgba(180, 220, 255, 0.3));
      background: rgba(255, 255, 255, 0.1);
    }
    .avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      border-radius: 50%;
    }
    .percentage {
      font-size: 54px; font-weight: 700;
      margin-bottom: 16px; letter-spacing: 2px;
    }
    .progress-track {
      width: 230px; height: 14px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin: 0 auto 14px;
      overflow: hidden;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.04);
    }
    .progress-fill {
      height: 100%; width: 20%; border-radius: 10px;
      animation: shimmer 2.5s linear infinite;
      background-size: 200% 100%;
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .status {
      font-size: 14px;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .bolt {
      font-size: 16px;
      animation: flash var(--flash-dur, 1.5s) ease-in-out infinite;
      filter: drop-shadow(0 0 4px var(--bolt-glow, rgba(255,255,255,0.5)));
    }
    @keyframes flash {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
    }
    /* ===== 播放器 ===== */
    .music-player {
      position: absolute; bottom: 24px; right: 24px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 18px;
      padding: 16px 20px;
      width: 230px;
      z-index: 10;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    }
    .music-title {
      color: #c8d8f0; font-size: 13px; margin-bottom: 10px;
      text-shadow: 0 0 8px rgba(160, 200, 255, 0.15);
      letter-spacing: 1px;
    }
    .music-controls {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      margin-bottom: 10px;
    }
    .btn {
      background: none; border: none; color: #b8cce8;
      font-size: 14px; cursor: pointer; opacity: 0.75;
      transition: all 0.2s;
    }
    .btn:hover { opacity: 1; transform: scale(1.1); }
    .btn.play { font-size: 20px; }
    .music-time {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 8px;
    }
    .music-time span { color: rgba(160, 190, 230, 0.5); font-size: 10px; }
    .music-bar {
      flex: 1; height: 3px; background: rgba(255, 255, 255, 0.06);
      border-radius: 2px; overflow: hidden; cursor: pointer;
    }
    .music-bar-fill {
      height: 100%; width: 0%; background: linear-gradient(90deg, #5a90e0, #a0c8f0);
      border-radius: 2px; box-shadow: 0 0 5px rgba(90, 160, 230, 0.35);
      transition: width 0.1s linear;
    }
    .volume {
      display: flex; align-items: center; gap: 6px;
    }
    .volume span { font-size: 10px; opacity: 0.45; }
    .vol-bar {
      flex: 1; height: 3px; background: rgba(255, 255, 255, 0.06);
      border-radius: 2px; cursor: pointer;
    }
    .vol-fill {
      height: 100%; width: 60%; background: rgba(140, 180, 230, 0.4);
      border-radius: 2px;
    }
    /* 自动播放提示 */
    .autoplay-hint {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 20px 32px;
      color: #c8d8f0; font-size: 14px;
      text-align: center; z-index: 100;
      cursor: pointer; display: none;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      animation: hintPulse 2s ease-in-out infinite;
    }
    @keyframes hintPulse {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 1; }
    }