/* Architecture-page-only star field. Version 20260721-header1. */
/* Generated from css/stars-bg.css; homepage bundles must not import this file. */
/* ============================================
   宇宙星空背景 - 三层叠加结构
   层1（z:-1）：body 底部星点（最底层）
   层2（z:0）：.stars-bg-rotate 单一旋转星空（18颗呼吸闪烁白星 + 12颗长亮白星）
   层3（z:1）：.stars-bg-layer 12颗固定常亮白星 + 闪烁白星 + 大十字星 + 星球（上层）
   页面内容（隐含 z:2+）
   ============================================ */

body {
    background-color: #ffffff !important;
    background-image: none !important;
}

body.dark-mode {
    background-color: #0a0a2a !important;
    background-image:
        /* 3团星云 - 增强亮度 */
        /* 3团星云 - 进一步加亮 */
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(102,126,234,0.50), transparent 65%),
        radial-gradient(ellipse 700px 550px at 80% 70%, rgba(118,75,162,0.45), transparent 65%),
        radial-gradient(ellipse 600px 500px at 50% 50%, rgba(79,172,254,0.40), transparent 65%),
        radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 50% 10%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 15% 85%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 55% 90%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 5% 70%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 75% 75%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 40% 25%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 65% 55%, rgba(255,255,255,1.0), transparent),
        radial-gradient(3px 3px at 25% 35%, rgba(255,255,255,1.0), transparent),
        radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,1.0), transparent) !important;
    background-repeat: no-repeat;
    background-position: 20% 30%, 80% 70%, 50% 50%,
                        10% 20%, 50% 10%, 70% 80%, 15% 85%, 90% 40%, 55% 90%,
                        5% 70%, 75% 75%, 40% 25%, 65% 55%, 25% 35%, 85% 15%;
}

