/* =========================================================
   1. 字体配置 (Fonts)
   ========================================================= */
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Ultralight'), local('PingFangSC-Ultralight'), url('./fonts/PingFang/PingFangSC-Ultralight.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Thin'), local('PingFangSC-Thin'), url('./fonts/PingFang/PingFangSC-Thin.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Light'), local('PingFangSC-Light'), url('./fonts/PingFang/PingFangSC-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Regular'), local('PingFangSC-Regular'), url('./fonts/PingFang/PingFangSC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Medium'), local('PingFangSC-Medium'), url('./fonts/PingFang/PingFangSC-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Semibold'), local('PingFangSC-Semibold'), url('./fonts/PingFang/PingFangSC-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }


:root {
    color-scheme: light dark;
    --brand: #0070f5;
    --brand-deep: #0059c7;
    --brand-soft: #4da3ff;
    --brand-pale: #eaf4ff;
    --page-bg: #ffffff;
    --chrome-bg: var(--hero-bottom);
    --hero-top: #ddecff;
    --hero-mid: #f4f9ff;
    --hero-bottom: #ffffff;
    --text-strong: #0f2540;
    --text-main: #24445f;
    --text-muted: #657b90;
    --text-soft: #8aa0b4;
    --line-soft: rgba(84, 108, 132, 0.1);
    --line-hover: rgba(96, 122, 148, 0.22);
    --line-glass: rgba(96, 124, 151, 0.16);
    --countdown-line: rgba(255, 255, 255, 0.46);
    --countdown-line-hover: rgba(96, 122, 148, 0.24);
    --countdown-number: linear-gradient(135deg, #0059c7 0%, #0070f5 46%, #2388ff 100%);
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.26) 100%);
    --glass-bg-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 100%);
    --glass-highlight: rgba(255, 255, 255, 0.92);
    --glass-shadow: rgba(0, 112, 245, 0.12);
    --edge-mask-size: clamp(56px, 8vh, 82px);
    --mask-top: linear-gradient(180deg, #ddecff 0%, rgba(221, 236, 255, 0.86) 14%, rgba(221, 236, 255, 0.28) 48%, rgba(221, 236, 255, 0) 100%);
    --mask-bottom: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 14%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0) 100%);
}

/* =========================================================
   2. 全局基础 (Base & Layout)
   ========================================================= */
html, body { 
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: var(--chrome-bg);
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; 
    overflow: hidden; overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#nvpress-tips {
    --sphere-size: clamp(420px, min(72vw, 76vh), 600px);
    --sphere-left: 50%;
    --sphere-top: 48%;
    position: fixed; inset: 0; z-index: 1;
    box-sizing: border-box; text-align: center;
    padding: calc(1em + env(safe-area-inset-top)) 1.5em calc(3em + env(safe-area-inset-bottom)) 1.5em;
    background: linear-gradient(180deg, var(--hero-top) 0%, var(--brand-pale) 32%, var(--hero-mid) 66%, var(--hero-bottom) 100%);
}

#nvpress-tips,
#nvpress-tips * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

#nvpress-tips::before,
#nvpress-tips::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9;
    height: var(--edge-mask-size);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

#nvpress-tips::before {
    top: 0;
    background: var(--mask-top);
}

#nvpress-tips::after {
    bottom: 0;
    background: var(--mask-bottom);
}

/* =========================================================
   3. 核心UI与排版 (Typography & Components)
   ========================================================= */
.sphere-content {
    position: absolute;
    left: var(--sphere-left);
    top: var(--sphere-top);
    z-index: 10;
    width: min(var(--sphere-size), calc(100vw - 32px));
    height: var(--sphere-size);
    box-sizing: border-box;
    padding: calc(var(--sphere-size) * 0.13);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, calc(var(--sphere-size) * 0.032), 20px);
    transform: translate(-50%, -50%);
}
.text-group { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, calc(var(--sphere-size) * 0.014), 10px); z-index: 10; }
#nvpress-tips h1 { margin: 0; font-size: clamp(28px, calc(var(--sphere-size) * 0.075), 46px); color: var(--text-main); font-weight: 800; line-height: 1.08; letter-spacing: 0; white-space: nowrap; }
.nv-blue { display: inline-block; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.desc-text { margin: 0; color: var(--text-muted); font-size: clamp(13px, calc(var(--sphere-size) * 0.027), 16px); font-weight: 400; line-height: 1.45; letter-spacing: 0.04em; }
.wave-emoji { display: inline-block; transform-origin: 70% 70%; animation: wave-animation 2.8s ease-in-out infinite; will-change: transform; }
.typing-title {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
}
.typing-wrap {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    min-width: calc(10.9ch + 7px);
    position: relative;
    text-align: left;
}
.typing-text {
    display: inline-flex;
    justify-content: flex-start;
    text-align: left;
    text-shadow: 0 10px 24px rgba(0, 112, 245, 0.12);
}
.typing-word {
    display: inline-block;
}
.typing-char {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.1em, 0) scaleX(0.86);
    transform-origin: left 58%;
    filter: blur(1.8px);
    animation: typing-char-in var(--char-in-duration, 0.2s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter;
}
.typing-char.is-accent {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.typing-char.is-space {
    min-width: 0.34em;
}
.typing-caret {
    display: inline-block;
    width: clamp(2px, calc(var(--sphere-size) * 0.005), 3px);
    height: 0.9em;
    margin-left: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(77, 163, 255, 0.9), rgba(0, 112, 245, 0.72));
    box-shadow: 0 0 10px rgba(0, 112, 245, 0.2);
    opacity: 0;
    transform: translateY(0.08em);
    transform-origin: 50% 62%;
    will-change: transform, opacity;
}
.typing-caret.is-pressing {
    animation: typing-caret-press 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.typing-title.is-typing .typing-caret {
    opacity: 1;
}
.typing-title.is-done .typing-text {
    animation: typing-line-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.typing-title.is-done .typing-caret {
    opacity: 1;
    animation: typing-caret-blink 1.08s steps(1, end) infinite;
}

/* 品牌 Logo */
.logo-container { position: relative; z-index: 10; display: inline-flex; justify-content: center; align-items: center; }
.logo-container img { height: clamp(46px, calc(var(--sphere-size) * 0.13), 82px); width: auto; opacity: 0.95; filter: drop-shadow(0 4px 12px rgba(0, 112, 245, 0.14)); transition: all 0.5s ease; transform: translateZ(0); }

/* 倒计时面板 */
.cd-pill-wrapper {
    width: min(calc(var(--sphere-size) * 0.82), calc(100vw - 40px));
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: clamp(8px, calc(var(--sphere-size) * 0.026), 18px); 
    margin: 0; padding: clamp(11px, calc(var(--sphere-size) * 0.03), 17px) clamp(16px, calc(var(--sphere-size) * 0.058), 40px);
    border-radius: 60px; user-select: none; -webkit-user-select: none;
}
.cd-item { display: flex; align-items: flex-end; justify-content: center; }
.cd-val-wrap { position: relative; width: clamp(30px, calc(var(--sphere-size) * 0.074), 44px); height: clamp(30px, calc(var(--sphere-size) * 0.068), 42px); overflow: hidden; display: flex; justify-content: center; perspective: 200px; }
.cd-label { font-size: clamp(10px, calc(var(--sphere-size) * 0.021), 13px); color: var(--text-muted); font-weight: 500; margin: 0 0 clamp(3px, calc(var(--sphere-size) * 0.01), 6px) 5px; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1; }
.cd-colon { font-family: "SF Pro Display", sans-serif; font-size: clamp(15px, calc(var(--sphere-size) * 0.038), 22px); color: var(--text-soft); transform: translateY(-2px); margin: 0; animation: breathe-fade 2s ease-in-out infinite; will-change: opacity; }

/* 水晶数字材质 (纯外描边保护字重) */
.cd-val { 
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; 
    font-size: clamp(24px, calc(var(--sphere-size) * 0.062), 38px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; 
    line-height: 1;
    background: var(--countdown-number);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0px; 
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    will-change: transform, opacity;
}
.cd-val.slide-in { animation: scroll-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.cd-val.slide-out { animation: scroll-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* 体验按钮 */
.btn-early-access {
    display: inline-flex; justify-content: center; align-items: center; text-decoration: none;
    box-sizing: border-box;
    color: var(--text-strong); font-size: clamp(14px, calc(var(--sphere-size) * 0.028), 16px); font-weight: 600; letter-spacing: 0.4px;
    min-width: clamp(118px, calc(var(--sphere-size) * 0.24), 148px);
    min-height: 42px;
    padding: 0 clamp(26px, calc(var(--sphere-size) * 0.062), 38px); border-radius: 50px;
    background:
        radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.18) 38%, transparent 68%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
        linear-gradient(180deg, rgba(0, 112, 245, 0.08), rgba(0, 112, 245, 0.018));
    backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(132, 158, 186, 0.13); position: relative; overflow: hidden; z-index: 10;
    box-shadow:
        0 9px 24px rgba(0, 112, 245, 0.1),
        inset 0 1.5px 2px rgba(255, 255, 255, 0.84),
        inset 0 -1px 2px rgba(0, 112, 245, 0.06);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn-early-access::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; z-index: -1; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease;
    background:
        radial-gradient(circle 92px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.14) 58%, transparent 100%),
        linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.34) 46%, transparent 72%);
    transform: translateX(-6%) scale(1.02);
}
.btn-early-access::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background:
        radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(0, 112, 245, 0.2) 0%, rgba(0, 112, 245, 0.08) 38%, transparent 70%),
        radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.34), transparent 56%);
    transform: scale(0.86);
}
.btn-early-access:active {
    transform: translateY(1px) scale(0.985);
    border-color: rgba(96, 122, 148, 0.18);
    box-shadow:
        0 5px 14px rgba(0, 112, 245, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.68),
        inset 0 3px 8px rgba(0, 112, 245, 0.08);
}
.btn-early-access:focus:not(:focus-visible) { outline: none; }
.btn-early-access:focus-visible { outline: 1px solid var(--line-hover); outline-offset: 3px; }
.btn-early-access.is-clicked { animation: access-liquid-pop 0.58s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-early-access.is-clicked::after { animation: liquid-ripple 0.58s cubic-bezier(0.16, 1, 0.3, 1); }

/* =========================================================
   4. 玻璃拟物态特效 (Glassmorphism Shared)
   ========================================================= */
.spotlight-glass {
    position: relative; overflow: hidden; z-index: 10;
    background: var(--glass-bg-soft); 
    backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
    border: 1px solid var(--line-soft); transform: translateZ(0); -webkit-transform: translateZ(0);
    box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 1), inset 0 0 4px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 8px 24px var(--glass-shadow);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.spotlight-glass::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1; pointer-events: none; transition: opacity 0.3s ease;
    background: radial-gradient(circle 100px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}
.beian-group.spotlight-glass::before {
    z-index: 0;
    background:
        radial-gradient(circle 88px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.16) 48%, transparent 76%),
        radial-gradient(circle 120px at var(--x, 50%) var(--y, 50%), rgba(0, 112, 245, 0.08) 0%, transparent 66%);
}
.cd-pill-wrapper.spotlight-glass { background: var(--glass-bg); border-color: var(--countdown-line); box-shadow: inset 0 1.5px 3px rgba(255, 255, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.42), inset 0 -1px 2px rgba(255, 255, 255, 0.16), 0 12px 32px var(--glass-shadow); }

