*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    
    :root {
      /*  1. 材质与底层色  */
      --ink: #080c14;
      --glass: rgba(12, 16, 28, 0.75); /* 稍微降低透明度，配合后续的 blur 和 saturate 使用 */
      --border: rgba(255, 255, 255, 0.08); /* 发丝级物理边框 */

      /*  2. 字体家族 */
      /* 学术词典质感，作为释义和例句的绝对主力 */
      --serif: 'Lora', "Noto Serif SC", Georgia, serif; 
      /* 用于音标、词性、搜索结果 */
      --mono: 'DM Mono', "SF Mono", 'Courier New', monospace; 
      /* 补充一个现代无衬线体，用于 UI 按钮和标题，保持界面的锐利 */
      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      /* 苹果级透明度阶梯 (基于暖白 #d4cfc4 / RGB: 212, 207, 196) */
      /* 我们用 rgba 替代了你原本的实色，这样文字能透出背后的星云和粒子流光！ */
      --text-primary: rgba(212, 207, 196, 0.95);   /* 绝对焦点：英文主单词 */
      --text-secondary: rgba(212, 207, 196, 0.75); /* 常规阅读：中文释义、例句 */
      --text-tertiary: rgba(212, 207, 196, 0.50);  /* 辅助说明：音标、词性标注 (v./n.) */
      
      /* --muted (#4a4f62) 偏向极高级的蓝紫灰，保留它作为特殊降噪色 */
      --text-muted: #4a4f62;                       
      --text-ghost: rgba(212, 207, 196, 0.15);     /* 极致降噪：水印、底纹 */
    }

    /* ── Splash Screen ── */
    #splash {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--ink);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      /*animation: splashOut 0.5s ease-in 0.85s forwards;*/
      pointer-events: none;
    }
    #splash.fade-out {
      animation: splashOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .splash-title {
      font-family: var(--serif);
      font-size: clamp(36px, 8vw, 56px);
      font-weight: 600;
      color: var(--text-primary);
      opacity: 0;
      animation: splashFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
      padding: 0 12px;     /* 左右加宽，给 t 的横杠留出绝对的安全空间 */
      line-height: 1.2;   /* 稍微撑高一点，防止字母顶部/底部在动画时被削平 */
    }
    .splash-sub {
      font-family: var(--mono);
      font-size: clamp(11px, 2.5vw, 14px);
      letter-spacing: 0.15em;
      color: var(--text-tertiary);
      opacity: 0;
      animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }
    @keyframes splashFadeUp {
      0% { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(4px); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
    }
    @keyframes splashOut {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(1.05); } /* 退出时微微放大，更有沉浸感 */
    }

    html,
    body {
      /* ── 1. 空间与布局  ── */
      margin: 0;         /* 🌟 必须清零，干掉浏览器默认的 8px 白边 */
      padding: 0;
      width: 100vw;      /* 用 vw 和 vh 比 100% 更稳固，绝对撑满屏幕 */
      height: 100vh;
      overflow: hidden;  /* 锁死浏览器滚动，把交互全权交给 Canvas */
      overscroll-behavior: none; /* 🔴 极限防线：彻底抹杀 iOS 橡皮筋回弹拖拽效果，让它有着 100% Native 原生 APP 的不可撼动感 */
      
      /* ── 2. 底色 ── */
      background: var(--ink);

      /* ── 3. 注入“赛博学术”排版灵魂 ── */
      font-family: var(--sans);     /* 全局默认无衬线字体，保持现代感 */
      color: var(--text-primary);   /* 全局默认暖白文字 */
      -webkit-font-smoothing: antialiased; /* 苹果级抗锯齿，文字极其锐利 */
      -moz-osx-font-smoothing: grayscale;
    }

    /* ══ SHARED SPACE BACKGROUND ══ */
    #space-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: #030407 url('../assets/space-bg.png') no-repeat center 0% / cover;
      transform-origin: center center;
      transform: scale(1.0);
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                  background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    #space-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(farthest-corner at 50% 30%, rgba(3,4,7,0.65) 0%, rgba(3,4,7,0.98) 100%);
      transition: background 0.5s ease, mix-blend-mode 0s;
    }
    #space-bg.bg-cat {
      background-position: center 50%;
      transform: scale(1.1);
    }
    #space-bg.bg-graph {
      background-position: center 100%;
      transform: scale(1.2);
    }
    #space-bg.bg-graph::after {
      background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(3,4,7,0.88) 0%, rgba(3,4,7,1) 100%);
      /*mix-blend-mode: multiply;*/
    }

    /* ══ PAGE SYSTEM ══ */
    .page {
      position: fixed;
      inset: 0;
      z-index: 10;
      transition: opacity .4s cubic-bezier(0.25, 1, 0.5, 1),
                  transform .4s cubic-bezier(0.25, 1, 0.5, 1),
                  visibility 0s;  /* 激活时立刻可见 */
      will-change: transform, opacity;
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .page.off-left {
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transform: translateX(-25%);
      visibility: hidden;
      transition: opacity .4s cubic-bezier(0.25, 1, 0.5, 1),
                  transform .4s cubic-bezier(0.25, 1, 0.5, 1),
                  visibility 0s .4s; /* 动画结束后才隐藏 */
    }

    .page.off-right {
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transform: translateX(25%);
      visibility: hidden;
      transition: opacity .4s cubic-bezier(0.25, 1, 0.5, 1),
                  transform .4s cubic-bezier(0.25, 1, 0.5, 1),
                  visibility 0s .4s;
    }

    .page.off {
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transform: translateX(25%);
      visibility: hidden;
      transition: opacity .4s cubic-bezier(0.25, 1, 0.5, 1),
                  transform .4s cubic-bezier(0.25, 1, 0.5, 1),
                  visibility 0s .4s;
    }

    /* ══════════════════════════════════

    /* ══ LOADING ══ */
    #loader {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      transition: opacity .4s;
    }

    #loader.gone {
      opacity: 0;
      pointer-events: none;
    }

    .lr {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(198, 168, 75, .15);
      border-top-color: #c6a84b;
      animation: spin .8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    

    .lt {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--text-muted);
    }