.stars-bg-rotate {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    margin-top: -75vh;
    margin-left: -75vw;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    animation: starsRotate 120s linear infinite;
    will-change: transform;
    background-image:
        radial-gradient(circle 4px at 50% 12%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 12px at 15% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 6px at 85% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 9px at 30% 60%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 14px at 75% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 20% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 8px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 11px at 50% 90%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 4px at 60% 40%, rgba(180,200,255,0.36), transparent),
        radial-gradient(circle 10px at 22% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 78% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 7px at 42% 88%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 13px at 68% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 4px at 12% 55%, rgba(180,200,255,0.32), transparent),
        radial-gradient(circle 8px at 55% 22%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 11px at 88% 85%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 6px at 5% 72%, rgba(220,190,255,0.36), transparent),
        radial-gradient(circle 9px at 72% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 5px at 38% 5%, rgba(255,255,255,0.6), transparent),
        radial-gradient(circle 7px at 35% 18%, rgba(220,190,255,0.32), transparent),
        radial-gradient(circle 8px at 8% 42%, rgba(255,255,255,0.4), transparent),
        radial-gradient(circle 14px at 92% 65%, rgba(255,255,255,0.52), transparent),
        radial-gradient(circle 5px at 45% 72%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 11px at 18% 88%, rgba(255,255,255,0.48), transparent),
        radial-gradient(circle 4px at 65% 8%, rgba(255,255,255,0.32), transparent),
        radial-gradient(circle 10px at 33% 50%, rgba(255,255,255,0.44), transparent),
        radial-gradient(circle 13px at 82% 33%, rgba(255,255,255,0.56), transparent),
        radial-gradient(circle 6px at 55% 78%, rgba(255,255,255,0.38), transparent),
        radial-gradient(circle 9px at 10% 95%, rgba(255,255,255,0.5), transparent),
        radial-gradient(circle 7px at 70% 62%, rgba(255,255,255,0.42), transparent),
        radial-gradient(circle 12px at 25% 15%, rgba(255,255,255,0.34), transparent),
        radial-gradient(circle 4px at 48% 28%, rgba(180,200,255,0.46), transparent),
        radial-gradient(circle 8px at 88% 48%, rgba(220,190,255,0.54), transparent),
        radial-gradient(circle 6px at 38% 95%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 14px at 62% 82%, rgba(255,255,255,0.48), transparent),
        radial-gradient(circle 5px at 15% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(circle 10px at 52% 5%, rgba(255,255,255,0.5), transparent),
        radial-gradient(circle 7px at 95% 75%, rgba(255,255,255,0.44), transparent),
        radial-gradient(circle 9px at 5% 28%, rgba(180,200,255,0.38), transparent),
        radial-gradient(circle 11px at 75% 45%, rgba(255,255,255,0.52), transparent),
        radial-gradient(circle 4px at 5% 96%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 6px at 19% 96%, rgba(255,255,255,0.22), transparent),
        radial-gradient(circle 11px at 13% 77%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 3px at 13% 29%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 12px at 5% 73%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 11px at 55% 30%, rgba(255,255,255,0.29), transparent),
        radial-gradient(circle 7px at 2% 22%, rgba(255,255,255,0.34), transparent),
        radial-gradient(circle 8px at 37% 21%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 8px at 15% 13%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 8px at 46% 79%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 3px at 95% 60%, rgba(255,255,255,0.31), transparent),
        radial-gradient(circle 9px at 12% 72%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 12px at 48% 75%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 4px at 7% 86%, rgba(255,255,255,0.25), transparent),
        radial-gradient(circle 7px at 12% 31%, rgba(255,255,255,0.37), transparent),
        radial-gradient(circle 9px at 37% 60%, rgba(255,255,255,0.33), transparent),
        radial-gradient(circle 8px at 22% 49%, rgba(255,255,255,0.27), transparent),
        radial-gradient(circle 7px at 91% 89%, rgba(255,255,255,0.33), transparent),
        radial-gradient(circle 12px at 83% 23%, rgba(255,255,255,0.31), transparent),
        radial-gradient(circle 6px at 22% 61%, rgba(255,255,255,0.28), transparent),
        radial-gradient(circle 11px at 30% 89%, rgba(255,255,255,0.26), transparent),
        radial-gradient(circle 3px at 31% 6%, rgba(255,255,255,0.36), transparent),
        radial-gradient(circle 9px at 36% 10%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 12px at 93% 42%, rgba(255,255,255,0.24), transparent),
        radial-gradient(circle 10px at 52% 84%, rgba(255,255,255,0.29), transparent),
        radial-gradient(circle 7px at 19% 33%, rgba(180,200,255,0.35), transparent),
        radial-gradient(circle 11px at 35% 97%, rgba(180,200,255,0.32), transparent),
        radial-gradient(circle 12px at 53% 48%, rgba(180,200,255,0.24), transparent),
        radial-gradient(circle 5px at 67% 65%, rgba(180,200,255,0.22), transparent),
        radial-gradient(circle 3px at 16% 21%, rgba(180,200,255,0.33), transparent),
        radial-gradient(circle 9px at 78% 10%, rgba(180,200,255,0.28), transparent),
        radial-gradient(circle 12px at 61% 69%, rgba(180,200,255,0.25), transparent),
        radial-gradient(circle 11px at 3% 89%, rgba(220,190,255,0.34), transparent),
        radial-gradient(circle 11px at 98% 36%, rgba(220,190,255,0.35), transparent),
        radial-gradient(circle 8px at 16% 39%, rgba(220,190,255,0.29), transparent),
        radial-gradient(circle 10px at 2% 94%, rgba(220,190,255,0.38), transparent),
        radial-gradient(circle 7px at 66% 24%, rgba(220,190,255,0.3), transparent),
        radial-gradient(circle 4px at 82% 40%, rgba(220,190,255,0.37), transparent),
        radial-gradient(circle 11px at 79% 27%, rgba(220,190,255,0.23), transparent),
        radial-gradient(circle 5px at 71% 69%, rgba(220,190,255,0.38), transparent);
background-size:
        200px 200px,
        300px 300px,
        250px 250px,
        350px 350px,
        400px 400px,
        180px 180px,
        280px 280px,
        320px 320px,
        160px 160px,
        220px 220px,
        220px 220px,
        180px 180px,
        260px 260px,
        340px 340px,
        200px 200px,
        240px 240px,
        310px 310px,
        170px 170px,
        280px 280px,
        190px 190px,
        200px 200px,
        300px 300px,
        180px 180px,
        250px 250px,
        350px 350px,
        220px 220px,
        280px 280px,
        160px 160px,
        310px 310px,
        190px 190px,
        240px 240px,
        170px 170px,
        320px 320px,
        200px 200px,
        260px 260px,
        300px 300px,
        180px 180px,
        220px 220px,
        280px 280px,
        250px 250px,
        273px 202px,
        245px 124px,
        148px 212px,
        198px 181px,
        134px 181px,
        265px 140px,
        141px 244px,
        137px 256px,
        152px 152px,
        288px 241px,
        260px 162px,
        187px 255px,
        275px 228px,
        174px 258px,
        296px 171px,
        199px 222px,
        291px 286px,
        215px 232px,
        252px 235px,
        150px 183px,
        177px 136px,
        206px 125px,
        270px 261px,
        178px 270px,
        176px 121px,
        138px 281px,
        135px 178px,
        137px 128px,
        204px 138px,
        251px 180px,
        191px 291px,
        244px 174px,
        258px 153px,
        266px 267px,
        241px 182px,
        241px 224px,
        168px 144px,
        144px 288px,
        230px 210px,
        228px 225px;
    background-position:
        50% 12%,
        15% 30%,
        85% 25%,
        30% 60%,
        75% 70%,
        20% 80%,
        90% 55%,
        50% 90%,
        60% 40%,
        35% 18%,
        22% 45%,
        78% 15%,
        42% 88%,
        68% 35%,
        12% 55%,
        55% 22%,
        88% 85%,
        5% 72%,
        72% 50%,
        38% 5%,
        8% 42%,
        92% 65%,
        45% 72%,
        18% 88%,
        65% 8%,
        33% 50%,
        82% 33%,
        55% 78%,
        10% 95%,
        70% 62%,
        25% 15%,
        48% 28%,
        88% 48%,
        38% 95%,
        62% 82%,
        15% 60%,
        52% 5%,
        95% 75%,
        5% 28%,
        75% 45%,
        61% 95%,
        8% 88%,
        85% 84%,
        14% 9%,
        53% 95%,
        45% 15%,
        33% 26%,
        26% 70%,
        59% 19%,
        56% 25%,
        37% 61%,
        33% 11%,
        58% 72%,
        14% 8%,
        85% 71%,
        3% 13%,
        98% 32%,
        23% 54%,
        64% 63%,
        29% 53%,
        9% 23%,
        50% 2%,
        51% 35%,
        60% 38%,
        56% 91%,
        95% 73%,
        86% 93%,
        64% 21%,
        26% 39%,
        29% 9%,
        76% 96%,
        71% 9%,
        97% 42%,
        9% 8%,
        76% 63%,
        66% 69%,
        22% 9%,
        67% 12%,
        25% 10%,
        78% 10%;
    background-repeat: no-repeat;
}

@keyframes starsRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes starsRotateFast {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   层3 - 闪烁白星 + 大十字星 + 星球
   z-index: 1，在旋转层之上、页面内容之下
   ============================================ */

.stars-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    contain: layout style paint;
}

/* 旧版用 spread box-shadow 批量绘制长亮星，真实手机会把大 spread
   光斑栅格化成圆角方块。长亮星现由独立 DOM 节点绘制，禁用旧伪元素。 */
.stars-bg-layer::before {
    content: none;
    box-shadow: none;
}

.fixed-long-star,
.rotating-long-star {
    position: absolute;
    width: var(--fixed-long-size, var(--rotating-long-size));
    height: var(--fixed-long-size, var(--rotating-long-size));
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    box-shadow:
        0 0 12px rgba(255,255,255,.96),
        0 0 28px rgba(255,255,255,.46);
}

.fixed-long-star {
    top: var(--fixed-long-top);
    left: var(--fixed-long-left);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.rotating-long-star {
    left: calc(25vw + var(--rotating-long-x));
    top: calc(25vh + var(--rotating-long-y));
    transform: translate(-50%, -50%);
}

/* ============================================
   3a - 闪烁白星（25颗，4-14px 大小不一）
   ============================================ */

.twinkle-star {
    position: absolute;
    top: var(--fixed-star-top);
    left: var(--fixed-star-left);
    width: var(--fixed-star-size);
    height: var(--fixed-star-size);
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255,255,255,1), 0 0 32px rgba(255,220,200,0.8);
    animation: twinkle 2.5s ease-in-out var(--fixed-star-delay, 0s) infinite;
    will-change: transform, opacity;
    z-index: 1;
}

@keyframes twinkle {
    0% { opacity:0; transform:scale(0.3); }
    20% { opacity:1; transform:scale(1.2); }
    40% { opacity:0.6; transform:scale(0.9); }
    60% { opacity:1; transform:scale(1.3); }
    80% { opacity:0.3; transform:scale(0.5); }
    100% { opacity:0; transform:scale(0); }
}

/* ============================================
   3b - 大十字星（3颗，12px 十字光晕）
   ============================================ */

.big-star {
    position: absolute;
    top: var(--big-star-top);
    left: var(--big-star-left);
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow:
        0 0 32px rgba(255,255,255,1),
        0 0 64px rgba(255,255,255,1),
        0 0 110px rgba(255,255,255,0.7),
        0 0 160px rgba(255,255,255,0.35);
    animation: bigStarBlink 3s ease-in-out var(--big-star-delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes bigStarBlink {
    0%, 100% { opacity:0.3; transform:scale(0.6); }
    50%      { opacity:1; transform:scale(1.3); }
}

/* ============================================
   少量四向十字高光
   保留四类白星原有主体，只给选中的星点叠加细长光芒。
   ============================================ */

.star-cross-accent {
    --cross-v: 38px;
    --cross-h: 26px;
    --cross-line: 1px;
    --cross-alpha: .86;
    isolation: isolate;
}

.star-cross-accent::before,
.star-cross-accent::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    opacity: var(--cross-alpha);
    transform: translate(-50%, -50%);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255,255,255,.08) 16%,
        rgba(255,255,255,.72) 43%,
        #fff 50%,
        rgba(255,255,255,.72) 57%,
        rgba(255,255,255,.08) 84%,
        transparent 100%
    );
    box-shadow: 0 0 7px rgba(255,255,255,.72);
}