/* 404 页面 */
.not-found-page .sphere-content {
    padding: calc(var(--sphere-size) * 0.122);
    gap: clamp(14px, calc(var(--sphere-size) * 0.03), 18px);
}
.not-found-page .logo-container {
    margin-bottom: clamp(2px, calc(var(--sphere-size) * 0.008), 5px);
    transform: translateY(-4px);
}
.not-found-page .logo-container img {
    height: clamp(54px, calc(var(--sphere-size) * 0.118), 70px);
    filter:
        drop-shadow(0 5px 14px rgba(0, 112, 245, 0.16))
        drop-shadow(0 0 10px rgba(77, 163, 255, 0.08));
}
.lost-emoji {
    display: inline-block;
    position: relative;
    transform-origin: 50% 58%;
    filter: drop-shadow(0 5px 10px rgba(255, 59, 48, 0.18));
    animation: lost-alert-float 2.45s ease-in-out infinite;
    will-change: transform, filter, opacity;
}
.lost-emoji::after {
    content: '';
    position: absolute;
    inset: -0.2em;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(255, 85, 78, 0.24);
    opacity: 0;
    transform: scale(0.76);
    animation: lost-alert-ring 2.45s ease-out infinite;
    pointer-events: none;
}
.not-found-page .typing-wrap {
    min-width: calc(13.2ch + 7px);
}
.not-found-page .typing-text {
    text-shadow: 0 11px 24px rgba(0, 112, 245, 0.12);
}
.lost-universe-panel {
    --code-hover-x: 0px;
    --code-hover-y: 0px;
    --code-hover-x-soft: 0px;
    --code-hover-y-soft: 0px;
    --code-hover-x-neg: 0px;
    --code-hover-y-neg: 0px;
    --code-glow-x: 50%;
    --code-glow-y: 50%;
    position: relative;
    box-sizing: border-box;
    width: min(calc(var(--sphere-size) * 0.82), calc(100vw - 40px));
    height: clamp(54px, calc(var(--sphere-size) * 0.112), 68px);
    margin: 0;
    padding: 0;
    border-radius: 999px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}
.lost-universe-panel.spotlight-glass {
    background:
        radial-gradient(ellipse 80% 64% at 50% 0%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 42%, transparent 78%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.17)),
        linear-gradient(180deg, rgba(0, 112, 245, 0.06), rgba(0, 112, 245, 0.014));
    border-color: rgba(132, 158, 186, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.72),
        inset 0 -10px 18px rgba(0, 112, 245, 0.055),
        0 12px 30px rgba(0, 112, 245, 0.09);
}
.lost-universe-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 38%, transparent 62%),
        radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.22), transparent 62%);
    opacity: 0.82;
}
.code-loader {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    pointer-events: none;
    transform: translateZ(0);
}
.code-loader::before,
.code-loader::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.code-loader::before {
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 34%, transparent 72%),
        linear-gradient(180deg, transparent 0%, rgba(0, 112, 245, 0.07) 22%, rgba(0, 112, 245, 0.045) 50%, rgba(0, 112, 245, 0.07) 78%, transparent 100%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 7px),
        linear-gradient(90deg, transparent 0%, rgba(0, 112, 245, 0.075) 16%, rgba(0, 112, 245, 0.03) 50%, rgba(0, 112, 245, 0.075) 84%, transparent 100%);
    opacity: 0.78;
}
.code-loader::after {
    z-index: 6;
    background:
        radial-gradient(circle 96px at var(--code-glow-x) var(--code-glow-y), rgba(255, 255, 255, 0.22), rgba(77, 163, 255, 0.09) 38%, transparent 74%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.08));
    mix-blend-mode: screen;
    opacity: 0.72;
    transform: translateX(var(--code-hover-x-soft));
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease;
}
.code-stream {
    position: absolute;
    left: 0;
    z-index: 3;
    display: flex;
    width: max-content;
    gap: clamp(18px, calc(var(--sphere-size) * 0.052), 34px);
    white-space: nowrap;
    font-size: clamp(8px, calc(var(--sphere-size) * 0.019), 11px);
    line-height: 1;
    letter-spacing: 0.2px;
    color: rgba(0, 112, 245, 0.42);
    text-shadow: 0 0 10px rgba(77, 163, 255, 0.18);
    will-change: transform;
}
.code-stream-primary {
    top: 15%;
    animation: code-stream-left 14s linear infinite;
}
.code-stream-tertiary {
    top: calc(50% - 0.5em);
    color: rgba(0, 112, 245, 0.34);
    animation: code-stream-right 20s linear infinite;
}
.code-stream-secondary {
    bottom: 15%;
    color: rgba(42, 131, 246, 0.28);
    animation: code-stream-right 18s linear infinite;
}
.code-terminal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, calc(var(--sphere-size) * 0.013), 8px);
    max-width: calc(100% - 34px);
    padding: 0 clamp(10px, calc(var(--sphere-size) * 0.026), 16px);
    height: clamp(21px, calc(var(--sphere-size) * 0.044), 26px);
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(10px, calc(var(--sphere-size) * 0.022), 13px);
    line-height: 1;
    letter-spacing: 0.2px;
    color: rgba(8, 37, 74, 0.88);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(220, 239, 255, 0.28)),
        rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.72),
        inset 0 -1px 2px rgba(0, 112, 245, 0.07),
        0 8px 18px rgba(0, 112, 245, 0.1);
    transform: translate(calc(-50% + var(--code-hover-x)), calc(-50% + var(--code-hover-y)));
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
}
.code-prompt {
    color: rgba(91, 119, 148, 0.82);
}
.code-value {
    color: var(--brand-deep);
    font-weight: 700;
}
.code-path {
    color: var(--brand-soft);
    font-weight: 600;
}
.code-caret-mini {
    width: 1px;
    height: 1em;
    border-radius: 999px;
    background: rgba(0, 112, 245, 0.72);
    box-shadow: 0 0 8px rgba(77, 163, 255, 0.55);
    animation: code-caret-blink 1.05s steps(1, end) infinite;
}
.not-found-page .sphere-content > .btn-early-access {
    min-width: clamp(136px, calc(var(--sphere-size) * 0.25), 156px);
    min-height: 50px;
    padding: 0 clamp(30px, calc(var(--sphere-size) * 0.058), 38px);
    font-size: 15px;
    font-weight: 500;
}
.error-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, calc(var(--sphere-size) * 0.014), 10px);
    max-width: min(calc(var(--sphere-size) * 0.76), 460px);
    z-index: 10;
    text-wrap: balance;
}
.error-code {
    position: relative;
    isolation: isolate;
    display: block;
    margin: clamp(-5px, calc(var(--sphere-size) * -0.008), -2px) 0 clamp(1px, calc(var(--sphere-size) * 0.004), 3px);
    font-size: clamp(100px, calc(var(--sphere-size) * 0.252), 154px);
    font-weight: 600;
    line-height: 0.78;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    background:
        radial-gradient(ellipse at 34% 10%, rgba(255, 255, 255, 0.98) 0%, rgba(195, 232, 255, 0.76) 11%, rgba(88, 174, 255, 0.2) 32%, transparent 58%),
        linear-gradient(180deg, #0b82ff 0%, #0070f5 38%, #005fcf 74%, #00479f 100%);
    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-blend-mode: screen, normal;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.65px rgba(0, 72, 160, 0.16);
    paint-order: stroke fill;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82))
        drop-shadow(0 7px 14px rgba(0, 112, 245, 0.13))
        drop-shadow(0 22px 34px rgba(0, 83, 180, 0.1));
    transform: translateZ(0);
    animation: error-glitch-body 9.4s steps(1, end) infinite;
}
.error-code::before,
.error-code::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    opacity: 0;
    mix-blend-mode: multiply;
    transform-origin: center;
    will-change: transform, clip-path, opacity;
}
.error-code::before {
    color: rgba(0, 196, 255, 0.24);
    text-shadow: -0.8px 0 rgba(255, 255, 255, 0.2);
    animation: error-glitch-cyan 9.4s steps(1, end) infinite;
}
.error-code::after {
    color: rgba(0, 79, 190, 0.22);
    text-shadow: 0.8px 0 rgba(0, 112, 245, 0.12);
    animation: error-glitch-blue 9.4s steps(1, end) infinite;
}
#nvpress-tips.not-found-page .not-found-title {
    color: var(--text-main);
    font-size: clamp(26px, calc(var(--sphere-size) * 0.064), 40px);
    font-weight: 800;
    line-height: 1.08;
    white-space: nowrap;
}
.not-found-page .desc-text {
    max-width: 22em;
    color: color-mix(in srgb, var(--text-muted) 86%, transparent);
    font-size: clamp(13px, calc(var(--sphere-size) * 0.026), 15px);
    line-height: 1.52;
    letter-spacing: 0;
    text-wrap: balance;
}
.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, calc(var(--sphere-size) * 0.034), 22px);
    z-index: 10;
    margin-top: clamp(6px, calc(var(--sphere-size) * 0.016), 10px);
}
.error-actions .btn-early-access {
    min-width: clamp(118px, calc(var(--sphere-size) * 0.22), 138px);
    min-height: 44px;
    padding: 0 clamp(24px, calc(var(--sphere-size) * 0.052), 32px);
    font-weight: 500;
}
.error-doc-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: color-mix(in srgb, var(--text-muted) 82%, var(--brand));
    font-size: clamp(13px, calc(var(--sphere-size) * 0.024), 14px);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.22s ease, transform 0.22s ease;
}
.error-doc-link::after {
    content: '›';
    margin-left: 4px;
    font-size: 1.18em;
    line-height: 1;
    transform: translateY(-0.5px);
}
.error-doc-link:hover {
    color: var(--brand);
    transform: translateY(-1px);
}
.error-doc-link:focus:not(:focus-visible) {
    outline: none;
}
.error-doc-link:focus-visible {
    outline: 1px solid var(--line-hover);
    outline-offset: 3px;
    border-radius: 999px;
}

