/**
 * 文件名称：universe.css
 * 文件功能：太阳系动画和菜单样式，包含行星轨道、天体动画、弹出菜单等样式
 * 创建日期：2026-03-16
 * 维护人员：前端开发团队
 * 
 * 关键功能模块：
 * 1. 太阳系动画系统
 * 2. 行星轨道和天体样式
 * 3. 弹出菜单样式
 * 4. 响应式设计
 * 5. 触摸交互优化
 * 6. 暗黑模式适配
 * 7. 动画效果
 * 8. 滚动条样式
 * 
 * 关联文件：
 * - static/js/script.js：与主脚本文件交互，处理太阳系按钮和菜单的交互逻辑
 * - static/css/style.css：主样式文件
 * - static/css/theme.css：主题切换相关样式
 * 
 * 注意事项：
 * - 包含丰富的3D动画效果
 * - 支持深色模式和浅色模式
 * - 响应式设计适配不同屏幕尺寸
 * - 优化触摸交互体验
 */

:root {
    --pov: 66deg;
    --day: 14s;
    --sun-orbit-progress: 0.7;
    --orbit-sphere-color: hsla(260, 80%, 60%, 0.6);
    --orbit-line-color: hsl(260 50% 66%);
    --orbit-line-thickness: 1px;
    --orbit-plane-color: radial-gradient(circle at center,
            hsla(250, 70%, 75%, 0.025),
            hsla(250, 70%, 75%, 0.1));
    --moon-orbit-size: 15px;
    --mercury-orbit-size: 25px;
    --venus-orbit-size: 35px;
    --sun-orbit-size: 45px;
    --mars-orbit-size: 55px;
    --jupiter-orbit-size: 65px;
    --saturn-orbit-size: 75px;
    --stars-orbit-size: 85px;
    --number-of-bodies: 10;
    --circle-delay: calc(var(--day) / 3.97);
    --circular-ease: cubic-bezier(0.37, 0, 0.63, 1);
}

:nth-child(1 of :is(.orbit)) {
    --i: 0;
}

:nth-child(2 of :is(.orbit)) {
    --i: 1;
}

:nth-child(3 of :is(.orbit)) {
    --i: 2;
}

:nth-child(4 of :is(.orbit)) {
    --i: 3;
}

:nth-child(5 of :is(.orbit)) {
    --i: 4;
}

:nth-child(6 of :is(.orbit)) {
    --i: 5;
}

:nth-child(7 of :is(.orbit)) {
    --i: 6;
}

:nth-child(8 of :is(.orbit)) {
    --i: 7;
}

:nth-child(1 of :is(.body, .body-container)) {
    --i: 0;
}

:nth-child(2 of :is(.body, .body-container)) {
    --i: 1;
}

:nth-child(3 of :is(.body, .body-container)) {
    --i: 2;
}

:nth-child(4 of :is(.body, .body-container)) {
    --i: 3;
}

:nth-child(5 of :is(.body, .body-container)) {
    --i: 4;
}

:nth-child(6 of :is(.body, .body-container)) {
    --i: 5;
}

:nth-child(7 of :is(.body, .body-container)) {
    --i: 6;
}

:nth-child(8 of :is(.body, .body-container)) {
    --i: 7;
}

:nth-child(9 of :is(.body, .body-container)) {
    --i: 8;
}

:nth-child(10 of :is(.body, .body-container)) {
    --i: 9;
}

:nth-child(1 of :is(.body-container.galaxy .arm)) {
    --i: 0;
}

:nth-child(2 of :is(.body-container.galaxy .arm)) {
    --i: 1;
}

.universe {
    width: 80px;
    height: 80px;
    perspective: 50000px;
    position: fixed;
    bottom: 32px;
    right: 32px;
    cursor: pointer;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
}

/* 响应式设计 */


.universe:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 触摸交互优化 */
.universe {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.universe:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}



/**
 * ============================================
 * 太阳系按钮弹出菜单系统 - 重构版本
 * ============================================
 * 
 * 架构设计：
 * 1. 状态驱动 - 使用CSS类名管理菜单状态
 * 2. 响应式优先 - 移动优先的响应式设计
 * 3. 性能优化 - 使用transform和opacity实现动画
 * 4. 可访问性 - 完整的ARIA属性支持
 * 
 * 状态说明：
 * - data-state="closed" | 菜单关闭状态
 * - data-state="open" | 菜单打开状态
 * - data-active-item | 当前激活的菜单项ID
 */

/* ============================================
   菜单容器 - 基础样式
   ============================================ */
.universe-menu {
    /* 定位 */
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9998;

    /* 尺寸约束 */
    min-width: 280px;
    max-width: 420px;
    max-height: 70vh;

    /* 视觉样式 - 玻璃拟态效果 */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.25) 100%);
    backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);

    /* 阴影效果 */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);

    /* 内边距 */
    padding: 16px;

    /* 状态管理 - 默认关闭 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom right;

    /* 过渡动画 - 优化流畅性 */
    transition:
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* 性能优化 */
    will-change: transform, opacity, box-shadow;
    contain: layout style paint;

    /* 溢出处理 */
    overflow: hidden;

    /* 状态属性 */
    &[data-state="open"] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        box-shadow:
            0 12px 48px rgba(0, 0, 0, 0.15),
            0 6px 16px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    }
}

/* 菜单容器光效装饰 */
.universe-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: radial-gradient(ellipse at 50% 0%,
            rgba(255, 255, 255, 0.4) 0%,
            transparent 70%);
    pointer-events: none;
    border-radius: 20px 20px 0 0;
}

/* ============================================
   菜单头部
   ============================================ */
.universe-menu-header {
    position: relative;
    text-align: center;
    padding: 12px 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 12px;
}