.star-cross-accent::before {
    width: var(--cross-line);
    height: var(--cross-v);
}

.star-cross-accent::after {
    width: var(--cross-line);
    height: var(--cross-h);
    transform: translate(-50%, -50%) rotate(90deg);
}

.fixed-long-star.star-cross-fixed-long {
    --cross-v: 44px;
    --cross-h: 30px;
    --cross-alpha: .78;
}

.rotating-long-star.star-cross-rotating-long {
    --cross-v: 50px;
    --cross-h: 34px;
    --cross-alpha: .82;
}

.star-cross-fixed-twinkle {
    --cross-v: 34px;
    --cross-h: 22px;
    --cross-alpha: .68;
}

.star-cross-rotating-pulse {
    --cross-v: 42px;
    --cross-h: 28px;
    --cross-alpha: .76;
}

.star-cross-hero {
    --cross-v: 92px;
    --cross-h: 58px;
    --cross-line: 2px;
    --cross-alpha: .92;
}

/* 十字星只保留四向光芒；不再继承圆形星体或圆形 box-shadow。 */
.twinkle-star.star-cross-accent,
.rotating-pulse-star.star-cross-accent,
.big-star.star-cross-accent,
.fixed-long-star.star-cross-accent,
.rotating-long-star.star-cross-accent {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ============================================
   3c - 星球（5颗，22-40px 色彩各异）
   ============================================ */

/* 通用星球样式 */
.planet, .star-planet {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* 星球1 - 红色气态巨行星 (100px) */
.planet1, .planet-red {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 35% 35%, #ff8a80, #d32f2f 60%, #b71c1c 100%);
    box-shadow:
        0 0 80px rgba(255, 100, 100, 0.8),
        0 0 160px rgba(255, 100, 100, 0.5),
        0 0 240px rgba(255, 100, 100, 0.25),
        inset -10px -10px 20px rgba(0,0,0,0.4);
    top: 15%;
    left: 10%;
    animation: planetFloat1 25s ease-in-out infinite;
}

/* 星球2 - 蓝色冰巨星 (140px) */
.planet2, .planet-blue {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at 35% 35%, #82b1ff, #1976d2 60%, #0d47a1 100%);
    isolation: isolate;
    box-shadow:
        0 0 28px rgba(120, 175, 255, 0.9),
        inset -15px -15px 25px rgba(0,0,0,0.4);
    top: 60%;
    right: 8%;
    animation: planetFloat2 30s ease-in-out infinite;
}

/* 蓝色星球原来的100/200/300px动态模糊阴影会在部分GPU上产生栅格分块边界。
   改用单张连续径向渐变作为远距离光晕，随星球一起移动缩放，但不再执行巨型模糊计算。 */
.planet2::before, .planet-blue::before {
    content: '';
    position: absolute;
    inset: -125%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side,
        rgba(145, 190, 255, .62) 0%,
        rgba(105, 160, 255, .45) 18%,
        rgba(70, 125, 245, .27) 38%,
        rgba(35, 90, 220, .13) 56%,
        rgba(15, 55, 165, .045) 70%,
        transparent 82%);
}

/* 星球3 - 紫色星云球 (80px) */
.planet3, .planet-purple {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 35% 35%, #ea80fc, #9c27b0 60%, #6a1b9a 100%);
    box-shadow:
        0 0 70px rgba(200, 100, 255, 0.8),
        0 0 140px rgba(200, 100, 255, 0.5),
        0 0 210px rgba(200, 100, 255, 0.25),
        inset -8px -8px 15px rgba(0,0,0,0.4);
    top: 35%;
    right: 20%;
    animation: planetFloat3 20s ease-in-out infinite;
}

/* 星球4 - 橙色恒星 (60px) */
.planet4, .planet-orange {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 35% 35%, #ffe082, #ff9800 60%, #e65100 100%);
    box-shadow:
        0 0 60px rgba(255, 180, 50, 0.9),
        0 0 120px rgba(255, 180, 50, 0.5),
        0 0 180px rgba(255, 180, 50, 0.25),
        inset -6px -6px 12px rgba(0,0,0,0.3);
    bottom: 20%;
    left: 25%;
    animation: planetFloat4 28s ease-in-out infinite;
}

/* 星球5 - 青色小行星 (45px) */
.planet5, .planet-teal {
    width: 45px;
    height: 45px;
    background: radial-gradient(circle at 35% 35%, #84ffff, #00bcd4 60%, #006064 100%);
    box-shadow:
        0 0 50px rgba(0, 200, 220, 0.8),
        0 0 100px rgba(0, 200, 220, 0.5),
        0 0 150px rgba(0, 200, 220, 0.25),
        inset -5px -5px 10px rgba(0,0,0,0.4);
    top: 75%;
    left: 60%;
    animation: planetFloat5 22s ease-in-out infinite;
}

/* 星球浮动动画 - 带缩放效果 */
.planet1, .planet-red,
.planet2, .planet-blue,
.planet3, .planet-purple,
.planet4, .planet-orange,
.planet5, .planet-teal {
    z-index: 3;
}

/* 闪烁星在大十字星下面 */
.twinkle-star {
    z-index: 1;
}

.big-star {
    z-index: 2;
}
@keyframes planetFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(120px, -80px) scale(1.25); }
    40% { transform: translate(60px, 120px) scale(0.8); }
    60% { transform: translate(-100px, 60px) scale(1.15); }
    80% { transform: translate(-60px, -100px) scale(0.85); }
}