/* Hover 与 Touch Active 共享交互 */
.spotlight-glass.touch-active, .cd-pill-wrapper.spotlight-glass.touch-active { border-color: var(--line-hover); }
.cd-pill-wrapper.spotlight-glass.touch-active { border-color: var(--countdown-line-hover); }
.spotlight-glass.touch-active::before, .btn-early-access.touch-active::before { opacity: 1; }
.btn-early-access.touch-active {
    color: var(--text-main);
    border-color: rgba(96, 122, 148, 0.2);
    box-shadow:
        0 12px 30px rgba(0, 112, 245, 0.11),
        inset 0 1.5px 2.5px rgba(255, 255, 255, 0.74),
        inset 0 -1px 2px rgba(0, 112, 245, 0.08);
}

@media (hover: hover) { 
    .spotlight-glass:not(.cd-pill-wrapper):not(.beian-group):hover { border-color: var(--line-hover); }
    .spotlight-glass:not(.beian-group):hover::before, .btn-early-access:hover::before { opacity: 1; } 
    .beian-group.spotlight-glass:hover {
        transform: translateZ(0) scale(1.015);
    }
    .beian-group.spotlight-glass:hover::before {
        opacity: 0.78;
    }
    .btn-early-access:hover {
        color: var(--text-main);
        border-color: rgba(96, 122, 148, 0.22);
        transform: translateY(-2px) scale(1.012);
        box-shadow:
            0 15px 34px rgba(0, 112, 245, 0.13),
            inset 0 2px 3px rgba(255, 255, 255, 0.86),
            inset 0 -1px 2px rgba(0, 112, 245, 0.08);
    }
    .btn-early-access:hover::before {
        transform: translateX(0) scale(1.04);
    }
}

/* =========================================================
   5. 页脚与动态备案面板 (Footer & ICP)
   ========================================================= */
.bottom-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 1em 1em max(1.5em, env(safe-area-inset-bottom)) 1em; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; z-index: 10; transition: opacity 0.3s ease; }
.copyright { color: var(--text-soft); font-size: clamp(10px, 2vw, 11px); letter-spacing: 1px; font-weight: 400; text-transform: uppercase; user-select: none; pointer-events: none; }

/* 备案组竖屏基准 (上下堆叠) */
.beian-group.spotlight-glass { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 16px; pointer-events: auto; }
.beian-group.spotlight-glass > * { position: relative; z-index: 1; }
.beian-group { order: 1; }
.copyright { order: 2; }
a.beian-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 11px; position: relative; border-radius: 999px; isolation: isolate; transition: color 0.25s ease, filter 0.25s ease, transform 0.22s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
a.beian-link::after {
    content: '';
    position: absolute;
    inset: -4px -7px;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 44px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 46%, transparent 72%),
        radial-gradient(ellipse at 50% 115%, rgba(0, 112, 245, 0.09), transparent 62%);
    transform: scale(0.94);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
a.beian-link:hover {
    color: var(--brand);
    filter: none;
    transform: none;
}
a.beian-link:hover::after {
    opacity: 0;
    transform: scale(0.94);
}
a.beian-link:active {
    transform: translateY(0) scale(0.97);
}
a.beian-link.is-clicked {
    animation: beian-liquid-pop 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
a.beian-link.is-clicked::after {
    animation: beian-liquid-ripple 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.icp-icon { width: 18px; height: 18px; object-fit: contain; opacity: 0.9; transition: opacity 0.25s ease, filter 0.25s ease, transform 0.22s ease; }

/* 动态分割线 (多于1个链接时自动生成) */
.beian-group.spotlight-glass .beian-link:not(:first-child)::before {
    content: ''; position: absolute; top: -6px; left: -10px; right: -10px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,112,245,0) 0%, rgba(0,112,245,0.18) 50%, rgba(0,112,245,0) 100%);
}

@media (min-width: 550px) {
    .beian-group.spotlight-glass { flex-direction: row; padding: 6px 24px; border-radius: 50px; gap: 16px; }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before { top: 50%; left: -8px; right: auto; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(0,112,245,0.28); }
    a.beian-link { font-size: 12px; }
}

@media (min-width: 901px) and (min-height: 600px) {
    .sphere-content {
        padding: calc(var(--sphere-size) * 0.122);
        gap: clamp(14px, calc(var(--sphere-size) * 0.03), 18px);
    }

    .logo-container {
        margin-bottom: clamp(2px, calc(var(--sphere-size) * 0.008), 5px);
        transform: translateY(-4px);
    }
    .logo-container img {
        height: clamp(54px, calc(var(--sphere-size) * 0.118), 70px);
        filter:
            drop-shadow(0 5px 14px rgba(0, 112, 245, 0.16))
            drop-shadow(0 0 10px rgba(77, 163, 255, 0.08));
    }

    .cd-pill-wrapper {
        width: min(calc(var(--sphere-size) * 0.76), 456px);
        gap: clamp(12px, calc(var(--sphere-size) * 0.024), 16px);
        padding: clamp(13px, calc(var(--sphere-size) * 0.027), 16px) clamp(26px, calc(var(--sphere-size) * 0.052), 34px);
    }
    .cd-pill-wrapper.spotlight-glass {
        background:
            radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.16) 38%, transparent 68%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.052), rgba(0, 112, 245, 0.012));
        border-color: rgba(132, 158, 186, 0.14);
        box-shadow:
            inset 0 1.5px 2.5px rgba(255, 255, 255, 0.78),
            inset 0 -1px 2px rgba(0, 112, 245, 0.055),
            0 14px 34px rgba(0, 112, 245, 0.09);
    }
    .cd-val-wrap {
        width: clamp(36px, calc(var(--sphere-size) * 0.068), 42px);
        height: clamp(34px, calc(var(--sphere-size) * 0.064), 39px);
    }
    .cd-val {
        font-size: clamp(30px, calc(var(--sphere-size) * 0.058), 36px);
    }
    .cd-label {
        margin-left: 6px;
    }

    .btn-early-access {
        min-width: clamp(136px, calc(var(--sphere-size) * 0.25), 156px);
        min-height: 50px;
        padding: 0 clamp(30px, calc(var(--sphere-size) * 0.058), 38px);
        font-size: 15px;
        box-shadow:
            0 10px 28px rgba(0, 112, 245, 0.11),
            inset 0 2px 3px rgba(255, 255, 255, 0.92),
            inset 0 -1px 2px rgba(0, 112, 245, 0.05);
    }

    .bottom-footer {
        gap: 10px;
        padding-bottom: max(1.35em, env(safe-area-inset-bottom));
    }
    .beian-group.spotlight-glass {
        padding: 8px 26px;
        border-radius: 999px;
        gap: 20px;
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 42%, transparent 72%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.19)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.038), rgba(0, 112, 245, 0.01));
        border-color: rgba(132, 158, 186, 0.13);
        box-shadow:
            inset 0 1px 1.5px rgba(255, 255, 255, 0.72),
            0 9px 24px rgba(0, 112, 245, 0.07);
    }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before {
        left: -9px;
        height: 13px;
        background: rgba(0, 112, 245, 0.16);
    }
    a.beian-link {
        gap: 7px;
        font-size: 12.5px;
        color: color-mix(in srgb, var(--text-muted) 88%, var(--brand));
    }
    .icp-icon {
        width: 18px;
        height: 18px;
        opacity: 0.86;
    }
}

@media (min-width: 901px) and (min-height: 600px) {
    .lost-universe-panel {
        width: min(calc(var(--sphere-size) * 0.76), 456px);
        height: clamp(62px, calc(var(--sphere-size) * 0.116), 72px);
    }
    .lost-universe-panel .code-stream {
        gap: clamp(24px, calc(var(--sphere-size) * 0.062), 40px);
        font-size: clamp(9px, calc(var(--sphere-size) * 0.02), 12px);
    }
    .lost-universe-panel .code-stream-primary {
        top: 7%;
    }
    .lost-universe-panel .code-stream-tertiary {
        top: calc(50% - 0.5em);
    }
    .lost-universe-panel .code-stream-secondary {
        bottom: 7%;
    }
}