.universe-menu-header img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ============================================
   菜单内容区域 - 可滚动
   ============================================ */
.universe-menu-content {
    position: relative;
    max-height: calc(70vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;

    /* 自定义滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 153, 240, 0.5) rgba(255, 255, 255, 0.1);

    &::-webkit-scrollbar {
        width: 5px;
    }

    &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(107, 153, 240, 0.5);
        border-radius: 10px;

        &:hover {
            background: rgba(107, 153, 240, 0.8);
        }
    }
}

/* ============================================
   菜单网格布局
   ============================================ */
.universe-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 4px;
}

/* ============================================
   菜单项 - 基础样式
   ============================================ */
.universe-menu-item {
    /* 布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;

    /* 尺寸 */
    padding: 12px 8px;

    /* 视觉样式 */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* 交互 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    /* 过渡动画 */
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    /* 性能优化 */
    will-change: transform;
    transform: translateZ(0);

    /* 子元素定位 */
    position: relative;
    overflow: hidden;
}

/* 菜单项悬停效果 */
.universe-menu-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 20px rgba(107, 153, 240, 0.15);
    border-color: rgba(107, 153, 240, 0.4);
}

/* 菜单项点击效果 */
.universe-menu-item:active {
    transform: translateY(-1px) scale(0.97);
    transition: transform 0.1s ease;
}

/* 菜单项激活状态 - 展开详情 */
.universe-menu-item[data-active="true"] {
    grid-column: span 3;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    aspect-ratio: unset;
    padding: 16px;
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(107, 153, 240, 0.5);
    box-shadow: 0 8px 24px rgba(107, 153, 240, 0.2);
}

/* 菜单项光效背景 */
.universe-menu-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(74, 132, 232, 0.08) 0%,
            rgba(0, 229, 255, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.universe-menu-item:hover::before,
.universe-menu-item[data-active="true"]::before {
    opacity: 1;
}

/* ============================================
   菜单项链接
   ============================================ */
.universe-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

/* 菜单项内部容器 - 支持新旧两种类名 */
.universe-menu-item-inner,
.universe-menu-item>a>.universe-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.universe-menu-item[data-active="true"] .universe-menu-item-inner,
.universe-menu-item[data-active="true"]>a>.universe-menu-content {
    flex-direction: row;
    align-items: flex-start;
}

/* ============================================
   菜单项左侧区域（图标+文字）
   ============================================ */
.universe-menu-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.universe-menu-item[data-active="true"] .universe-menu-left {
    margin-right: 14px;
}

/* ============================================
   菜单图标
   ============================================ */
.universe-menu-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    border: 2px solid var(--primary-dark, #4a84e8);
    color: var(--primary-dark, #4a84e8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.universe-menu-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary-dark, #4a84e8);
    transition: all 0.3s ease;
}

/* 悬停时图标效果 */
.universe-menu-item:hover .universe-menu-icon {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(74, 132, 232, 0.2);
}

.universe-menu-item:hover .universe-menu-icon svg {
    transform: scale(1.1);
}

/* 激活状态图标 */
.universe-menu-item[data-active="true"] .universe-menu-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--primary-dark, #4a84e8), var(--secondary-dark, #00e5ff));
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(107, 153, 240, 0.4);
}

.universe-menu-item[data-active="true"] .universe-menu-icon svg {
    width: 26px;
    height: 26px;
    stroke: white;
}

/* ============================================
   菜单文字
   ============================================ */
.universe-menu-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.universe-menu-item[data-active="true"] .universe-menu-text {
    font-size: 15px;
    margin-bottom: 6px;
    text-align: left;
}

/* ============================================
   菜单右侧区域（描述文字）
   ============================================ */
.universe-menu-right {
    flex: 1;
    min-width: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.universe-menu-item[data-active="true"] .universe-menu-right {
    opacity: 1;
    max-height: 200px;
}

/* ============================================
   菜单描述文字
   ============================================ */
.universe-menu-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* ============================================
   菜单底部
   ============================================ */
.universe-menu-footer {
    position: relative;
    padding: 16px 8px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 12px;
    text-align: center;
}

.universe-menu-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--primary-dark, #4a84e8), var(--secondary-dark, #00e5ff));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(74, 132, 232, 0.3);
}

.universe-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 132, 232, 0.4);
}

.universe-menu-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 132, 232, 0.3);
}





.universe-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.universe-menu-text {
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.3;
}

/* ============================================
   响应式设计 - 弹出菜单系统
   ============================================
   移动优先设计，逐步增强大屏体验
   ============================================ */

/* --------------------------------------------
   小屏移动设备 (< 480px)
   -------------------------------------------- */