@keyframes planetFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-120px, 80px) scale(1.2); }
    40% { transform: translate(-160px, -60px) scale(0.75); }
    60% { transform: translate(80px, -120px) scale(1.25); }
    80% { transform: translate(40px, 100px) scale(0.85); }
}

@keyframes planetFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-80px, -130px) scale(1.3); }
    40% { transform: translate(100px, -50px) scale(0.75); }
    60% { transform: translate(50px, 100px) scale(1.2); }
    80% { transform: translate(-70px, 60px) scale(0.85); }
}

@keyframes planetFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(100px, 70px) scale(1.2); }
    40% { transform: translate(-70px, -100px) scale(0.8); }
    60% { transform: translate(-130px, 40px) scale(1.25); }
    80% { transform: translate(60px, -80px) scale(0.85); }
}

@keyframes planetFloat5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-70px, -80px) scale(1.3); }
    40% { transform: translate(110px, 50px) scale(0.75); }
    60% { transform: translate(40px, -120px) scale(1.2); }
    80% { transform: translate(-90px, 30px) scale(0.85); }
}

@media (max-width: 768px) {
    /* Keep the architecture page's five independent mobile anchors and periods.
       Explicit opposite-edge resets prevent another component rule from
       converting a left anchor into a right anchor (or top into bottom). */
    .planet1, .planet-red {
        width: 60px;
        height: 60px;
        top: 15%;
        right: auto;
        bottom: auto;
        left: 10%;
        animation: planetFloat1 25s ease-in-out infinite;
    }

    .planet2, .planet-blue {
        width: 80px;
        height: 80px;
        top: 60%;
        right: 8%;
        bottom: auto;
        left: auto;
        animation: planetFloat2 30s ease-in-out infinite;
    }

    .planet3, .planet-purple {
        width: 50px;
        height: 50px;
        top: 35%;
        right: 20%;
        bottom: auto;
        left: auto;
        animation: planetFloat3 20s ease-in-out infinite;
    }

    .planet4, .planet-orange {
        width: 40px;
        height: 40px;
        top: auto;
        right: auto;
        bottom: 20%;
        left: 25%;
        animation: planetFloat4 28s ease-in-out infinite;
    }

    .planet5, .planet-teal {
        width: 30px;
        height: 30px;
        top: 75%;
        right: auto;
        bottom: auto;
        left: 60%;
        animation: planetFloat5 22s ease-in-out infinite;
    }
}