@media (min-width: 901px) and (min-height: 600px) and (prefers-color-scheme: dark) {
    .cd-pill-wrapper.spotlight-glass {
        background:
            linear-gradient(135deg, rgba(11, 39, 72, 0.62), rgba(6, 20, 39, 0.3)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.05), rgba(101, 180, 255, 0.014));
        border-color: rgba(126, 151, 178, 0.13);
        box-shadow:
            inset 0 1px 1.5px rgba(137, 198, 255, 0.055),
            inset 0 -1px 2px rgba(0, 112, 245, 0.055),
            0 16px 36px rgba(0, 0, 0, 0.26);
    }
    .beian-group.spotlight-glass {
        background:
            linear-gradient(135deg, rgba(11, 39, 72, 0.5), rgba(6, 20, 39, 0.25)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.04), rgba(101, 180, 255, 0.01));
        border-color: rgba(126, 151, 178, 0.12);
        box-shadow:
            inset 0 1px 1.5px rgba(137, 198, 255, 0.05),
            0 10px 26px rgba(0, 0, 0, 0.22);
    }
}

/* =========================================================
   6. 3D动态背景与边缘遮罩 (Background & Mask)
   ========================================================= */
.bg-animation { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }

/* 渐变流体气泡 */
.gradient-blob { position: absolute; border-radius: 50%; opacity: 0.5; animation: blob-float 20s ease-in-out infinite alternate; transform: translateZ(0); }
.gradient-blob:nth-child(1) { width: 80vw; height: 80vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, rgba(0, 112, 245, 0.20) 0%, rgba(0, 112, 245, 0) 70%); bottom: -20%; left: 10%; animation-delay: -5s; animation-duration: 25s; }
.gradient-blob:nth-child(2) { width: 70vw; height: 70vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(77, 163, 255, 0.22) 0%, rgba(77, 163, 255, 0) 70%); top: 10%; right: 0%; animation-delay: -10s; animation-duration: 22s; }

/* 3D 玻璃球体系 */
.glass-sphere-container { position: absolute; top: var(--sphere-top); left: var(--sphere-left); width: var(--sphere-size); height: var(--sphere-size); z-index: 1; transform: translate(-50%, -50%); }
.glow-waves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow-waves .wave { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 112, 245, 0.25); box-shadow: 0 0 40px 10px rgba(0, 112, 245, 0.14), inset 0 0 20px rgba(255, 255, 255, 0.8); opacity: 0; animation: glow-wave-expand 6s cubic-bezier(0.16, 1, 0.3, 1) infinite; will-change: transform, opacity; }
.glow-waves .wave:nth-child(2) { animation-delay: 2s; } 
.glow-waves .wave:nth-child(3) { animation-delay: 4s; }

.orbit-ring-1 { position: absolute; inset: -4%; z-index: 2; border-radius: 50%; animation: orbit-rotate 24s linear infinite; will-change: transform; pointer-events: none; }
.orbit-ring-1::before { content: ''; position: absolute; top: 50%; left: -2%; transform: translateY(-50%); width: clamp(12px, 2vw, 18px); height: clamp(12px, 2vw, 18px); border-radius: 50%; background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.98) 0 10%, rgba(255, 255, 255, 0.44) 11%, transparent 24%), radial-gradient(circle at 66% 74%, rgba(0, 112, 245, 0.2), transparent 46%), radial-gradient(circle at 38% 34%, rgba(203, 235, 255, 0.62), rgba(98, 177, 255, 0.2) 42%, rgba(255, 255, 255, 0.5) 78%, rgba(255, 255, 255, 0.88) 100%); box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.95), inset -2px -3px 7px rgba(0, 112, 245, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.58), 0 0 12px rgba(0, 112, 245, 0.2), 0 8px 18px rgba(0, 112, 245, 0.12); border: 1px solid rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); }

.orbit-ring-2 { position: absolute; inset: -9%; z-index: 2; border-radius: 50%; animation: orbit-rotate 30s linear infinite reverse; will-change: transform; pointer-events: none; }
.orbit-ring-2::after { content: ''; position: absolute; left: 50%; bottom: -1.5%; transform: translateX(-50%); width: clamp(8px, 1.5vw, 12px); height: clamp(8px, 1.5vw, 12px); border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96) 0 12%, rgba(255, 255, 255, 0.34) 13%, transparent 28%), radial-gradient(circle at 70% 76%, rgba(0, 112, 245, 0.22), transparent 48%), radial-gradient(circle at 40% 36%, rgba(210, 239, 255, 0.64), rgba(116, 192, 255, 0.18) 42%, rgba(255, 255, 255, 0.48) 78%, rgba(255, 255, 255, 0.88) 100%); box-shadow: inset 1.5px 1.5px 4px rgba(255, 255, 255, 0.94), inset -2px -2px 5px rgba(0, 112, 245, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 10px rgba(0, 112, 245, 0.18), 0 6px 14px rgba(0, 112, 245, 0.1); border: 1px solid rgba(255, 255, 255, 0.74); backdrop-filter: blur(7px) saturate(150%); -webkit-backdrop-filter: blur(7px) saturate(150%); }

.glass-sphere { 
    position: absolute; inset: 0; z-index: 1; border-radius: 50%; transform: translateZ(0); -webkit-transform: translateZ(0);
    background: radial-gradient(110% 110% at 30% 10%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 112, 245, 0.02) 80%, rgba(0, 112, 245, 0.14) 100%);
    box-shadow: inset 0 12px 32px rgba(255, 255, 255, 1), inset 0 2px 6px rgba(255, 255, 255, 0.9), inset 0 -10px 24px rgba(0, 112, 245, 0.22), 0 20px 50px rgba(0, 112, 245, 0.14);          
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.7);
}

/* =========================================================
   7. 关键帧动画 (Keyframes)
   ========================================================= */
