/* ============================================================
   主题 Token —— 纯黑白
   默认跟随系统深浅色；用户手动切换后由 [data-theme] 接管
   浅色：黑字 + 白底；深色：白字 + 黑底
   ============================================================ */
:root{
  color-scheme: light dark;

  --bg:      #FFFFFF;              /* 背景：白 */
  --fg:      #000000;              /* 内容：黑 */
  --muted:   rgba(0,0,0,.62);      /* 次级文字 */
  --line:    rgba(0,0,0,.07);      /* 网格线 / 分割线 */

  --btn-bg:  #000000;              /* 主按钮：黑底 */
  --btn-fg:  #FFFFFF;              /* 主按钮：白字 */

  --radius-nav: 5px;
  --radius-card: 10px;

  --cube:   clamp(120px, 22vh, 232px);   /* 落到 Hero 的最终尺寸 */
  --loader: clamp(150px, 30vh, 300px);   /* 加载态尺寸（更大，归位时收拢） */
}

/* 深色：系统偏好（用户未手动指定浅色时生效） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --bg:     #000000;             /* 背景：黑 */
    --fg:     #FFFFFF;             /* 内容：白 */
    --muted:  rgba(255,255,255,.66);
    --line:   rgba(255,255,255,.10);
    --btn-bg: #FFFFFF;             /* 主按钮：白底 */
    --btn-fg: #000000;             /* 主按钮：黑字 */
  }
}

/* 手动指定深色：覆盖系统偏好 */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:     #000000;
  --fg:     #FFFFFF;
  --muted:  rgba(255,255,255,.66);
  --line:   rgba(255,255,255,.10);
  --btn-bg: #FFFFFF;
  --btn-fg: #000000;
}

/* 手动指定浅色：覆盖系统偏好 */
:root[data-theme="light"]{
  color-scheme: light;

  --bg:     #FFFFFF;
  --fg:     #000000;
  --muted:  rgba(0,0,0,.62);
  --line:   rgba(0,0,0,.07);
  --btn-bg: #000000;
  --btn-fg: #FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; }

/* 把颜色变量注册为可补间的 <color>，深浅色切换时变量本身平滑过渡，
   引用它的元素（含网格线与图标）会逐帧拿到中间值，无需各自声明 transition */
@property --bg    { syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }
@property --fg    { syntax:'<color>'; inherits:true; initial-value:#000000; }
@property --muted { syntax:'<color>'; inherits:true; initial-value:rgba(0,0,0,.62); }
@property --line  { syntax:'<color>'; inherits:true; initial-value:rgba(0,0,0,.07); }
@property --btn-bg{ syntax:'<color>'; inherits:true; initial-value:#000000; }
@property --btn-fg{ syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }

html{
  height:100%;
  background-color:var(--bg);      /* 兜底背景，避免首帧闪白 */
  /* 主题切换过渡只在这里声明一次，变量补间后向下继承 */
  transition:
    --bg .4s ease, --fg .4s ease, --muted .4s ease,
    --line .4s ease, --btn-bg .4s ease, --btn-fg .4s ease;
}
body{
  height:100%;
  margin:0;
  overflow:hidden;                 /* 不可滚动 */
  font-family: Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}

/* 标志性坐标纸网格（加载层与页面共用同一背景，切换时零视觉跳变） */
body,.loader{
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:center center;
}

a{ color:inherit; text-decoration:none; }

/* ============================================================
   加载层 —— 与页面同底色同网格，因此"消失"时无任何跳变
   ============================================================ */
.loader{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  opacity:1;
  transition:opacity .5s ease .38s;   /* 归位途中才开始淡出 */
}
.loader-move{
  width:var(--loader);
  height:var(--loader);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);  /* 纯 2D 位移 + 缩放 */
}
.loader-spin{
  width:100%;
  height:100%;
  animation:cube-spin 4s linear infinite;                /* 平面内匀速旋转 */
}
.is-landing .loader{ opacity:0; }

.ic{ display:block; width:100%; height:100%; color:var(--fg); }

/* ============================================================
   导航
   ============================================================ */
.nav{
  flex:0 0 auto;
  height:73px;
  padding:20px;
}
.nav-inner{
  max-width:1200px;
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  color:var(--fg);
}
.brand-ic{ width:24px; height:24px; display:block; color:var(--fg); }

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-link{
  font-size:14px;
  color:var(--muted);
  transition:opacity .25s;
}
.nav-link:hover{ opacity:.6; }

.btn-sm{
  font-size:14px;
  height:32px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  border:0;
  border-radius:var(--radius-nav);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:inherit;
  cursor:pointer;
  transition:opacity .25s;
}
.btn-sm:hover{ opacity:.82; }

/* 深浅色切换按钮：32×32 图标按钮，无边框，跟随主题着色 */
.theme-toggle{
  width:32px;
  height:32px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-nav);
  background:transparent;
  color:var(--fg);
  font-family:inherit;
  cursor:pointer;
  transition:opacity .25s;
}
.theme-toggle:hover{ opacity:.6; }
.theme-toggle svg{ display:block; width:24px; height:24px; }
.theme-toggle .ic-sun{ display:none; }
.theme-toggle.is-dark .ic-sun{ display:block; }
.theme-toggle.is-dark .ic-moon{ display:none; }

/* ============================================================
   Hero
   ============================================================ */
.main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.hero{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 0;
}

/* 魔方舞台：纯 2D 平面动画（位移 / 缩放 / 透明度 / 平面内旋转） */
.stage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cube-float{
  width:var(--cube);
  height:var(--cube);
  animation:cube-float 4.2s ease-in-out infinite;        /* 2D 上下浮动 + 呼吸缩放 */
  animation-delay:.1s;
}
.cube-mark{
  width:100%;
  height:100%;
  animation:cube-spin 4s linear infinite;                /* 与加载层同相位、同速度 */
}

@keyframes cube-spin{ to{ transform:rotate(360deg); } }  /* 平面内 2D 旋转 */

@keyframes cube-float{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-10px) scale(1.04); }
}