/* ============================================
   Footer 背景星球布局图链接 - 金色高亮
   ============================================ */
footer a[href*="stars-bg-architecture"] {
    color: #f59e0b !important;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s, text-shadow 0.3s;
}

footer a[href*="stars-bg-architecture"]:hover {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(245,158,11,0.5);
}

/* 30颗高亮白星复用 .stars-bg-rotate 的顺时针旋转。
   其中18颗独立DOM星点执行错峰呼吸闪烁，12颗固定长亮。
   每颗星由同坐标的“纯白实体 + 白色光晕”组成，实体直径统一限制为6-20px；
   六行五列交错分布，仍使用同一个旋转父层，不新增旋转合成层。 */
.stars-bg-rotate::before {
    content: none;
}

/* 18颗独立星点各自拥有周期和负延迟：平滑渐亮渐暗，并同步轻微缩放。 */
.rotating-pulse-star {
    position: absolute;
    left: calc(25vw + var(--pulse-x));
    top: calc(25vh + var(--pulse-y));
    width: var(--pulse-size);
    height: var(--pulse-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    opacity: .08;
    /* 与固定位置 .twinkle-star 使用相同的两层光晕强度。 */
    box-shadow: 0 0 16px rgba(255,255,255,1), 0 0 32px rgba(255,220,200,.8);
    animation: rotatingWhiteStarsBlink var(--pulse-duration) cubic-bezier(.45, 0, .55, 1) var(--pulse-delay) infinite;
    will-change: opacity, transform;
}

@keyframes rotatingWhiteStarsBlink {
    0%, 100% {
        opacity: .08;
        transform: translate(-50%, -50%) scale(.55);
    }
    38% {
        opacity: .78;
        transform: translate(-50%, -50%) scale(1.08);
    }
    52%, 62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.32);
    }
    82% {
        opacity: .26;
        transform: translate(-50%, -50%) scale(.75);
    }
}