@keyframes wave-animation { 0%, 75%, 100% { transform: rotate(0deg); } 15% { transform: rotate(20deg); } 25% { transform: rotate(-10deg); } 35% { transform: rotate(14deg); } 45% { transform: rotate(-6deg); } 55% { transform: rotate(4deg); } 65% { transform: rotate(-2deg); } }
@keyframes lost-alert-float { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 5px 10px rgba(255, 59, 48, 0.18)) saturate(1); } 18% { transform: translateY(-0.035em) rotate(-1.6deg) scale(1.045); filter: drop-shadow(0 7px 13px rgba(255, 59, 48, 0.26)) saturate(1.08); } 36% { transform: translateY(0.006em) rotate(1deg) scale(0.992); } 58% { transform: translateY(-0.018em) rotate(-0.6deg) scale(1.018); } 76% { transform: translateY(0) rotate(0.25deg) scale(1); } }
@keyframes lost-alert-ring { 0%, 18% { opacity: 0; transform: scale(0.76); } 24% { opacity: 0.28; } 56% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes code-stream-left { 0% { transform: translate3d(var(--code-hover-x-neg), 0, 0); } 100% { transform: translate3d(calc(-50% + var(--code-hover-x-neg)), 0, 0); } }
@keyframes code-stream-right { 0% { transform: translate3d(calc(-50% + var(--code-hover-x-soft)), 0, 0); } 100% { transform: translate3d(var(--code-hover-x-soft), 0, 0); } }
@keyframes code-caret-blink { 0%, 52% { opacity: 1; transform: scaleY(1); } 53%, 100% { opacity: 0.22; transform: scaleY(0.86); } }
@keyframes typing-char-in { 0% { opacity: 0; transform: translate3d(0, 0.1em, 0) scaleX(0.86); filter: blur(1.8px); } 46% { opacity: 1; transform: translate3d(0, -0.018em, 0) scaleX(1.035); filter: blur(0.35px); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); filter: blur(0); } }
@keyframes typing-caret-press { 0% { transform: translateY(0.08em) scale(1, 1); opacity: 1; } 36% { transform: translateY(0.08em) scale(0.78, 0.72); opacity: 0.72; } 68% { transform: translateY(0.08em) scale(1.18, 1.05); opacity: 1; } 100% { transform: translateY(0.08em) scale(1, 1); opacity: 1; } }
@keyframes typing-line-settle { 0% { transform: translateY(0.015em); filter: blur(0.2px); } 100% { transform: translateY(0); filter: blur(0); } }
@keyframes typing-caret-blink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes scroll-in { 0% { transform: translateY(70%) scale(0.9); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes scroll-out { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-70%) scale(0.9); opacity: 0; } }
@keyframes breathe-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes access-liquid-pop { 0% { transform: translateY(-2px) scale(1.012); } 38% { transform: translateY(1px) scale(0.965); } 68% { transform: translateY(-2px) scale(1.028); } 100% { transform: translateY(-2px) scale(1.012); } }
@keyframes liquid-ripple { 0% { opacity: 0.32; transform: scale(0.82); } 55% { opacity: 0.2; } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes beian-liquid-pop { 0% { transform: translateY(-1px) scale(1); } 42% { transform: translateY(0) scale(0.96); } 100% { transform: translateY(-1px) scale(1); } }
@keyframes beian-liquid-ripple { 0% { opacity: 0.42; transform: scale(0.86); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes glow-wave-expand { 0% { transform: scale(0.85) translateZ(0); opacity: 0.8; border-width: 1.5px; } 100% { transform: scale(1.6) translateZ(0); opacity: 0; border-width: 0px; filter: blur(4px); } }
@keyframes orbit-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blob-float { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.3; } 33% { transform: translate(3vw, -4vw) scale(1.05) rotate(2deg); opacity: 0.4; } 66% { transform: translate(-2vw, 3vw) scale(0.95) rotate(-2deg); opacity: 0.25; } }
@keyframes error-glitch-body {
    0%, 14.9%, 15.6%, 52.8%, 53.4%, 83.7%, 84.3%, 100% { transform: translateZ(0); }
    15.05% { transform: translate3d(0.55px, -0.25px, 0) skewX(0.28deg); }
    15.28% { transform: translate3d(-0.45px, 0.18px, 0) skewX(-0.2deg); }
    53.02% { transform: translate3d(-0.38px, -0.18px, 0); }
    83.92% { transform: translate3d(0.48px, 0.22px, 0) skewX(0.18deg); }
}
@keyframes error-glitch-cyan {
    0%, 14.86%, 15.56%, 52.76%, 53.38%, 83.66%, 84.26%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
    15.02% { opacity: 0.42; transform: translate3d(-1.2px, -0.4px, 0); clip-path: inset(14% 0 73% 0); }
    15.24% { opacity: 0.34; transform: translate3d(0.6px, 0.3px, 0); clip-path: inset(46% 0 39% 0); }
    53% { opacity: 0.28; transform: translate3d(-0.9px, 0.2px, 0); clip-path: inset(68% 0 18% 0); }
    83.88% { opacity: 0.36; transform: translate3d(-1px, -0.2px, 0); clip-path: inset(28% 0 57% 0); }
}
@keyframes error-glitch-blue {
    0%, 14.82%, 15.52%, 52.72%, 53.42%, 83.62%, 84.3%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
    14.98% { opacity: 0.32; transform: translate3d(1px, 0.3px, 0); clip-path: inset(70% 0 17% 0); }
    15.3% { opacity: 0.4; transform: translate3d(-0.7px, -0.35px, 0); clip-path: inset(24% 0 61% 0); }
    52.96% { opacity: 0.28; transform: translate3d(0.8px, 0.18px, 0); clip-path: inset(42% 0 44% 0); }
    83.94% { opacity: 0.34; transform: translate3d(1.1px, 0.24px, 0); clip-path: inset(58% 0 28% 0); }
}

/* =========================================================
   8. 响应式适配: 移动竖屏与横屏
   ========================================================= */
@media (max-width: 600px) and (orientation: portrait) {
    #nvpress-tips {
        --sphere-size: clamp(312px, 96vw, 410px);
        --sphere-left: 50%;
        --sphere-top: 48%;
        padding:
            max(20px, calc(16px + env(safe-area-inset-top)))
            clamp(16px, 5vw, 22px)
            max(132px, calc(118px + env(safe-area-inset-bottom)))
            clamp(16px, 5vw, 22px);
    }

    .sphere-content {
        width: min(var(--sphere-size), calc(100vw - 20px));
        padding: calc(var(--sphere-size) * 0.102);
        gap: clamp(10px, calc(var(--sphere-size) * 0.028), 14px);
    }

    .logo-container img { height: clamp(38px, calc(var(--sphere-size) * 0.12), 52px); }
    #nvpress-tips h1 { font-size: clamp(26px, calc(var(--sphere-size) * 0.072), 32px); }
    .desc-text { font-size: clamp(12px, calc(var(--sphere-size) * 0.032), 14px); }

    .cd-pill-wrapper {
        width: min(276px, calc(100vw - 56px));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(5px, calc(var(--sphere-size) * 0.018), 8px);
        padding: clamp(9px, calc(var(--sphere-size) * 0.032), 13px);
        border-radius: 24px;
    }
    .cd-pill-wrapper.spotlight-glass {
        background:
            radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.18) 36%, transparent 68%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.2)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.075), rgba(0, 112, 245, 0.015));
        border-color: rgba(132, 158, 186, 0.14);
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.76),
            inset 0 -1px 2px rgba(0, 112, 245, 0.055),
            0 12px 28px rgba(0, 112, 245, 0.085);
    }
    .cd-item {
        position: relative;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 6px 2px 5px;
        border-radius: 15px;
        overflow: hidden;
        background:
            radial-gradient(circle at 28% 14%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18) 42%, transparent 72%),
            linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(237, 247, 255, 0.18) 48%, rgba(0, 112, 245, 0.055));
        border: 1px solid rgba(255, 255, 255, 0.36);
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        box-shadow:
            inset 0 1px 1.5px rgba(255, 255, 255, 0.72),
            inset 0 -1px 2px rgba(0, 112, 245, 0.055),
            0 5px 14px rgba(0, 112, 245, 0.06);
    }
    .cd-item::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.52), transparent 34%),
            radial-gradient(circle at 78% 86%, rgba(0, 112, 245, 0.1), transparent 52%);
        opacity: 0.72;
    }
    .cd-val-wrap,
    .cd-label {
        position: relative;
        z-index: 1;
    }
    .cd-val-wrap {
        width: 100%;
        height: clamp(34px, calc(var(--sphere-size) * 0.092), 40px);
    }
    .cd-val { font-size: clamp(26px, calc(var(--sphere-size) * 0.078), 32px); }
    .cd-label {
        font-size: 10px;
        margin: 0;
        letter-spacing: 0.05em;
    }
    .cd-colon { display: none; }

    .btn-early-access {
        min-width: 96px;
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

    .bottom-footer {
        gap: 7px;
        padding: 0 12px max(10px, env(safe-area-inset-bottom)) 12px;
    }
    .copyright {
        display: block;
        width: calc(100vw - 28px);
        max-width: 360px;
        font-size: clamp(6.8px, 2vw, 8px);
        line-height: 1.25;
        letter-spacing: 0.12px;
        white-space: nowrap;
        text-align: center;
    }
    .beian-group.spotlight-glass {
        width: auto;
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 6px 10px;
        border: 1px solid rgba(132, 158, 186, 0.12);
        border-radius: 999px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.24));
        backdrop-filter: blur(18px) saturate(135%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        box-shadow:
            inset 0 1px 1.5px rgba(255, 255, 255, 0.72),
            0 8px 22px rgba(15, 37, 64, 0.045);
    }
    .beian-group.spotlight-glass::before { display: none; }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before {
        display: block;
        top: 50%;
        left: -5px;
        right: auto;
        width: 1px;
        height: 12px;
        transform: translateY(-50%);
        background: rgba(0, 112, 245, 0.14);
    }
    a.beian-link {
        max-width: 100%;
        gap: 4px;
        font-size: 10px;
        line-height: 1.2;
        color: color-mix(in srgb, var(--text-muted) 78%, transparent);
        white-space: nowrap;
    }
    .icp-icon { width: 14px; height: 14px; opacity: 0.68; }
}