@media (max-width: 480px) {

    /* 太阳系按钮 */
    .universe {
        width: 56px;
        height: 56px;
        bottom: 16px;
        right: 16px;
    }

    /* 菜单容器 */
    .universe-menu {
        bottom: 76px;
        right: 8px;
        left: 8px;
        min-width: unset;
        max-width: unset;
        max-height: 65vh;
        padding: 12px;
        border-radius: 16px;
    }

    /* 菜单头部 */
    .universe-menu-header {
        padding: 10px 6px 12px;
        margin-bottom: 10px;
    }

    .universe-menu-header img {
        max-width: 60%;
    }

    /* 菜单内容区域 */
    .universe-menu-content {
        max-height: calc(65vh - 160px);
    }

    /* 网格布局 - 保持3列但缩小间距 */
    .universe-menu-grid {
        gap: 8px;
        padding: 2px;
    }

    /* 菜单项 */
    .universe-menu-item {
        padding: 10px 6px;
        border-radius: 10px;
    }

    /* 菜单图标 */
    .universe-menu-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
    }

    .universe-menu-icon svg {
        width: 18px;
        height: 18px;
    }

    /* 菜单文字 */
    .universe-menu-text {
        font-size: 10px;
    }

    /* 激活状态 */
    .universe-menu-item[data-active="true"] {
        padding: 14px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-icon {
        width: 44px;
        height: 44px;
        margin-right: 12px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-icon svg {
        width: 22px;
        height: 22px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-text {
        font-size: 13px;
    }

    .universe-menu-desc {
        font-size: 12px;
    }

    /* 菜单底部 */
    .universe-menu-footer {
        padding: 12px 6px 6px;
        margin-top: 10px;
    }

    .universe-menu-btn {
        padding: 10px 24px;
        font-size: 13px;
    }
}

/* --------------------------------------------
   平板设备 (481px - 768px)
   -------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {

    /* 太阳系按钮 */
    .universe {
        width: 64px;
        height: 64px;
        bottom: 20px;
        right: 20px;
    }

    /* 菜单容器 */
    .universe-menu {
        bottom: 88px;
        right: 12px;
        min-width: 300px;
        max-width: 380px;
        max-height: 70vh;
        padding: 14px;
    }

    /* 菜单内容区域 */
    .universe-menu-content {
        max-height: calc(70vh - 170px);
    }

    /* 网格布局 */
    .universe-menu-grid {
        gap: 10px;
    }

    /* 菜单项 */
    .universe-menu-item {
        padding: 12px;
    }

    /* 菜单图标 */
    .universe-menu-icon {
        width: 40px;
        height: 40px;
    }

    .universe-menu-icon svg {
        width: 20px;
        height: 20px;
    }

    /* 菜单文字 */
    .universe-menu-text {
        font-size: 11px;
    }

    /* 激活状态 */
    .universe-menu-item[data-active="true"] {
        padding: 16px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-icon {
        width: 48px;
        height: 48px;
    }

    /* 移动端动画优化 */
    .universe .orbit.stars .star {
        opacity: 0.5;
    }

    .body-container.earth .human-lights {
        opacity: 0.3;
    }
}

/* --------------------------------------------
   桌面设备 (> 1024px)
   -------------------------------------------- */
@media (min-width: 1024px) {

    /* 菜单容器 */
    .universe-menu {
        min-width: 360px;
        max-width: 480px;
        padding: 20px;
    }

    /* 菜单头部 */
    .universe-menu-header {
        padding: 16px 10px 18px;
        margin-bottom: 14px;
    }

    .universe-menu-header img {
        max-width: 65%;
    }

    /* 网格布局 */
    .universe-menu-grid {
        gap: 12px;
    }

    /* 菜单项 */
    .universe-menu-item {
        padding: 16px 12px;
        border-radius: 14px;
    }

    /* 菜单图标 */
    .universe-menu-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }

    .universe-menu-icon svg {
        width: 24px;
        height: 24px;
    }

    /* 菜单文字 */
    .universe-menu-text {
        font-size: 13px;
    }

    /* 激活状态 */
    .universe-menu-item[data-active="true"] {
        padding: 20px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-icon {
        width: 56px;
        height: 56px;
        margin-right: 16px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-icon svg {
        width: 28px;
        height: 28px;
    }

    .universe-menu-item[data-active="true"] .universe-menu-text {
        font-size: 16px;
    }

    .universe-menu-desc {
        font-size: 14px;
    }

    /* 菜单底部 */
    .universe-menu-footer {
        padding: 18px 10px 10px;
        margin-top: 14px;
    }

    .universe-menu-btn {
        padding: 14px 40px;
        font-size: 15px;
    }
}

/* --------------------------------------------
   大屏设备 (> 1440px)
   -------------------------------------------- */
@media (min-width: 1440px) {
    .universe-menu {
        max-width: 520px;
    }

    .universe-menu-grid {
        gap: 14px;
    }
}

/* ============================================
   暗黑模式样式 - 弹出菜单系统
   ============================================ */
.dark-mode .universe-menu {
    background: linear-gradient(135deg,
            rgba(60, 60, 70, 0.35) 0%,
            rgba(40, 40, 50, 0.25) 50%,
            rgba(50, 50, 60, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.dark-mode .universe-menu::before {
    background: radial-gradient(ellipse at 50% 0%,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 60%);
}

.dark-mode .universe-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .universe-menu-content {
    scrollbar-color: rgba(107, 153, 240, 0.4) rgba(255, 255, 255, 0.05);

    &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(107, 153, 240, 0.4);

        &:hover {
            background: rgba(107, 153, 240, 0.7);
        }
    }
}

.dark-mode .universe-menu-item {
    background: rgba(30, 30, 40, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.dark-mode .universe-menu-item::before {
    background: linear-gradient(135deg,
            rgba(0, 229, 255, 0.1) 0%,
            rgba(74, 132, 232, 0.1) 100%);
}

.dark-mode .universe-menu-item:hover {
    background: rgba(45, 45, 55, 0.6);
    box-shadow: 0 8px 24px rgba(107, 153, 240, 0.25);
    border-color: rgba(107, 153, 240, 0.4);
}

.dark-mode .universe-menu-item[data-active="true"] {
    background: rgba(55, 55, 65, 0.7);
    border-color: rgba(107, 153, 240, 0.5);
    box-shadow: 0 8px 28px rgba(107, 153, 240, 0.3);
}

.dark-mode .universe-menu-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary, #6b99f0);
}

.dark-mode .universe-menu-icon svg {
    stroke: var(--primary, #6b99f0);
}

.dark-mode .universe-menu-item:hover .universe-menu-icon {
    background: rgba(255, 255, 255, 0.15);
}

.dark-mode .universe-menu-item[data-active="true"] .universe-menu-icon {
    background: linear-gradient(135deg, var(--primary, #6b99f0), var(--secondary, #33eaff));
    border-color: transparent;
}

.dark-mode .universe-menu-item[data-active="true"] .universe-menu-icon svg {
    stroke: white;
}

.dark-mode .universe-menu-text {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .universe-menu-desc {
    color: rgba(255, 255, 255, 0.65);
}

.dark-mode .universe-menu-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .universe-menu-btn {
    background: linear-gradient(135deg, var(--primary, #6b99f0), var(--secondary, #33eaff));
    box-shadow: 0 4px 12px rgba(74, 132, 232, 0.4);
}

.dark-mode .universe-menu-btn:hover {
    box-shadow: 0 6px 20px rgba(74, 132, 232, 0.5);
}

/* 服务说明模态框样式 */
.service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.service-modal.show {
    opacity: 1;
    visibility: visible;
}

.service-modal-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: hidden;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.service-modal.show .service-modal-content {
    transform: translateY(0);
}

.service-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.service-modal-close:hover {
    background-color: var(--accent-color-light);
}

.service-modal-title {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
}

.service-modal-description {
    line-height: 1.6;
}

/* 暗黑模式适配 */
.dark-mode .service-modal-content {
    background-color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .service-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}



/* orbit line */
.orbit {
    --enter-delay: calc(0.1s + var(--i) * (1s / 6));
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size, 30dvmin);
    height: var(--size, 30dvmin);
    border-radius: 50%;
    background: var(--orbit-plane-color);
    box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
    transform-style: preserve-3d;
    rotate: x var(--pov);
    translate: -50% -40%;
    opacity: 0;
    animation: orbit-appear 1.5s var(--enter-delay, 0.1s) forwards;
}

@keyframes orbit-appear {
    to {
        opacity: 1;
        translate: -50% -50%;
    }
}

/* orbit semi-sphere */
.orbit::after {
    --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
    content: '';
    position: absolute;
    top: -75%;
    left: calc(-1 * var(--orbit-line-thickness));
    width: calc(100% + var(--orbit-line-thickness) * 2);
    height: 250%;
    background: radial-gradient(circle var(--cutout) at center,
            #0000 99.9%,
            var(--orbit-sphere-color));
    border-radius: 50%;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
    --size: var(--moon-orbit-size);
}

.orbit.mercury {
    --size: var(--mercury-orbit-size);
}

.orbit.venus {
    --size: var(--venus-orbit-size);
}

.orbit.sun {
    --size: var(--sun-orbit-size);
}

.orbit.mars {
    --size: var(--mars-orbit-size);
}

.orbit.jupiter {
    --size: var(--jupiter-orbit-size);
}

.orbit.saturn {
    --size: var(--saturn-orbit-size);
}

.orbit.stars {
    --size: var(--stars-orbit-size);
    --orbit-sphere-color: hsla(260, 80%, 20%, 0.6);
    --orbit-line-color: hsl(260 50% 60%);
}

.orbit.stars .star {
    --size: 8dvmin;
    --astronomical-unit: calc(var(--stars-orbit-size) / 2 - (var(--y) * var(--y)) * 14dvmin);
    --star-x-delay: calc(var(--j) * -0.5s);
    content: '';
    position: absolute;
    z-index: 1;
    bottom: -8%;
    left: calc(50% + var(--astronomical-unit));
    width: calc(var(--size) * cos(var(--pov)));
    height: var(--size);
    background: #fff0ea99;
    mix-blend-mode: color-dodge;
    clip-path: polygon(50% 0,
            55% 45%,
            100% 50%,
            55% 55%,
            50% 100%,
            45% 55%,
            0% 50%,
            45% 45%);
    translate: -50% calc(-50% + var(--y) * 800%);
    rotate: x calc(var(--y) * 80deg);
    scale: calc(1 - var(--y) / 1.5) calc(1 - var(--y) / 2);
    transform-style: preserve-3d;
    animation: star-rise-and-shine var(--day) var(--star-x-delay) infinite, star-move-x var(--day) var(--star-x-delay) infinite var(--circular-ease),
        star-move-y var(--day) calc(0s - var(--circle-delay) + var(--star-x-delay)) infinite var(--circular-ease);
}

@keyframes star-rise-and-shine {

    from,
    52%,
    to {
        opacity: 0;
    }

    60%,
    93% {
        opacity: 1;
    }

    63%,
    67%,
    71%,
    76%,
    81%,
    86%,
    91% {
        opacity: 1;
    }

    61%,
    65%,
    69%,
    73%,
    78%,
    83%,
    89% {
        opacity: max(0.3, sin(var(--j)));
    }
}

@keyframes star-move-x {

    from,
    to {
        transform: rotateY(-70deg);
    }

    50% {
        transform: rotateY(70deg);
        left: calc(50% - var(--astronomical-unit));
    }
}

@keyframes star-move-y {
    50% {
        bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    }
}

.body,
.body-container {
    --inner-orbit: 0;
    --orbit-progress: 0;
    --sunlight-delay: calc(var(--sun-orbit-progress) * var(--day) * -1);
    --orbit-delay: calc(var(--orbit-progress) * var(--day) * -1);
    --inverse-index: calc(var(--number-of-bodies) - var(--i));
    --shine-delay: calc((var(--sunlight-delay) + var(--orbit-delay)) - (var(--day) * var(--inner-orbit)));
    --anim-body-reveal: body-reveal 1.5s calc(1s + 0.09s * var(--i)) forwards;
    --anim-body-index: body-index var(--day) var(--orbit-delay) infinite;
    --anim-body-shine: body-shine var(--day) var(--shine-delay) linear infinite;
    --anim-body-move-x: body-move-x var(--day) var(--orbit-delay) infinite var(--circular-ease);
    --anim-body-move-y: body-move-y var(--day) calc(var(--orbit-delay) - var(--circle-delay)) infinite var(--circular-ease);
    position: absolute;
    left: calc(50% + var(--astronomical-unit));
    top: 0;
    opacity: 0;
    translate: -50% calc(-50% - (50% * sin(var(--pov))));
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle at center,
            var(--color-1, darkgray),
            var(--color-2, #333) 60%);
    background-size: 300%;
    background-position: center;
    border-radius: 50%;
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), var(--anim-body-move-x), var(--anim-body-move-y);
}

@keyframes body-reveal {
    to {
        top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
        opacity: 1;
    }
}

@keyframes body-index {

    from,
    49% {
        z-index: var(--inverse-index);
    }

    50%,
    to {
        z-index: 0;
    }
}

@keyframes body-shine {
    to {
        background-position-x: -100%;
    }
}

@keyframes body-move-x {
    50% {
        left: calc(50% - var(--astronomical-unit));
    }
}

@keyframes body-move-y {
    50% {
        top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
    }
}

.body-container.earth,
.body-container.moon,
.body-container.mercury,
.venus {
    --inner-orbit: 1;
}

.body-container.earth {
    --size: 4px;
    --color-1: #67aecb;
    --color-2: mediumblue;
    --astronomical-unit: 0%;
    --orbit-progress: calc(1 - var(--sun-orbit-progress));
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), earth-night var(--day) var(--shine-delay) linear infinite;
}

@keyframes earth-night {
    50% {
        box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
    }
}

.body-container.earth .human-lights {
    --color: #fc07;
    --dim-color: #fc04;
    --px: 0.6em;
    --light: 0 var(--px) var(--color);
    --dim-light: 0 var(--px) var(--dim-color);
    --this-mad-city: 0 var(--px) #db709388;
    font-size: calc(var(--size) / 50);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 1em;
    height: 1em;
    translate: -50% -50%;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: difference;
    box-shadow: -5em -16em var(--light), -4em -15em var(--light),
        -3em -16em var(--light), -5em -14em var(--dim-light),
        -6em -13em var(--dim-light), -3em -14em var(--dim-light),
        -2em -13em var(--light), -1em -18em var(--light),
        -1em -16em var(--light), -2em -16em var(--dim-light),
        1em -15em var(--light), 0em -15em var(--dim-light),
        2em -15em var(--dim-light), 4em -14em var(--light),
        8em -11em var(--dim-light), 6em -12em var(--this-mad-city),
        8em -8em var(--light), 7em -5em var(--light),
        4em -19em var(--dim-light), 8em -17em var(--light),
        1em -13em var(--dim-light), 8em -6em var(--dim-light),
        4em -4em var(--light), 17em -10em var(--light),
        19em -7em var(--dim-light), -1em -4em var(--light),
        2em -4em var(--dim-light), 6em -1em var(--dim-light),
        5em -3em var(--dim-light), 6em 1em var(--light);
    animation: earth-human-lights var(--day) var(--shine-delay) linear infinite;
}

@keyframes earth-human-lights {
    50% {
        opacity: 1;
    }
}

.body-container.earth::before,
.body-container.earth::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}

/* continent */
.body-container.earth::before {
    translate: -45% -40%;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 1.8);
    border-radius: 50% 100%;
    clip-path: polygon(0 0,
            100% 0,
            70% 100%,
            30% 100%,
            25% 40%,
            3% 35%,
            0 30%,
            3% 10%,
            4% 0);
    background: linear-gradient(to bottom,
            palegoldenrod 30%,
            darkgreen 60%,
            sienna);
    mix-blend-mode: soft-light;
    filter: blur(0.1dvmin);
}

/* clouds */
.body-container.earth::after {
    width: 100%;
    height: 100%;
    translate: -50% -50%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 0%,
            #fff4 3%,
            #fff4 10%,
            #0000 11%,
            #0000 40%,
            #fff4 60%,
            #0000 80%,
            #0000 100%), repeating-radial-gradient(ellipse calc(var(--size) / 1.5) calc(var(--size) / 6) at 30% 90%, #fff4, #fffa 1%, transparent 3%, #fff9 5%, transparent 7%, #fff4 9%, transparent 11%, transparent 100%);
    background-size: 200% 100%;
    background-position: right center;
    filter: blur(0.1dvmin);
    mix-blend-mode: hard-light;
    animation: earth-clouds calc(var(--day) * 3.1) linear infinite;
}

@keyframes earth-clouds {
    to {
        background-position-x: -100%;
    }
}

.body-container.moon {
    --size: 2px;
    --color-1: #eee;
    --color-2: #333;
    --astronomical-unit: calc(var(--moon-orbit-size) / 2);
    --orbit-progress: 0.2;
    overflow: hidden;
}

.body-container.moon .crater {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    translate: 0 -50%;
    width: calc(var(--size) * 100%);
    height: calc(var(--size) * 100%);
    background: #0003;
    transform-style: preserve-3d;
    transform-origin: left center;
    rotate: x calc(90deg - var(--pov));
    border-radius: 50%;
    box-shadow: 0.1dvmin 0.1dvmin 0.1dvmin #fff7, -0.1dvmin -0.1dvmin 0.1dvmin #0009;
    animation: moon-crater var(--day) calc(var(--day) / -2.2) linear infinite;
}

@keyframes moon-crater {
    from {
        z-index: 1;
        transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
    }

    99.9% {
        z-index: 1;
        transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
    }

    to {
        z-index: 0;
    }
}

.body-container.moon .crater-1 {
    --size: 0.3;
    --x: 30%;
    --y: 20%;
}

.body-container.moon .crater-2 {
    --size: 0.2;
    --x: 66%;
    --y: 55%;
}

.body-container.moon .crater-3 {
    --size: 0.15;
    --x: 55%;
    --y: 40%;
}

.body-container.moon .crater-4 {
    --size: 0.25;
    --x: 27%;
    --y: 50%;
}

.body-container.moon .crater-5 {
    --size: 0.1;
    --x: 60%;
    --y: 70%;
}

.body-container.moon .crater-6 {
    --size: 0.1;
    --x: 20%;
    --y: 40%;
}

.body-container.mercury {
    --size: 2px;
    --color-1: #eed;
    --color-2: #443;
    --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
    --orbit-progress: 0.35;
    overflow: hidden;
}

.body-container.mercury .crater {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    rotate: x calc(90deg - var(--pov));
    translate: 0 -50%;
    transform-style: preserve-3d;
    transform-origin: left center;
    width: calc(var(--size) * 100%);
    height: calc(var(--size) * 100%);
    background: #fff7;
    border-radius: 50%;
    box-shadow: inset 0 0 0.2dvmin 0.02dvmin #0006;
    animation: mercury-crater var(--day) calc(var(--day) / -2) linear infinite;
}

@keyframes mercury-crater {
    from {
        z-index: 1;
        transform: translateX(calc(1 / var(--size) * -100%)) rotateY(-90deg);
    }

    99.9% {
        z-index: 1;
        transform: translateX(calc(1 / var(--size) * 100%)) rotateY(90deg);
    }

    to {
        z-index: 0;
    }
}

.body-container.mercury .crater-1 {
    --size: 0.1;
    --x: 35%;
    --y: 21%;
}

.body-container.mercury .crater-2 {
    --size: 0.15;
    --x: 68%;
    --y: 35%;
}

.body-container.mercury .crater-3 {
    --size: 0.17;
    --x: 50%;
    --y: 42%;
}

.body-container.mercury .crater-4 {
    --size: 0.12;
    --x: 22%;
    --y: 75%;
}

.body-container.mercury .crater-5 {
    --size: 0.2;
    --x: 37%;
    --y: 53%;
}

.body-container.mercury .crater-6 {
    --size: 0.16;
    --x: 17%;
    --y: 79%;
}

.body-container.mercury .crater-7 {
    --size: 0.13;
    --x: 18%;
    --y: 23%;
}

.body-container.mercury .crater-8 {
    --size: 0.17;
    --x: 83%;
    --y: 38%;
}

.body-container.mercury .crater-9 {
    --size: 0.11;
    --x: 60%;
    --y: 18%;
}

.body-container.mercury .crater-10 {
    --size: 0.1;
    --x: 42%;
    --y: 70%;
}

.body-container.mercury .crater-11 {
    --size: 0.14;
    --x: 75%;
    --y: 65%;
}

.body-container.mercury .crater-12 {
    --size: 0.2;
    --x: 86%;
    --y: 60%;
}

.body-container.mercury .crater-13 {
    --size: 0.15;
    --x: 76%;
    --y: 73%;
}

.body-container.mercury .crater-14 {
    --size: 0.14;
    --x: 20%;
    --y: 50%;
}

.body-container.mercury .crater-15 {
    --size: 0.17;
    --x: 27%;
    --y: 22%;
}

.body-container.mercury .crater-16 {
    --size: 0.11;
    --x: 16%;
    --y: 73%;
}

.body.venus {
    --size: 4px;
    --color-1: #eed;
    --color-2: #553;
    --astronomical-unit: calc(var(--venus-orbit-size) / 2);
    --orbit-progress: 0.3;
}

.body.sun {
    --size: 6px;
    --color-1: #fb3;
    --color-2: yellow;
    --astronomical-unit: calc(var(--sun-orbit-size) / 2);
    --orbit-progress: var(--sun-orbit-progress);
    box-shadow: 0 0 2px 1px #ffd, 0 0 4px 2px #fa3;
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-move-x), var(--anim-body-move-y);
}

.body-container.mars {
    --size: 3px;
    --color-1: darkorange;
    --color-2: #750;
    --astronomical-unit: calc(var(--mars-orbit-size) / 2);
    --orbit-progress: 0.6;
    overflow: hidden;
}

.body-container.mars .ice-cap {
    position: absolute;
    width: calc(var(--size) / 2.5);
    height: calc(var(--size) / 2.5);
    top: 0;
    left: 50%;
    translate: -50% -40%;
    rotate: x var(--pov);
    background: radial-gradient(circle at center, #fff8, transparent);
    mix-blend-mode: overlay;
    border-radius: 50%;
    clip-path: polygon(0 0,
            30% 0,
            32% 40%,
            34% 0,
            60% 0,
            82% 60%,
            84% 5%,
            90% 25%,
            70% 27%,
            88% 30%,
            95% 70%,
            60% 71%,
            93% 76%,
            100% 100%,
            66% 66%,
            33% 90%,
            0 100%);
    animation: mars-ice-cap var(--day) linear infinite;
}

@keyframes mars-ice-cap {
    to {
        transform: rotate(-1turn);
    }
}

.body-container.mars::before,
.body-container.mars::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    filter: blur(1.33dvmin);
    background: #1a1300ff;
    mix-blend-mode: hard-light;
    animation: mars-surface var(--day) linear infinite;
}

@keyframes mars-surface {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(200%);
    }
}

.body-container.mars::before {
    translate: -10% -20%;
    width: calc(var(--size) / 3.5);
    height: calc(var(--size) / 1.8);
    clip-path: polygon(5% 19%,
            32% 32%,
            65% 39%,
            83% 38%,
            98% 48%,
            90% 65%,
            78% 64%,
            66% 77%,
            56% 69%,
            47% 67%,
            32% 72%,
            19% 76%,
            8% 68%,
            4% 53%,
            2% 39%);
}

.body-container.mars::after {
    translate: -70% -40%;
    width: calc(var(--size) / 2.6);
    height: calc(var(--size) / 3.5);
    clip-path: polygon(5% 19%,
            32% 32%,
            65% 39%,
            83% 38%,
            98% 48%,
            90% 65%,
            78% 64%,
            66% 77%,
            56% 69%,
            47% 67%,
            32% 72%,
            19% 76%,
            8% 68%,
            4% 53%,
            2% 39%);
}

.body.jupiter {
    --size: 5px;
    --color-1: #9f938f;
    --color-2: #321;
    --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
    --orbit-progress: 0.4;
    overflow: hidden;
}

.body.jupiter::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse 140% 100% at center -5%,
            transparent 38%,
            #6526 41%,
            #6526 44%,
            transparent 45%,
            transparent 46%,
            #652a 46%,
            #652a 52%,
            transparent 53%,
            transparent 58%,
            #652a 60%,
            #652a 66%,
            transparent 67%);
    background-size: 200% 200%;
    background-position: center center;
    mix-blend-mode: soft-light;
}

.body.jupiter::before {
    --great-red-spot-width: calc(var(--size) / 10);
    --great-red-spot-height: calc(var(--size) / 12);
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 calc(var(--size) / 2) var(--color-1);
    background: radial-gradient(ellipse var(--great-red-spot-width) var(--great-red-spot-height) at 70% 68%,
            #5329,
            transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.5) calc(var(--great-red-spot-height) / 2.5) at 80% 60%,
            #fec6,
            transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.3) calc(var(--great-red-spot-height) / 2.3) at 45% 63%,
            #fec6,
            transparent), radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.1) calc(var(--great-red-spot-height) / 2.1) at 30% 36%, #fec6, transparent);
    background-size: 200% 100%;
    background-position: center center;
    mix-blend-mode: overlay;
    animation: jupiter-clouds var(--day) calc(var(--day) / -1.2) linear infinite;
}

@keyframes jupiter-clouds {
    from {
        background-position-x: left;
    }

    to {
        background-position-x: -200%;
    }
}

.body-container.saturn {
    --size: 5px;
    --color-1: #cb9;
    --color-2: #531;
    --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
    --orbit-progress: 0.1;
    --ring-a-size: 180%;
    --ring-a-color: var(--color-1);
    --ring-b-size: 200%;
    --ring-b-color: var(--color-1);
}

.body-container.saturn .body-copy,
.body-container.saturn .storms {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

.body-container.saturn .storms {
    overflow: hidden;
}

.body-container.saturn .storm {
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 50%;
    translate: -50% var(--y);
    rotate: x var(--pov);
    border-radius: inherit;
    mix-blend-mode: overlay;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    background: var(--bg);
    filter: blur(var(--fuzz));
}

.body-container.saturn .storm:nth-child(1) {
    --y: -60%;
    --fuzz: 0.1dvmin;
    --bg: radial-gradient(circle at center,
            transparent 20%,
            #1323 40%,
            transparent);
}

.body-container.saturn .storm:nth-child(2) {
    --y: -35%;
    --fuzz: 0.1dvmin;
    --bg: radial-gradient(circle at center, transparent 55%, #3213);
}

.body-container.saturn .storm:nth-child(3) {
    --y: -15%;
    --fuzz: 0.25dvmin;
    --bg: radial-gradient(circle at center, transparent 25%, #fed2);
}

.body-container.saturn::before,
.body-container.saturn::after,
.body-container.saturn .ring-far {
    position: absolute;
    top: 50%;
    left: 50%;
    rotate: x var(--pov);
    border-radius: 50%;
}

.body-container.saturn::before,
.body-container.saturn::after {
    content: '';
    z-index: 1;
    translate: -50% -50%;
    clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}

.body-container.saturn .ring-far {
    translate: -50% -49%;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.body-container.saturn::before,
.body-container.saturn .ring-far.a {
    width: var(--ring-a-size);
    height: var(--ring-a-size);
    background: radial-gradient(circle calc(var(--size) / 1.5) at center,
            #0000 99.9%,
            var(--ring-a-color));
}

.body-container.saturn::after,
.body-container.saturn .ring-far.b {
    width: var(--ring-b-size);
    height: var(--ring-b-size);
    background: radial-gradient(circle calc(var(--size) / 1.05) at center,
            #0000 99.9%,
            var(--ring-b-color));
}

.body-container.saturn .shadow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    background: radial-gradient(ellipse calc(var(--size) / 1.4) calc(var(--size) / 1.4 * 3) at center,
            #0000 18%,
            #000 18.1%);
    width: 100%;
    height: 75%;
    transform-style: preserve-3d;
    transform-origin: left center;
    rotate: x var(--pov);
    translate: 0 -50%;
    border-radius: 30%;
    border-top-right-radius: 50% 90%;
    border-bottom-right-radius: 50% 90%;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    animation: saturn-shadow var(--day) -2s linear infinite;
}

@keyframes saturn-shadow {

    from,
    40%,
    to {
        opacity: 0.8;
    }

    50%,
    90% {
        opacity: 0.7;
    }

    to {
        transform: rotateZ(-1turn);
    }

    7.8%,
    43.5% {
        z-index: 0;
    }

    43.6% {
        z-index: 2;
    }
}

.body-container.nebula {
    --size: 0.5px;
    --color-1: white;
    --color-2: white;
    --astronomical-unit: calc(var(--stars-orbit-size) / 2);
    --orbit-progress: 0.85;
    --part-width: calc(var(--size) * 30);
    --part-height: calc(var(--size) * 20);
    --center-size: calc(var(--size) * 40);
    --part-bg-1: #4ad8;
    --part-bg-2: #b50a;
    --part-bg-3: #ec2a;
}

.body-container.nebula .body-copy {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    width: var(--center-size);
    height: var(--center-size);
    translate: -50% -50%;
    background: inherit;
    background: radial-gradient(ellipse calc(var(--center-size) / 1.25) calc(var(--center-size) / 2) at center,
            transparent 20%,
            #fff3,
            transparent 60%);
}

.body-container.nebula .body-copy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size));
    height: calc(var(--size));
    animation: nebula-stars-twinkle 3s linear infinite;
}

@keyframes nebula-stars-twinkle {

    from,
    27%,
    40%,
    60%,
    73%,
    to {
        box-shadow: -2dvmin -1.1dvmin 0 #fff2, -3.4dvmin -1dvmin 0 #fff4,
            -1.5dvmin -0.5dvmin 0 #fff3, -1dvmin 1.3dvmin 0 #fff4,
            -4.2dvmin 1dvmin 0 #fff1, -1.5dvmin 0.5dvmin 0 #fff1,
            0.6dvmin -0.6dvmin 0 #fff2, 1.9dvmin -1.4dvmin 0 #fff3,
            2.5dvmin -1dvmin 0 #fff4, 1.5dvmin 0.5dvmin 0 #fff5,
            1.8dvmin 1.25dvmin 0 #fff2, 3dvmin 0.9dvmin 0 #fff3;
    }

    33%,
    66% {
        box-shadow: -2dvmin -1.1dvmin 0 #fff4, -3.4dvmin -1dvmin 0 #fff5,
            -1.5dvmin -0.5dvmin 0 #fff4, -1dvmin 1.3dvmin 0 #fff2,
            -4.2dvmin 1dvmin 0 #fff2, -1.5dvmin 0.5dvmin 0 #fff4,
            0.6dvmin -0.6dvmin 0 #fff6, 1.9dvmin -1.4dvmin 0 #fff4,
            2.5dvmin -1dvmin 0 #fff5, 1.5dvmin 0.5dvmin 0 #fff3,
            1.8dvmin 1.25dvmin 0 #fff4, 3dvmin 0.9dvmin 0 #fff7;
    }
}

.body-container.nebula .part {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(-50% + var(--part-distance)) -50%;
    width: var(--part-width);
    height: var(--part-height);
    border-radius: 100%;
    filter: blur(0.2dvmin);
    background: linear-gradient(var(--part-side),
            var(--part-bg-1) 15%,
            var(--part-bg-2),
            transparent), linear-gradient(to bottom,
            var(--part-bg-3),
            transparent 20%,
            transparent 80%,
            var(--part-bg-3)), radial-gradient(circle at center, transparent 50%, var(--part-bg-3));
}

.body-container.nebula .part.a {
    --part-side: to left;
    --part-distance: -20%;
}

.body-container.nebula .part.b {
    --part-side: to right;
    --part-distance: 20%;
}

.body-container.galaxy {
    --size: 1px;
    --color-1: white;
    --color-2: white;
    --astronomical-unit: calc(var(--stars-orbit-size) / 2);
    --orbit-progress: 0.35;
    --evolution-speed: calc(var(--day) / 3);
    --arm-thickness: 1px;
}

.body-container.galaxy .body-copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    box-shadow: inset 0 0 var(--size) #5206;
}

.body-container.galaxy .arms {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation: galaxy-rotation 5s linear infinite;
}

@keyframes galaxy-rotation {
    to {
        transform: rotate(1turn);
    }
}

.body-container.galaxy .arm {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(-42% + var(--i) * -15%) calc(-42% + var(--i) * -15%);
    rotate: calc(var(--i) * 180deg);
}

.body-container.galaxy .arm-depth {
    width: calc(var(--size) * 15);
    height: calc(var(--size) * 15);
    position: relative;
    transform: rotate(0.4turn);
    animation: galaxy-evolution var(--evolution-speed) ease-in-out infinite;
}

@keyframes galaxy-evolution {
    50% {
        transform: rotate(0.6turn);
    }
}

.body-container.galaxy .arm-depth::before {
    --arm-color: hsl(calc(245 + var(--d) * 20),
            30%,
            calc(60% + var(--d) * 5%));
    content: '';
    position: absolute;
    inset: 0;
    border-top: var(--arm-thickness) solid var(--arm-color);
    border-right: var(--arm-thickness) solid var(--arm-color);
    border-radius: 100%;
    filter: blur(0.2dvmin);
}

.body-container.galaxy .arm-depth::after {
    content: '';
    position: absolute;
    width: calc(var(--size) / 4);
    height: calc(var(--size) / 4);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    box-shadow: 0.8dvmin 0 2.25dvmin 0 brown, -0.8dvmin 0 2.25dvmin 0 brown,
        0 1.6dvmin 1.25dvmin 0 orange, 0 -1.6dvmin 1.25dvmin 0 orange,
        2.4dvmin 0 0.15dvmin 0 white, -2.4dvmin 0 0.15dvmin 0 #fe9,
        0 3.2dvmin 0.15dvmin 0 white, -1.3dvmin 3dvmin 0.3dvmin 0.1dvmin hsla(calc(302 - var(--i) * 70), 50%, calc(64.7% + var(--i) * 10%), calc(0.6 / var(--d) - var(--i) / 4)),
        -2.3dvmin 2.7dvmin 0.3dvmin hsl(250, 30%, 70%), -2.8dvmin 2.2dvmin 0.3dvmin #fa78, 0 -3.2dvmin 0.15dvmin 0 #edf5;
    animation: galaxy-stars-dim var(--evolution-speed) ease-in-out infinite;
}

@keyframes galaxy-stars-dim {

    15%,
    35%,
    65%,
    85% {
        opacity: 0.6;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.body-container.galaxy .arm-depth .arm-depth {
    position: absolute;
    width: 61.8%;
    height: 61.8%;
    bottom: 6%;
    right: 5%;
}