/* 旋转长亮组也由独立 DOM 节点绘制，禁用旧 spread-shadow 伪元素。 */
.stars-bg-rotate::after {
    content: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .stars-bg-rotate,
    .rotating-pulse-star,
    .rotating-long-star,
    .twinkle-star,
    .fixed-long-star,
    .big-star {
        display: block !important;
    }

    .stars-bg-layer {
        height: 100svh;
        overflow: hidden;
        contain: layout style paint;
    }

    .stars-bg-rotate {
        animation-duration: 150s;
    }

    .big-star {
        width: 16px;
        height: 16px;
        background: transparent !important;
        box-shadow: none !important;
    }

    .star-cross-hero {
        --cross-v: 64px;
        --cross-h: 40px;
        --cross-line: 1px;
    }

    .star-cross-fixed-twinkle {
        --cross-v: 28px;
        --cross-h: 18px;
    }

    .star-cross-rotating-pulse {
        --cross-v: 34px;
        --cross-h: 22px;
    }

    .fixed-long-star.star-cross-accent,
    .rotating-long-star.star-cross-accent {
        --cross-v: 36px;
        --cross-h: 24px;
    }

    .star-planet {
        will-change: auto !important;
    }

    .planet-red { box-shadow: 0 0 34px rgba(255,100,100,.48), inset -8px -8px 16px rgba(0,0,0,.32); }
    .planet-blue { box-shadow: 0 0 30px rgba(120,175,255,.52), inset -10px -10px 18px rgba(0,0,0,.32); }
    .planet-purple { box-shadow: 0 0 30px rgba(200,100,255,.46), inset -7px -7px 14px rgba(0,0,0,.30); }
    .planet-orange { box-shadow: 0 0 28px rgba(255,180,50,.48), inset -6px -6px 12px rgba(0,0,0,.28); }
    .planet-teal { box-shadow: 0 0 26px rgba(0,200,220,.46), inset -5px -5px 10px rgba(0,0,0,.30); }
}

@media (prefers-reduced-motion: reduce) {
    .stars-bg-rotate { animation: none; }
    /* 这18颗只在子节点内呼吸，不移动坐标，仍保留错峰显隐反馈。 */
    .rotating-pulse-star {
        animation-name: rotatingWhiteStarsBlink !important;
        animation-duration: var(--pulse-duration) !important;
        animation-delay: var(--pulse-delay) !important;
        animation-iteration-count: infinite !important;
    }
}

/* QQ_BROWSER_STAR_COMPAT_START */
.stars-bg-rotate,
.stars-bg-layer,
.twinkle-star,
.rotating-pulse-star,
.big-star,
.fixed-long-star,
.rotating-long-star,
.star-cross-accent,
.star-cross-accent::before,
.star-cross-accent::after {
  color-scheme: only light;
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rotating-pulse-star {
  filter: none !important;
  -webkit-filter: none !important;
  will-change: opacity, transform;
}
/* QQ_BROWSER_STAR_COMPAT_END */