@media (max-width: 380px) and (max-height: 720px) and (orientation: portrait) {
    #nvpress-tips {
        --sphere-size: clamp(294px, 94vw, 360px);
        --sphere-top: 46.5%;
        padding-bottom: max(92px, calc(82px + env(safe-area-inset-bottom)));
    }
    .sphere-content { gap: 9px; }
    .logo-container img { height: clamp(34px, calc(var(--sphere-size) * 0.112), 42px); }
    #nvpress-tips h1 { font-size: clamp(24px, calc(var(--sphere-size) * 0.07), 28px); }
    .desc-text { font-size: 12px; }
    .cd-pill-wrapper {
        width: min(256px, calc(100vw - 48px));
        padding: 8px;
        gap: 5px;
    }
    .cd-val-wrap {
        width: 100%;
        height: 32px;
    }
    .cd-val { font-size: 25px; }
    .cd-item { padding: 5px 1px 4px; border-radius: 13px; }
    .btn-early-access {
        min-width: 92px;
        min-height: 36px;
        padding: 0 12px;
    }
    .copyright {
        display: block;
        width: calc(100vw - 24px);
        font-size: 6.8px;
        letter-spacing: 0.08px;
        line-height: 1.2;
    }
    .beian-group.spotlight-glass {
        width: auto;
        max-width: min(100%, 304px);
        padding: 5px 8px;
        gap: 8px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    #nvpress-tips {
        --sphere-size: clamp(250px, 78vh, 328px);
        --sphere-left: 50%;
        --sphere-top: 44%;
        padding:
            max(8px, env(safe-area-inset-top))
            max(18px, env(safe-area-inset-right))
            max(38px, calc(30px + env(safe-area-inset-bottom)))
            max(18px, env(safe-area-inset-left));
    }

    .sphere-content {
        width: min(var(--sphere-size), calc(100vw - 40px));
        padding: calc(var(--sphere-size) * 0.098);
        gap: clamp(6px, calc(var(--sphere-size) * 0.021), 9px);
    }

    .logo-container img { height: clamp(27px, calc(var(--sphere-size) * 0.108), 36px); }
    #nvpress-tips h1 { font-size: clamp(19px, calc(var(--sphere-size) * 0.062), 24px); }
    .desc-text { font-size: clamp(10px, calc(var(--sphere-size) * 0.03), 12px); }

    .orbit-ring-1 {
        inset: -5.5%;
    }
    .orbit-ring-1::before {
        left: -1.2%;
        width: clamp(12px, 3.4vh, 16px);
        height: clamp(12px, 3.4vh, 16px);
    }
    .orbit-ring-2 {
        inset: -8%;
    }
    .orbit-ring-2::after {
        top: 42%;
        right: -1.1%;
        bottom: auto;
        left: auto;
        transform: none;
        width: clamp(10px, 3vh, 13px);
        height: clamp(10px, 3vh, 13px);
    }

    .cd-pill-wrapper {
        width: min(calc(var(--sphere-size) * 0.86), 282px, calc(100vw - 76px));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        padding: 7px;
        border-radius: 20px;
        background:
            radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.07) 34%, transparent 68%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.04), rgba(0, 112, 245, 0.008));
        border-color: rgba(132, 158, 186, 0.1);
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.46),
            inset 0 -1px 2px rgba(0, 112, 245, 0.05),
            0 10px 24px rgba(0, 112, 245, 0.052);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
    }
    .cd-item {
        position: relative;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
        padding: 4px 1px;
        border-radius: 12px;
        overflow: hidden;
        background:
            radial-gradient(circle at 28% 14%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.16) 42%, transparent 72%),
            linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(237, 247, 255, 0.16) 48%, rgba(0, 112, 245, 0.05));
        border: 1px solid rgba(255, 255, 255, 0.34);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.68),
            inset 0 -1px 2px rgba(0, 112, 245, 0.05);
    }
    .cd-item::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.48), transparent 34%),
            radial-gradient(circle at 78% 86%, rgba(0, 112, 245, 0.09), transparent 52%);
        opacity: 0.68;
    }
    .cd-val-wrap {
        position: relative;
        z-index: 1;
        width: 100%;
        height: clamp(25px, calc(var(--sphere-size) * 0.078), 30px);
    }
    .cd-val { font-size: clamp(21px, calc(var(--sphere-size) * 0.07), 25px); }
    .cd-label {
        position: relative;
        z-index: 1;
        font-size: 8px;
        margin: 0;
        letter-spacing: 0.04em;
    }
    .cd-colon { display: none; }
    .btn-early-access {
        min-width: 88px;
        min-height: 32px;
        margin-top: clamp(4px, calc(var(--sphere-size) * 0.018), 7px);
        padding: 0 12px;
        font-size: 12px;
    }

    .bottom-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 4px max(18px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
        background: transparent;
    }
    .copyright {
        display: block;
        order: 1;
        max-width: min(42vw, 360px);
        font-size: 8.5px;
        line-height: 1.2;
        letter-spacing: 0.45px;
        text-align: left;
        white-space: normal;
    }
    .beian-group.spotlight-glass {
        order: 2;
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        max-width: calc(100vw - 36px);
        margin-left: auto;
        padding: 5px 12px;
        border: 1px solid rgba(132, 158, 186, 0.12);
        border-radius: 999px;
        gap: 10px;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.22)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.04), rgba(0, 112, 245, 0.01));
        box-shadow:
            inset 0 1px 1.5px rgba(255, 255, 255, 0.68),
            0 8px 20px rgba(0, 112, 245, 0.06);
    }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before {
        top: 50%;
        left: -6px;
        right: auto;
        width: 1px;
        height: 12px;
        transform: translateY(-50%);
        background: rgba(0,112,245,0.14);
    }
    a.beian-link {
        font-size: 10px;
        gap: 4px;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .icp-icon {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #061427;
        --hero-top: #05111f;
        --hero-mid: #071d36;
        --hero-bottom: #061427;
        --brand-pale: #092849;
        --brand-soft: #65b4ff;
        --brand-deep: #0080ff;
        --text-strong: #f4f9ff;
        --text-main: #dcecff;
        --text-muted: #abc6df;
        --text-soft: #7fa4c5;
        --line-soft: rgba(126, 151, 178, 0.12);
        --line-hover: rgba(132, 158, 186, 0.24);
        --line-glass: rgba(112, 141, 170, 0.14);
        --countdown-line: rgba(112, 141, 170, 0.14);
        --countdown-line-hover: rgba(132, 158, 186, 0.24);
        --countdown-number: linear-gradient(135deg, #a4d7ff 0%, #58aeff 44%, #1b8aff 100%);
        --glass-bg: linear-gradient(135deg, rgba(11, 39, 72, 0.72) 0%, rgba(6, 20, 39, 0.36) 100%);
        --glass-bg-soft: linear-gradient(135deg, rgba(11, 39, 72, 0.56) 0%, rgba(6, 20, 39, 0.26) 100%);
        --glass-highlight: rgba(120, 188, 255, 0.22);
        --glass-shadow: rgba(0, 0, 0, 0.32);
        --mask-top: linear-gradient(180deg, #05111f 0%, rgba(5, 17, 31, 0.86) 14%, rgba(5, 17, 31, 0.28) 48%, rgba(5, 17, 31, 0) 100%);
        --mask-bottom: linear-gradient(0deg, #061427 0%, rgba(6, 20, 39, 0.88) 14%, rgba(6, 20, 39, 0.3) 48%, rgba(6, 20, 39, 0) 100%);
    }

    .logo-container img {
        opacity: 0.96;
        filter: drop-shadow(0 8px 22px rgba(0, 112, 245, 0.26));
    }

    .cd-val {
        filter: none;
        text-shadow: 0 0 1px rgba(164, 215, 255, 0.2);
    }

    .btn-early-access,
    .spotlight-glass {
        box-shadow: inset 0 1px 1.5px rgba(137, 198, 255, 0.08), inset 0 0 7px rgba(0, 112, 245, 0.05), 0 14px 36px var(--glass-shadow);
    }

    .btn-early-access {
        background:
            radial-gradient(circle at 24% 0%, rgba(137, 198, 255, 0.16), rgba(11, 39, 72, 0.14) 38%, transparent 68%),
            linear-gradient(135deg, rgba(11, 39, 72, 0.54), rgba(6, 20, 39, 0.26)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.055), rgba(101, 180, 255, 0.014));
        border-color: rgba(126, 151, 178, 0.13);
    }

    .lost-universe-panel.spotlight-glass {
        background:
            radial-gradient(ellipse 82% 66% at 50% 0%, rgba(137, 198, 255, 0.13), rgba(11, 39, 72, 0.15) 42%, transparent 78%),
            linear-gradient(135deg, rgba(11, 39, 72, 0.54), rgba(6, 20, 39, 0.25)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.052), rgba(101, 180, 255, 0.012));
        border-color: rgba(126, 151, 178, 0.13);
        box-shadow:
            inset 0 0 0 1px rgba(137, 198, 255, 0.07),
            inset 0 1px 1.5px rgba(137, 198, 255, 0.08),
            inset 0 -8px 16px rgba(0, 112, 245, 0.06),
            0 14px 32px rgba(0, 0, 0, 0.22);
    }

    .lost-universe-panel::after {
        background:
            linear-gradient(180deg, rgba(190, 224, 255, 0.12), rgba(190, 224, 255, 0.03) 34%, transparent 58%),
            linear-gradient(90deg, transparent 0%, rgba(190, 224, 255, 0.06) 48%, transparent 100%),
            radial-gradient(ellipse at 50% 118%, rgba(101, 180, 255, 0.08), transparent 62%);
        opacity: 0.7;
    }

    .code-stream {
        color: rgba(164, 215, 255, 0.34);
        text-shadow: 0 0 12px rgba(77, 163, 255, 0.18);
    }
    .code-stream-secondary {
        color: rgba(101, 180, 255, 0.24);
    }
    .code-stream-tertiary {
        color: rgba(137, 198, 255, 0.28);
    }
    .code-terminal {
        color: rgba(235, 248, 255, 0.94);
        background:
            linear-gradient(135deg, rgba(0, 112, 245, 0.22), rgba(255, 255, 255, 0.08)),
            rgba(8, 28, 54, 0.22);
        border-color: rgba(164, 215, 255, 0.18);
        box-shadow:
            inset 0 1px 1.5px rgba(164, 215, 255, 0.22),
            inset 0 -1px 2px rgba(0, 112, 245, 0.12),
            0 8px 18px rgba(0, 0, 0, 0.14);
    }
    .code-prompt {
        color: rgba(190, 224, 255, 0.66);
    }
    .code-value {
        color: #ffffff;
    }

    .btn-early-access::before,
    .spotlight-glass::before {
        background: radial-gradient(circle 100px at var(--x, 50%) var(--y, 50%), rgba(101, 180, 255, 0.32) 0%, rgba(101, 180, 255, 0.08) 55%, transparent 100%);
    }

    .btn-early-access::before {
        background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(126, 188, 255, 0.15) 0%, rgba(126, 188, 255, 0.045) 58%, transparent 100%);
    }

    .beian-group.spotlight-glass::before {
        background:
            radial-gradient(circle 88px at var(--x, 50%) var(--y, 50%), rgba(126, 188, 255, 0.18) 0%, rgba(126, 188, 255, 0.055) 52%, transparent 78%),
            radial-gradient(circle 118px at var(--x, 50%) var(--y, 50%), rgba(0, 112, 245, 0.08) 0%, transparent 68%);
    }

    .btn-early-access:hover::before,
    .btn-early-access.touch-active::before {
        opacity: 0.72;
    }

    .btn-early-access::after {
        background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(101, 180, 255, 0.11) 0%, rgba(101, 180, 255, 0.045) 44%, transparent 72%);
    }

    a.beian-link::after {
        background:
            radial-gradient(circle 48px at var(--x, 50%) var(--y, 50%), rgba(137, 198, 255, 0.14), rgba(101, 180, 255, 0.04) 48%, transparent 72%),
            linear-gradient(135deg, rgba(101, 180, 255, 0.06), rgba(101, 180, 255, 0.014));
    }

    a.beian-link:hover {
        color: var(--brand-soft);
        filter: none;
    }

    .cd-pill-wrapper.spotlight-glass {
        box-shadow: inset 0 1px 1.5px rgba(137, 198, 255, 0.05), inset 0 0 6px rgba(0, 112, 245, 0.045), 0 18px 42px rgba(0, 0, 0, 0.3);
    }

    @media (max-width: 600px) and (orientation: portrait) {
        .cd-pill-wrapper.spotlight-glass {
            background:
                linear-gradient(135deg, rgba(11, 39, 72, 0.72), rgba(6, 20, 39, 0.38)),
                linear-gradient(180deg, rgba(101, 180, 255, 0.08), rgba(101, 180, 255, 0.02));
            border-color: rgba(126, 151, 178, 0.16);
            box-shadow:
                inset 0 1px 1.5px rgba(137, 198, 255, 0.06),
                inset 0 -1px 2px rgba(0, 112, 245, 0.06),
                0 14px 32px rgba(0, 0, 0, 0.26);
        }
        .cd-item {
            background:
                radial-gradient(circle at 28% 14%, rgba(137, 198, 255, 0.16), rgba(11, 39, 72, 0.18) 42%, transparent 72%),
                linear-gradient(145deg, rgba(20, 58, 96, 0.42), rgba(7, 29, 54, 0.24) 52%, rgba(0, 112, 245, 0.06));
            border-color: rgba(137, 198, 255, 0.12);
            box-shadow:
                inset 0 1px 1px rgba(137, 198, 255, 0.1),
                inset 0 -1px 2px rgba(0, 112, 245, 0.08),
                0 6px 16px rgba(0, 0, 0, 0.16);
        }
        .cd-item::before {
            background:
                linear-gradient(120deg, rgba(137, 198, 255, 0.12), transparent 34%),
                radial-gradient(circle at 78% 86%, rgba(0, 112, 245, 0.12), transparent 52%);
            opacity: 0.62;
        }
        .beian-group.spotlight-glass {
            background: linear-gradient(135deg, rgba(11, 39, 72, 0.54), rgba(6, 20, 39, 0.28));
            border-color: rgba(126, 151, 178, 0.13);
            box-shadow:
                inset 0 1px 1.5px rgba(137, 198, 255, 0.06),
                0 10px 24px rgba(0, 0, 0, 0.22);
        }
        .beian-group.spotlight-glass .beian-link:not(:first-child)::before {
            background: rgba(137, 198, 255, 0.14);
        }
        a.beian-link {
            color: color-mix(in srgb, var(--text-muted) 72%, transparent);
        }
    }

    .glow-waves .wave {
        border-color: rgba(101, 180, 255, 0.34);
        box-shadow: 0 0 48px 12px rgba(0, 112, 245, 0.18), inset 0 0 20px rgba(101, 180, 255, 0.12);
    }

    .orbit-ring-1::before,
    .orbit-ring-2::after {
        border-color: rgba(137, 198, 255, 0.36);
        background:
            radial-gradient(circle at 30% 24%, rgba(213, 239, 255, 0.74) 0 10%, rgba(137, 198, 255, 0.22) 11%, transparent 28%),
            radial-gradient(circle at 68% 76%, rgba(0, 112, 245, 0.32), transparent 50%),
            radial-gradient(circle at 40% 36%, rgba(121, 192, 255, 0.36), rgba(20, 75, 126, 0.22) 46%, rgba(7, 29, 54, 0.28) 78%, rgba(137, 198, 255, 0.18) 100%);
        box-shadow:
            inset 2px 2px 5px rgba(213, 239, 255, 0.22),
            inset -2px -2px 7px rgba(0, 112, 245, 0.36),
            inset 0 0 0 1px rgba(137, 198, 255, 0.2),
            0 0 18px rgba(0, 112, 245, 0.28);
    }

    .glass-sphere {
        background: radial-gradient(110% 110% at 30% 10%, rgba(123, 193, 255, 0.2) 0%, rgba(11, 39, 72, 0.06) 42%, rgba(0, 112, 245, 0.08) 78%, rgba(0, 112, 245, 0.18) 100%);
        border-color: rgba(137, 198, 255, 0.24);
        box-shadow: inset 0 12px 32px rgba(137, 198, 255, 0.12), inset 0 2px 8px rgba(255, 255, 255, 0.12), inset 0 -10px 26px rgba(0, 112, 245, 0.24), 0 24px 54px rgba(0, 0, 0, 0.34);
    }

    @media (max-height: 500px) and (orientation: landscape) {
        .bottom-footer { background: transparent; }
        .cd-pill-wrapper.spotlight-glass {
            background:
                linear-gradient(135deg, rgba(11, 39, 72, 0.46), rgba(6, 20, 39, 0.2)),
                linear-gradient(180deg, rgba(101, 180, 255, 0.04), rgba(101, 180, 255, 0.012));
            border-color: rgba(126, 151, 178, 0.11);
            box-shadow:
                inset 0 1px 1.5px rgba(137, 198, 255, 0.045),
                inset 0 -1px 2px rgba(0, 112, 245, 0.052),
                0 12px 28px rgba(0, 0, 0, 0.17);
        }
        .cd-item {
            background:
                radial-gradient(circle at 28% 14%, rgba(137, 198, 255, 0.14), rgba(11, 39, 72, 0.16) 42%, transparent 72%),
                linear-gradient(145deg, rgba(20, 58, 96, 0.38), rgba(7, 29, 54, 0.22) 52%, rgba(0, 112, 245, 0.055));
            border-color: rgba(137, 198, 255, 0.11);
            box-shadow:
                inset 0 1px 1px rgba(137, 198, 255, 0.09),
                inset 0 -1px 2px rgba(0, 112, 245, 0.075);
        }
        .cd-item::before {
            background:
                linear-gradient(120deg, rgba(137, 198, 255, 0.11), transparent 34%),
                radial-gradient(circle at 78% 86%, rgba(0, 112, 245, 0.11), transparent 52%);
            opacity: 0.58;
        }
        .beian-group.spotlight-glass {
            background:
                linear-gradient(135deg, rgba(11, 39, 72, 0.52), rgba(6, 20, 39, 0.28)),
                linear-gradient(180deg, rgba(101, 180, 255, 0.045), rgba(101, 180, 255, 0.012));
            border-color: rgba(126, 151, 178, 0.13);
            box-shadow:
                inset 0 1px 1.5px rgba(137, 198, 255, 0.055),
                0 9px 22px rgba(0, 0, 0, 0.2);
        }
    }
}

