/* ======================================================== */
/*  PHYSICS-NEBULA // BASE & ENVIRONMENT STYLES           */
/* ======================================================== */
        :root {
            --bg-color: #030409;
            --panel-bg: rgba(6, 10, 18, 0.62);
            --panel-border: rgba(255, 255, 255, 0.08);
            --accent-color: #73d8ff;
            --text-main: #f5f8ff;
            --text-dim: rgba(224, 233, 255, 0.55);
        }

/* ======================================================== */
/* 0. 彻底停用浏览器长按复制、点击变蓝高亮与默认拖拽等原生行为 */
/* ======================================================== */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}

/* 允许搜索输入框等文本交互元素正常输入光标 */
input,
textarea {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
    -webkit-touch-callout: default !important;
}

/* 彻底禁用浏览器选区变蓝高亮效果 */
::selection {
    background: transparent !important;
    color: inherit !important;
}
::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* 彻底清除所有可聚焦元素的默认蓝色外框 (focus outline) 与高亮 */
*:focus,
*:focus-visible,
*:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 彻底禁用所有图片与画面的系统拖拽鬼影 */
img,
svg,
canvas,
a {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: var(--text-main);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    background:
        radial-gradient(circle at 12% 16%, rgba(77, 162, 255, 0.24), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(83, 228, 255, 0.14), transparent 21%),
        radial-gradient(ellipse 44% 28% at 18% 74%, rgba(43, 108, 192, 0.12), transparent 76%),
        radial-gradient(ellipse 42% 26% at 86% 72%, rgba(255, 156, 109, 0.11), transparent 78%),
        radial-gradient(ellipse 56% 34% at 50% 48%, rgba(14, 46, 82, 0.24), transparent 72%),
        radial-gradient(circle at 68% 60%, rgba(255, 181, 114, 0.09), transparent 18%),
        radial-gradient(circle at 34% 78%, rgba(83, 192, 255, 0.08), transparent 22%),
        linear-gradient(112deg, rgba(8, 18, 34, 0.68) 0%, rgba(4, 7, 14, 0.24) 36%, rgba(12, 9, 23, 0.18) 68%, rgba(22, 11, 9, 0.26) 100%),
        linear-gradient(180deg, #05070d 0%, #010204 100%);
}
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
        }

        #container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            background:
                radial-gradient(ellipse 76% 58% at 50% 48%, rgba(14, 28, 45, 0.9) 0%, rgba(6, 10, 18, 0.82) 36%, rgba(2, 3, 7, 0.97) 76%, #010102 100%),
                radial-gradient(ellipse 38% 18% at 18% 56%, rgba(84, 160, 255, 0.13), transparent 74%),
                radial-gradient(ellipse 36% 18% at 82% 48%, rgba(255, 184, 118, 0.09), transparent 76%),
                linear-gradient(116deg, rgba(11, 28, 52, 0.3) 0%, rgba(7, 15, 28, 0.02) 28%, rgba(7, 10, 18, 0.02) 54%, rgba(34, 16, 12, 0.22) 100%);
            overflow: hidden;
            overscroll-behavior: none;
            -webkit-overscroll-behavior: none;
            isolation: isolate;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .depth-bg-layer {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1), background-image 0.5s ease;
            pointer-events: none;
            z-index: 0;
        }

        #container canvas {
            position: relative;
            z-index: 1;
            transition: filter 0.46s ease, transform 0.46s ease, opacity 0.46s ease;
            transform-origin: center center;
        }

        #container::before,
        #container::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
        }

        #container::before {
            background:
                radial-gradient(ellipse 30% 20% at 48% 46%, rgba(255, 255, 255, 0.04), transparent 70%),
                radial-gradient(ellipse 26% 18% at 34% 62%, rgba(255, 230, 180, 0.04), transparent 72%),
                radial-gradient(ellipse 28% 18% at 66% 40%, rgba(255, 210, 130, 0.04), transparent 70%);
            mix-blend-mode: screen;
            opacity: 0.15;
            filter: blur(28px);
            transform: scale(1.07);
        }

        #container::after {
            background-image:
                radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
            background-size: 32px 32px;
            opacity: 0.08;
        }

        .gravity-lens {
            position: absolute;
            left: 0;
            top: 0;
            width: calc(var(--lens-width, 240) * 1px);
            height: calc(var(--lens-height, 176) * 1px);
            pointer-events: none;
            z-index: 3;
            border-radius: 50%;
            opacity: var(--lens-opacity, 0);
            transform:
                translate3d(calc(var(--lens-x, -9999) * 1px), calc(var(--lens-y, -9999) * 1px), 0)
                translate(-50%, -50%)
                scale(var(--lens-scale, 0.88))
                rotate(calc(var(--lens-rotation, 0) * 1deg));
            transform-origin: center center;
            mix-blend-mode: screen;
            backdrop-filter: blur(calc(var(--lens-blur, 0) * 1px)) saturate(calc(1 + var(--lens-opacity, 0) * 1.7)) brightness(1.06);
            -webkit-backdrop-filter: blur(calc(var(--lens-blur, 0) * 1px)) saturate(calc(1 + var(--lens-opacity, 0) * 1.7)) brightness(1.06);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.03),
                0 0 42px rgba(115, 216, 255, 0.08);
            will-change: transform, opacity, width, height;
        }

        .gravity-lens::before,
        .gravity-lens::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
        }

        .gravity-lens::before {
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08) 14%, transparent 46%),
                radial-gradient(circle at 50% 50%, var(--lens-tint-soft, rgba(115, 216, 255, 0.14)) 0%, rgba(255, 255, 255, 0.04) 24%, transparent 68%);
            filter: blur(1px);
            opacity: calc(0.22 + var(--lens-opacity, 0) * 0.88);
        }

        .gravity-lens::after {
            inset: -10%;
            background:
                radial-gradient(ellipse 44% 24% at 50% 50%, rgba(255, 255, 255, 0) 40%, var(--lens-tint-line, rgba(115, 216, 255, 0.3)) 48%, rgba(255, 255, 255, 0) 55%),
                radial-gradient(ellipse 58% 34% at 50% 50%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.18) 53%, rgba(255, 255, 255, 0) 58%);
            opacity: calc(0.08 + var(--lens-opacity, 0) * 0.9);
            filter: blur(0.8px);
        }

        .gravity-lens__core,
        .gravity-lens__ring,
        .gravity-lens__shear {
            position: absolute;
            border-radius: 50%;
            inset: 0;
        }

        .gravity-lens__core {
            inset: 24%;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12) 26%, transparent 72%),
                radial-gradient(circle at 52% 46%, var(--lens-tint-core, rgba(115, 216, 255, 0.18)) 0%, transparent 72%);
            opacity: calc(0.2 + var(--lens-opacity, 0) * 0.78);
            filter: blur(0.6px);
        }

        .gravity-lens__ring {
            inset: 10%;
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.04),
                0 0 24px var(--lens-tint-soft, rgba(115, 216, 255, 0.18));
            opacity: calc(0.12 + var(--lens-opacity, 0) * 0.74);
        }

        .gravity-lens__shear {
            inset: 16% 10%;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transform: scaleX(1.18) scaleY(0.76) rotate(36deg);
            opacity: calc(0.08 + var(--lens-opacity, 0) * 0.54);
            box-shadow: 0 0 22px rgba(255, 255, 255, 0.06);
            filter: blur(0.4px);
        }

        .edge-nebula {
            display: none !important;
        }

        .edge-nebula::before,
        .edge-nebula::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        .edge-nebula--left {
            left: -8%;
            background:
                radial-gradient(ellipse 48% 36% at 66% 18%, rgba(120, 194, 255, 0.18), transparent 68%),
                radial-gradient(ellipse 74% 48% at 74% 54%, rgba(47, 122, 214, 0.26), transparent 72%),
                radial-gradient(ellipse 58% 40% at 84% 80%, rgba(132, 224, 255, 0.13), transparent 72%),
                linear-gradient(16deg, rgba(89, 170, 255, 0.06), transparent 56%);
            mix-blend-mode: screen;
            transform: rotate(-8deg) scale(1.08);
        }

        .edge-nebula--left::before {
            background:
                linear-gradient(90deg, rgba(2, 4, 8, 0.78), rgba(2, 4, 8, 0.18) 36%, transparent 74%),
                radial-gradient(ellipse 34% 64% at 66% 50%, rgba(4, 10, 18, 0.42), transparent 76%);
            mix-blend-mode: multiply;
            opacity: 0.82;
        }

        .edge-nebula--left::after {
            background:
                radial-gradient(ellipse 40% 18% at 84% 34%, rgba(126, 198, 255, 0) 44%, rgba(126, 198, 255, 0.11) 48%, rgba(126, 198, 255, 0) 54%),
                radial-gradient(ellipse 46% 22% at 72% 72%, rgba(76, 171, 255, 0) 46%, rgba(76, 171, 255, 0.08) 50%, rgba(76, 171, 255, 0) 55%),
                linear-gradient(116deg, transparent 18%, rgba(124, 205, 255, 0.07) 42%, transparent 62%);
            opacity: 0.82;
        }

        .edge-nebula--right {
            right: -8%;
            background:
                radial-gradient(ellipse 46% 34% at 30% 16%, rgba(255, 201, 126, 0.14), transparent 70%),
                radial-gradient(ellipse 62% 46% at 24% 52%, rgba(156, 216, 255, 0.16), transparent 72%),
                radial-gradient(ellipse 56% 36% at 12% 80%, rgba(255, 149, 103, 0.12), transparent 72%),
                linear-gradient(194deg, rgba(255, 176, 120, 0.05), transparent 56%);
            mix-blend-mode: screen;
            transform: rotate(6deg) scale(1.08);
        }

        .edge-nebula--right::before {
            background:
                linear-gradient(270deg, rgba(2, 4, 8, 0.78), rgba(2, 4, 8, 0.18) 36%, transparent 74%),
                radial-gradient(ellipse 34% 64% at 34% 48%, rgba(6, 12, 20, 0.38), transparent 76%);
            mix-blend-mode: multiply;
            opacity: 0.82;
        }

        .edge-nebula--right::after {
            background:
                radial-gradient(ellipse 40% 18% at 16% 38%, rgba(255, 205, 127, 0) 44%, rgba(255, 205, 127, 0.11) 48%, rgba(255, 205, 127, 0) 54%),
                radial-gradient(ellipse 44% 20% at 26% 74%, rgba(121, 220, 255, 0) 46%, rgba(121, 220, 255, 0.07) 50%, rgba(121, 220, 255, 0) 55%),
                linear-gradient(248deg, transparent 22%, rgba(255, 198, 138, 0.06) 44%, transparent 64%);
            opacity: 0.8;
        }

        body.portal-open #container canvas {
            filter: blur(7px) saturate(0.88) brightness(0.76);
            transform: scale(1.018);
            will-change: filter, transform;
        }

        body.portal-open .header {
            opacity: 0.14;
            filter: blur(8px);
            transform: scale(0.98);
            transform-origin: left top;
        }

        body.portal-open .guide {
            opacity: 0.1;
            filter: blur(8px);
            transform: translateY(10px);
        }

        body.portal-open .timeline-control {
            opacity: 0.12;
            filter: blur(8px);
            transform: translateY(10px);
        }

        body.atlas-open #container canvas {
            filter: blur(12px) saturate(0.76) brightness(0.42);
            transform: scale(1.05);
            opacity: 0.76;
        }

        body.atlas-open .header,
        body.atlas-open .guide,
        body.atlas-open .timeline-control {
            opacity: 0;
            filter: blur(14px);
            transform: translateY(10px) scale(0.98);
            pointer-events: none;
        }

        .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            box-shadow: 0 0 10px currentColor;
            flex: none;
        }
        @keyframes travelRing {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            35% { opacity: 0.4; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); }
        }

        @keyframes travelCore {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
            25% { opacity: 0.96; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
        }

        @keyframes travelCaption {
            0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
            30% { opacity: 0.96; }
            100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
        }

        @keyframes dimensionFade {
            0% { opacity: 0; }
            14% { opacity: 1; }
            100% { opacity: 0; }
        }

        @keyframes dimensionSpiral {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
            34% { opacity: 0.92; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24) rotate(220deg); }
        }

        @keyframes dimensionTunnel {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24) rotate(0deg); }
            28% { opacity: 0.88; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(-84deg); }
        }

        @keyframes dimensionRing {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.56); }
            38% { opacity: 0.42; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
        }

        @keyframes dimensionCore {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.48); }
            24% { opacity: 0.96; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
        }

        @keyframes dimensionCaption {
            0% { opacity: 0; transform: translateX(-50%) translateY(12px); }
            30% { opacity: 0.94; }
            100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
        }

        @keyframes starfieldBreath {
            0% {
                filter: blur(6px) saturate(0.84) brightness(0.72);
                transform: scale(1.014);
            }
            50% {
                filter: blur(8px) saturate(0.94) brightness(0.82);
                transform: scale(1.028);
            }
            100% {
                filter: blur(6px) saturate(0.84) brightness(0.72);
                transform: scale(1.014);
            }
        }

        @keyframes portalBloom {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
            45% { opacity: 0.92; }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        @keyframes portalPulse {
            0% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.2; }
            50% { transform: translate(-50%, -50%) scale(1.03); opacity: 0.38; }
            100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.2; }
        }

        @keyframes portalSpin {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes portalHalo {
            0% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.22; }
            50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.34; }
            100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.22; }
        }

        @keyframes portalFlare {
            0% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.14; }
            50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.32; }
            100% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.14; }
        }

        @keyframes atlasZoneAppear {
            0% { opacity: 0; transform: scale(0.96); }
            100% { opacity: 1; transform: scale(1); }
        }

        @keyframes atlasLinkAppear {
            0% { opacity: 0; stroke-dashoffset: 80; }
            100% { opacity: 0.12; stroke-dashoffset: 0; }
        }

        @keyframes atlasNodeAppear {
            0% { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.92); }
            100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
        }