/* ============================================================
   文案
   ============================================================ */
.hero-title{
  margin:0;
  font-size:50px;
  font-weight:700;
  color:var(--fg);
  line-height:1.15;
  letter-spacing:.5px;
}
.hero-sub{
  margin:35px 0 0;
  max-width:620px;
  font-size:20px;
  font-weight:400;
  line-height:30px;
  color:var(--muted);
}
.hero-actions{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn-lg{
  font-size:16px;
  padding:12px 70px;
  border:0;
  border-radius:var(--radius-card);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:inherit;
  cursor:pointer;
  transition:opacity .25s;
}
.btn-lg:hover{ opacity:.82; }

.text-link{
  font-size:16px;
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity .25s;
}
.text-link:hover{ opacity:.6; }

/* ============================================================
   页脚
   ============================================================ */
.footer{
  flex:0 0 auto;
  padding:20px 20px 16px;   /* 底部略收，消除亚像素级溢出 */
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.footer-slogan{ margin:8px 0 0; font-size:14px; color:var(--muted); }
.footer-copy{ margin:4px 0 0; font-size:14px; color:var(--muted); }
.footer-cols{ display:flex; gap:56px; }
.footer-col h4{
  margin:0 0 8px;
  font-size:14px;
  font-weight:700;
  color:var(--fg);
}
.footer-col ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-col a{
  font-size:14px;
  color:var(--muted);
  transition:opacity .25s;
}
.footer-col a:hover{ opacity:.6; }

/* 备案信息 */
.beian{
  max-width:1200px;
  margin:12px auto 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 20px;
  font-size:14px;
  color:var(--muted);
}
.beian a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  transition:opacity .25s;
}
.beian a:hover{ opacity:.6; }
.beian-icon{ display:block; width:16px; height:16px; object-fit:contain; }

/* ============================================================
   加载 → 主体 的无缝衔接
   加载态：主体元素"就位但不可见"（零布局偏移，避免跳帧）
   归位时：位移 + 透明度过渡，与加载层淡出同步
   ============================================================ */
.nav-inner,.hero-title,.hero-sub,.hero-actions,.footer-inner,.beian{
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.cube-float{ transition:opacity .5s ease; }

.is-loading .nav-inner,
.is-loading .hero-title,
.is-loading .hero-sub,
.is-loading .hero-actions,
.is-loading .footer-inner,
.is-loading .beian{
  opacity:0;
  transform:translateY(12px);
}
.is-loading .cube-float{ opacity:0; animation:none; }

.hero-title{ transition-delay:.05s; }
.hero-sub{ transition-delay:.12s; }
.hero-actions{ transition-delay:.19s; }
.footer-inner{ transition-delay:.26s; }
.beian{ transition-delay:.32s; }

/* 短屏 / 窄屏适配 */
@media (max-height:640px){
  :root{ --cube:clamp(96px,18vh,160px); --loader:clamp(120px,26vh,220px); }
  .hero-title{ font-size:36px; }
  .hero-sub{ margin-top:20px; }
}
@media (max-width:640px){
  .hero-title{ font-size:36px; }
  .hero-sub{ font-size:16px; line-height:28px; }
  .nav-links{ gap:16px; }
  .footer-cols{ gap:32px; }
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce){
  .loader-spin,.cube-mark,.cube-float{ animation:none !important; }
  html,
  .loader,.loader-move,.cube-float,
  .nav-inner,.hero-title,.hero-sub,.hero-actions,.footer-inner,.beian{
    transition:none !important;
  }
}