@media (min-width: 901px) and (min-height: 600px) {
    .cd-pill-wrapper.spotlight-glass {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.52),
            inset 0 2px 5px rgba(255, 255, 255, 0.82),
            inset 0 -10px 18px rgba(0, 112, 245, 0.055),
            0 15px 34px rgba(0, 112, 245, 0.09);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
        border: 1px solid rgba(255, 255, 255, 0.46);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 34%, transparent 58%),
            radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.22), transparent 62%);
        opacity: 0.88;
    }

    .cd-item,
    .cd-colon {
        position: relative;
        z-index: 2;
    }

    .btn-early-access {
        border-color: rgba(132, 158, 186, 0.15);
        background:
            radial-gradient(ellipse 82% 56% at 50% 0%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.22) 44%, transparent 76%),
            radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 34%, transparent 64%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.2)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.07), rgba(0, 112, 245, 0.015));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.5),
            inset 0 2px 4px rgba(255, 255, 255, 0.86),
            inset 0 -9px 16px rgba(0, 112, 245, 0.055),
            0 11px 28px rgba(0, 112, 245, 0.11);
    }
}

@media (min-width: 901px) and (min-height: 600px) and (hover: hover) {
    .btn-early-access:hover {
        border-color: rgba(132, 158, 186, 0.21);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.58),
            inset 0 2px 5px rgba(255, 255, 255, 0.9),
            inset 0 -10px 18px rgba(0, 112, 245, 0.07),
            0 15px 34px rgba(0, 112, 245, 0.13);
    }
}

@media (min-width: 901px) and (min-height: 600px) and (prefers-color-scheme: dark) {
    .cd-pill-wrapper.spotlight-glass {
        box-shadow:
            inset 0 0 0 1px rgba(180, 220, 255, 0.14),
            inset 0 1.5px 3px rgba(180, 220, 255, 0.1),
            inset 0 -10px 18px rgba(0, 112, 245, 0.065),
            0 16px 36px rgba(0, 0, 0, 0.26);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        border-color: rgba(190, 224, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(190, 224, 255, 0.12), rgba(190, 224, 255, 0.035) 34%, transparent 58%),
            radial-gradient(ellipse at 50% 118%, rgba(101, 180, 255, 0.08), transparent 62%);
        opacity: 0.78;
    }

    .btn-early-access {
        border-color: rgba(190, 224, 255, 0.13);
        background:
            radial-gradient(ellipse 82% 56% at 50% 0%, rgba(190, 224, 255, 0.14), rgba(101, 180, 255, 0.04) 44%, transparent 76%),
            radial-gradient(circle at 22% 18%, rgba(190, 224, 255, 0.1), rgba(101, 180, 255, 0.03) 34%, transparent 64%),
            linear-gradient(135deg, rgba(11, 39, 72, 0.54), rgba(6, 20, 39, 0.26)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.055), rgba(101, 180, 255, 0.014));
        box-shadow:
            inset 0 0 0 1px rgba(190, 224, 255, 0.12),
            inset 0 1.5px 3px rgba(190, 224, 255, 0.11),
            inset 0 -9px 16px rgba(0, 112, 245, 0.07),
            0 14px 34px rgba(0, 0, 0, 0.26);
    }
}

@media (min-width: 901px) and (min-height: 600px) and (prefers-color-scheme: dark) and (hover: hover) {
    .btn-early-access:hover {
        border-color: rgba(190, 224, 255, 0.16);
        box-shadow:
            inset 0 0 0 1px rgba(190, 224, 255, 0.15),
            inset 0 1.5px 3px rgba(190, 224, 255, 0.13),
            inset 0 -10px 18px rgba(0, 112, 245, 0.08),
            0 16px 34px rgba(0, 0, 0, 0.28);
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .cd-pill-wrapper.spotlight-glass {
        background-clip: border-box;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.48),
            inset 0 1.5px 4px rgba(255, 255, 255, 0.78),
            inset 0 -9px 16px rgba(0, 112, 245, 0.055),
            0 12px 28px rgba(0, 112, 245, 0.085);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
        border: 0;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 38%, transparent 62%),
            radial-gradient(ellipse at 50% 116%, rgba(255, 255, 255, 0.2), transparent 60%);
        opacity: 0.84;
    }

    .cd-item,
    .cd-colon {
        position: relative;
        z-index: 2;
    }

    .btn-early-access {
        border-color: rgba(132, 158, 186, 0.14);
        background:
            radial-gradient(ellipse 86% 60% at 50% 0%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.2) 44%, transparent 76%),
            radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.08) 36%, transparent 66%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.07), rgba(0, 112, 245, 0.014));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.46),
            inset 0 1.5px 3.5px rgba(255, 255, 255, 0.82),
            inset 0 -8px 14px rgba(0, 112, 245, 0.05),
            0 9px 22px rgba(0, 112, 245, 0.09);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .cd-pill-wrapper.spotlight-glass {
        background-clip: border-box;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.4),
            inset 0 1.5px 3.5px rgba(255, 255, 255, 0.62),
            inset 0 -8px 14px rgba(0, 112, 245, 0.05),
            0 10px 24px rgba(0, 112, 245, 0.052);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
        border: 0;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 38%, transparent 62%),
            radial-gradient(ellipse at 50% 116%, rgba(255, 255, 255, 0.16), transparent 60%);
        opacity: 0.78;
    }

    .cd-item,
    .cd-colon {
        position: relative;
        z-index: 2;
    }

    .btn-early-access {
        border-color: rgba(132, 158, 186, 0.14);
        background:
            radial-gradient(ellipse 86% 60% at 50% 0%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.18) 44%, transparent 76%),
            radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.07) 36%, transparent 66%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16)),
            linear-gradient(180deg, rgba(0, 112, 245, 0.06), rgba(0, 112, 245, 0.012));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.4),
            inset 0 1.5px 3px rgba(255, 255, 255, 0.76),
            inset 0 -7px 12px rgba(0, 112, 245, 0.05),
            0 8px 20px rgba(0, 112, 245, 0.08);
    }
}

@media (max-width: 600px) and (orientation: portrait) and (prefers-color-scheme: dark) {
    .cd-pill-wrapper.spotlight-glass {
        background-clip: border-box;
        border-color: rgba(137, 198, 255, 0.1);
        box-shadow:
            inset 0 1px 2px rgba(190, 224, 255, 0.09),
            inset 0 -8px 14px rgba(0, 112, 245, 0.055),
            0 14px 32px rgba(0, 0, 0, 0.26);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        inset: 0;
        border: 0;
        background:
            linear-gradient(180deg, rgba(190, 224, 255, 0.1), rgba(190, 224, 255, 0.03) 36%, transparent 62%),
            radial-gradient(ellipse at 50% 116%, rgba(101, 180, 255, 0.065), transparent 60%);
        opacity: 0.62;
    }

    .btn-early-access {
        border-color: rgba(190, 224, 255, 0.13);
        background:
            radial-gradient(ellipse 86% 60% at 50% 0%, rgba(190, 224, 255, 0.13), rgba(101, 180, 255, 0.04) 44%, transparent 76%),
            radial-gradient(circle at 24% 18%, rgba(190, 224, 255, 0.1), rgba(101, 180, 255, 0.03) 36%, transparent 66%),
            linear-gradient(135deg, rgba(11, 39, 72, 0.54), rgba(6, 20, 39, 0.26)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.055), rgba(101, 180, 255, 0.014));
        box-shadow:
            inset 0 0 0 1px rgba(190, 224, 255, 0.12),
            inset 0 1.5px 3px rgba(190, 224, 255, 0.1),
            inset 0 -8px 14px rgba(0, 112, 245, 0.065),
            0 10px 24px rgba(0, 0, 0, 0.24);
    }
}

@media (max-height: 500px) and (orientation: landscape) and (prefers-color-scheme: dark) {
    .cd-pill-wrapper.spotlight-glass {
        background-clip: border-box;
        border-color: rgba(137, 198, 255, 0.09);
        box-shadow:
            inset 0 1px 2px rgba(190, 224, 255, 0.08),
            inset 0 -7px 12px rgba(0, 112, 245, 0.052),
            0 12px 28px rgba(0, 0, 0, 0.17);
    }

    .cd-pill-wrapper.spotlight-glass::after {
        inset: 0;
        border: 0;
        background:
            linear-gradient(180deg, rgba(190, 224, 255, 0.085), rgba(190, 224, 255, 0.026) 36%, transparent 62%),
            radial-gradient(ellipse at 50% 116%, rgba(101, 180, 255, 0.055), transparent 60%);
        opacity: 0.58;
    }

    .btn-early-access {
        border-color: rgba(190, 224, 255, 0.12);
        background:
            radial-gradient(ellipse 86% 60% at 50% 0%, rgba(190, 224, 255, 0.12), rgba(101, 180, 255, 0.035) 44%, transparent 76%),
            radial-gradient(circle at 24% 18%, rgba(190, 224, 255, 0.09), rgba(101, 180, 255, 0.026) 36%, transparent 66%),
            linear-gradient(135deg, rgba(11, 39, 72, 0.5), rgba(6, 20, 39, 0.24)),
            linear-gradient(180deg, rgba(101, 180, 255, 0.05), rgba(101, 180, 255, 0.012));
        box-shadow:
            inset 0 0 0 1px rgba(190, 224, 255, 0.1),
            inset 0 1.5px 3px rgba(190, 224, 255, 0.09),
            inset 0 -7px 12px rgba(0, 112, 245, 0.06),
            0 9px 22px rgba(0, 0, 0, 0.2);
    }
}

/* =========================================================
   11. 404 页面响应式细节 (Not Found)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    .error-code {
        background:
            radial-gradient(ellipse at 34% 12%, rgba(228, 249, 255, 0.86) 0%, rgba(143, 221, 255, 0.48) 18%, rgba(55, 160, 255, 0.16) 42%, transparent 66%),
            linear-gradient(180deg, rgba(190, 232, 255, 0.96) 0%, rgba(84, 177, 255, 0.88) 46%, rgba(25, 129, 238, 0.82) 100%);
        background-size: 100% 100%, 100% 100%;
        background-position: 0 0, 0 0;
        background-blend-mode: screen, normal;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0.75px rgba(190, 224, 255, 0.32);
        filter:
            drop-shadow(0 8px 20px rgba(36, 139, 255, 0.16));
    }
    .error-code::before {
        color: rgba(113, 221, 255, 0.34);
        text-shadow: -1px 0 rgba(190, 224, 255, 0.12);
        mix-blend-mode: screen;
    }
    .error-code::after {
        color: rgba(38, 132, 255, 0.34);
        text-shadow: 1px 0 rgba(0, 112, 245, 0.1);
        mix-blend-mode: screen;
    }

    .error-doc-link:hover {
        color: var(--brand-soft);
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .not-found-page .sphere-content {
        padding: calc(var(--sphere-size) * 0.13);
        gap: clamp(11px, calc(var(--sphere-size) * 0.03), 14px);
    }

    .not-found-page .logo-container img {
        height: clamp(34px, calc(var(--sphere-size) * 0.102), 44px);
    }

    .not-found-heading {
        max-width: min(calc(var(--sphere-size) * 0.78), calc(100vw - 54px));
        gap: 8px;
    }

    #nvpress-tips.not-found-page .not-found-title {
        font-size: clamp(22px, calc(var(--sphere-size) * 0.063), 27px);
    }

    .not-found-page .typing-wrap {
        min-width: calc(12.8ch + 6px);
    }

    .not-found-page .desc-text {
        max-width: 18em;
        line-height: 1.45;
    }

    .not-found-page .lost-universe-panel {
        width: min(276px, calc(100vw - 56px));
        height: 62px;
    }

    .not-found-page .sphere-content > .btn-early-access {
        min-width: 96px;
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

    .error-doc-link {
        min-height: 36px;
        font-size: 12px;
    }

    .error-doc-link::after {
        margin-left: 3px;
    }
}

@media (max-width: 380px) and (max-height: 720px) and (orientation: portrait) {
    .not-found-page .sphere-content {
        gap: 9px;
    }

    #nvpress-tips.not-found-page .not-found-title {
        font-size: 22px;
    }

    .not-found-page .sphere-content > .btn-early-access {
        min-width: 92px;
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .not-found-page .desc-text {
        max-width: 17em;
    }

    .not-found-page .lost-universe-panel {
        width: min(256px, calc(100vw - 48px));
        height: 56px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .not-found-page .sphere-content {
        padding: calc(var(--sphere-size) * 0.12);
        gap: clamp(6px, calc(var(--sphere-size) * 0.02), 9px);
    }

    .not-found-page .logo-container img {
        height: clamp(22px, calc(var(--sphere-size) * 0.088), 30px);
    }

    #nvpress-tips.not-found-page .not-found-title {
        font-size: clamp(18px, calc(var(--sphere-size) * 0.058), 23px);
    }

    .not-found-page .typing-wrap {
        min-width: calc(12.4ch + 5px);
    }

    .not-found-page .desc-text {
        font-size: 10px;
        max-width: 17em;
    }

    .not-found-page .lost-universe-panel {
        width: min(calc(var(--sphere-size) * 0.86), 282px, calc(100vw - 76px));
        height: 52px;
    }

    .not-found-page .sphere-content > .btn-early-access {
        min-width: 78px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }

    .error-doc-link {
        min-height: 30px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .typing-char {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }

    .lost-emoji,
    .lost-emoji::after {
        animation: none;
        transform: none;
        filter: none;
    }

    .typing-title.is-done .typing-text {
        transform: none;
        filter: none;
        animation: none;
    }

    .typing-caret {
        display: none;
    }

    .error-code,
    .error-code::before,
    .error-code::after {
        animation: none;
    }

    .error-code::before,
    .error-code::after {
        display: none;
    }

    .code-stream,
    .code-caret-mini {
        animation: none;
    }
}