/* ============================================================================
 * home-flagship.css — 首页旗舰层「余烬 Ember」
 * ----------------------------------------------------------------------------
 * 只在 index.html 引入，加载顺序在 depth3d.css 之后，因此只覆盖首页。
 *
 * 设计意图（模仿 Apple 发布会页的高级感，但配色自成一套）：
 *   ① 深空画布：近黑带紫调，不是死黑；四周压暗形成"演播室"空间感
 *   ② 极光：暖橙 / 玫红 / violet 三色光在背后缓慢游走，只做氛围不做装饰
 *   ③ 悬浮展台：三层玻璃板在透视舞台上，跟随指针做真实视差（不是整体位移）
 *   ④ 叙事：滚动进度光带 + 首屏缩放 + 分段透视入场
 *
 * 配色是自己定的「Ember Aurora」：ember #ff6a2b → rose #ff3b6b → violet #8b5cf6
 * （比原 DESIGN.md 的单一强调色更张扬，是首页专属；其余三页保持原有暖器体系）
 * ========================================================================== */

/* ==========================================================================
   1. 首页专属令牌
   ========================================================================== */

:root[data-page="home"] {
  /* 深空画布：**带冷调的深靛**，不是纯黑。
     把底子往冷侧偏一点，暖色光晕才会"跳"出来 —— 冷暖对位是高级感的关键。 */
  --w-bg:        #07070d;
  --w-bg-alt:    #0d0d16;
  --w-surface:   #12121c;
  --w-surface-2: #191926;
  --w-sunken:    #0a0a12;
  --w-ink:       #f4f3f8;
  --w-text:      #cccad7;
  --w-muted:     #918fa3;
  --w-faint:     #6a6879;
  --w-hair:      rgba(255, 255, 255, .10);
  --w-hair-soft: rgba(255, 255, 255, .055);

  /* Ember Aurora 主色 + 一个冷色对位 */
  --hx-ember:  #ff6a2b;
  --hx-rose:   #ff2f6b;
  --hx-violet: #7c5cff;
  --hx-gold:   #ffb347;
  --hx-ice:    #9adcff;   /* 冷对位：只用于细线、活点、悬停描边，面积 < 3% */
  --hx-cyan:   #3ad8ff;

  --w-accent:      #ff6a2b;
  --w-accent-hi:   #ff8f4d;
  --w-accent-tx:   #ff9a5e;
  --w-accent-wash: rgba(255, 106, 43, .14);
  --w-ring:        0 0 0 3px rgba(255, 106, 43, .38);
  --w-glare:       rgba(240, 246, 255, .09);

  /* 首页玻璃更薄更透，才像"悬浮的玻璃"而不是"灰卡片" */
  --glass-bg:         rgba(255, 255, 255, .045);
  --glass-border:     rgba(255, 255, 255, .10);
  --glass-highlight:  inset 0 1px 0 rgba(255, 255, 255, .10);
  --nav-bg:           rgba(7, 7, 13, .6);
  --card-hover:       rgba(255, 255, 255, .075);

  --w-e1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .45);
  --w-e2: 0 2px 5px rgba(0, 0, 0, .48), 0 14px 30px -14px rgba(0, 0, 0, .7);
  --w-e3: 0 4px 10px rgba(0, 0, 0, .5), 0 28px 54px -20px rgba(0, 0, 0, .78);
  --w-e4: 0 8px 18px rgba(0, 0, 0, .52), 0 46px 80px -28px rgba(0, 0, 0, .85);

  --hero-p: 0;
}

/* 浅色：Apple 那种"影棚白"——极浅冷灰底 + 深墨字 + 柔和彩色光晕 */
:root[data-page="home"][data-theme="light"] {
  --w-bg:        #fbfbfd;
  --w-bg-alt:    #f4f2f7;
  --w-surface:   #ffffff;
  --w-surface-2: #f6f4f8;
  --w-sunken:    #f1eff4;
  --w-ink:       #0b0b0d;
  --w-text:      #3a3a42;
  --w-muted:     #6e6e78;
  --w-faint:     #9a9aa4;
  --w-hair:      rgba(11, 11, 13, .10);
  --w-hair-soft: rgba(11, 11, 13, .055);

  --w-accent:      #ff5a1f;
  --w-accent-hi:   #ff7a3d;
  --w-accent-tx:   #c2471a;   /* 浅底上的强调文字要压深，才够 4.5:1 */
  --w-accent-wash: rgba(255, 90, 31, .10);
  --w-glare:       rgba(255, 255, 255, .55);

  --glass-bg:        rgba(255, 255, 255, .72);
  --glass-border:    rgba(11, 11, 13, .08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .95);
  --nav-bg:          rgba(251, 251, 253, .72);
  --card-hover:      rgba(255, 255, 255, .96);

  --w-e1: 0 1px 2px rgba(24, 18, 30, .05), 0 3px 8px -3px rgba(24, 18, 30, .07);
  --w-e2: 0 1px 3px rgba(24, 18, 30, .05), 0 10px 24px -10px rgba(24, 18, 30, .14);
  --w-e3: 0 2px 5px rgba(24, 18, 30, .06), 0 22px 44px -18px rgba(24, 18, 30, .18);
  --w-e4: 0 4px 10px rgba(24, 18, 30, .07), 0 40px 70px -24px rgba(24, 18, 30, .22);
}

/* ==========================================================================
   2. 画布：深空 + 细网格 + 暗角
   ========================================================================== */

html[data-page="home"] body {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 106, 43, .09), transparent 60%),
    #07070d;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--hx-ember) 9%, transparent), transparent 60%),
    var(--w-bg);
}

/* 网格重做：更细、更淡、只在首屏可见，像"演播室地板"而不是壁纸 */
html[data-page="home"] .bg-blobs::after {
  background-image:
    linear-gradient(var(--w-grid, rgba(255, 255, 255, .04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--w-grid, rgba(255, 255, 255, .04)) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: .7;
  -webkit-mask-image: radial-gradient(100% 62% at 50% 0%, #000 6%, transparent 68%);
  mask-image: radial-gradient(100% 62% at 50% 0%, #000 6%, transparent 68%);
}
:root[data-page="home"] { --w-grid: rgba(255, 255, 255, .038); }
:root[data-page="home"][data-theme="light"] { --w-grid: rgba(11, 11, 13, .05); }

/* ==========================================================================
   3. 滚动进度光带（顶部 2px，从余烬渐变到紫）
   ========================================================================== */

.scroll-beam {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 80; pointer-events: none;
  background: rgba(255, 255, 255, .04);
}
.scroll-beam i {
  display: block; height: 100%; width: 100%;
  /* 用 scaleX 而不是 width：改 width 会触发布局，改 transform 只走合成层 */
  transform: scaleX(var(--beam, 0)); transform-origin: left center;
  background: linear-gradient(90deg, var(--hx-ember), var(--hx-rose) 48%, var(--hx-violet));
  box-shadow: 0 0 14px color-mix(in srgb, var(--hx-ember) 70%, transparent);
}

/* ==========================================================================
   4. 首屏
   ========================================================================== */

html[data-page="home"] .hero {
  position: relative;
  /* 首屏高度收短：原来 960px 把内容拉得很空，也让第二屏的卡片迟迟不出现。
     860px / 92svh 更紧凑，"一开始就干净清爽"，卡片也能更早露头。 */
  min-height: min(860px, 92vh);            /* 老浏览器兜底 */
  min-height: min(860px, 92svh);           /* 移动端按"小视口"算，地址栏收起也不跳 */
  /* 底部留白：给滚动提示一条"不被玻璃板压住"的通道 */
  padding: clamp(80px, 11vh, 128px) 0 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* 胶片颗粒：极淡一层噪声，用来压掉大面积渐变上的色带（banding）。
   --------------------------------------------------------------------------
   刻意**不用 mix-blend-mode**：混合模式会让这一整屏每帧重新混合一次，
   而它下面正好是持续移动的极光 —— 实测这是第二贵的开销。
   纯叠加 + 5% 不透明度，观感几乎一样，成本几乎为零。 */
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
:root[data-page="home"][data-theme="light"] .hero-grain { opacity: .04; }

/* 极光：三色光在背后缓慢游走
   --------------------------------------------------------------------------
   性能要点（实测过）：这里**不能用 filter: blur()**。
   径向渐变本身就是柔和的，再加一层 78px 模糊只是把同一个画面算两遍，
   而且这层每帧都在移动 —— 实测这一项就吃掉 ~70ms/帧。
   改成"加宽渐变衰减 + 提升为合成层"，观感几乎一致，成本降到零头。 */
.hero-aurora {
  position: absolute; inset: -24% -12% 0; z-index: 0;
  pointer-events: none;
  transform: translateY(calc(var(--hero-p, 0) * -70px)) translateZ(0);
  will-change: transform;
}
.hero-aurora .au {
  position: absolute; border-radius: 50%;
  animation: auDrift 24s ease-in-out infinite;
  will-change: transform;
}
.au-1 { width: 56vw; height: 56vw; left: -4%;  top: -20%; background: radial-gradient(circle, var(--hx-ember), transparent 74%); opacity: .30; }
.au-2 { width: 44vw; height: 44vw; right: -3%; top: -10%; background: radial-gradient(circle, var(--hx-rose),  transparent 74%); opacity: .24; animation-duration: 28s; animation-delay: -7s; }
.au-3 { width: 38vw; height: 38vw; left: 32%;  top: 12%;  background: radial-gradient(circle, var(--hx-violet), transparent 76%); opacity: .24; animation-duration: 32s; animation-delay: -13s; }
/* 冷色对位：右下角一团冰蓝，把暖色"衬"出来（面积很小，只做对比不做主角） */
.au-4 { width: 30vw; height: 30vw; right: 16%; top: 30%;  background: radial-gradient(circle, var(--hx-ice), transparent 78%); opacity: .12; animation-duration: 20s; animation-delay: -4s; }
@keyframes auDrift {
  /* 用 transform 而不是 translate 属性：只有 transform 才和 will-change: transform
     匹配、才能真正提示合成器（之前写的 will-change 其实没起作用）。 */
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(3.5%, 4%, 0); }
  66%      { transform: translate3d(-4%, 2%, 0); }
}

/* 顶部斜射的演播室光 */
.hero-rays {
  position: absolute; left: 50%; top: -32%; z-index: 0;
  width: 130vw; height: 86vw; margin-left: -65vw;
  pointer-events: none; opacity: .38;
  background: conic-gradient(from 176deg at 50% 0%,
    transparent 0deg, rgba(255, 255, 255, .055) 7deg, transparent 15deg,
    transparent 23deg, rgba(255, 255, 255, .04) 31deg, transparent 39deg);
  -webkit-mask-image: radial-gradient(58% 46% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(58% 46% at 50% 0%, #000, transparent 72%);
}

/* 暗角：把注意力压回中心，同时保证文字对比度 */
html[data-page="home"] .hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 兜底（不支持 color-mix 的老 Safari / 老 WebView） */
  background: radial-gradient(124% 78% at 50% 0%, transparent 26%, rgba(7, 7, 13, .62) 72%, #07070d 100%);
  background: radial-gradient(124% 78% at 50% 0%, transparent 26%, color-mix(in srgb, var(--w-bg) 62%, transparent) 72%, var(--w-bg) 100%);
}

html[data-page="home"] .hero-inner { z-index: 3; }

/* 眉标：等技术宽 + 一颗呼吸的活点 */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 22px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--w-r-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid color-mix(in srgb, var(--hx-ice) 16%, var(--w-hair));
  box-shadow: var(--w-bevel-soft), 0 8px 24px -14px rgba(0, 0, 0, .8);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  font-family: var(--w-font-mono);
  font-size: 12px; letter-spacing: .06em;
  color: var(--w-muted);
  width: fit-content;
}
/* 活点：脉冲改由"会缩放的环"承担（transform + opacity 走合成层），
   不再每帧重绘 box-shadow —— 常驻动画每帧重绘是隐性掉帧源。 */
.hero-eyebrow .dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hx-ember);
  box-shadow: 0 0 10px color-mix(in srgb, var(--hx-ember) 70%, transparent);
}
.hero-eyebrow .dot::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--hx-ember) 60%, transparent);
  animation: dotRing 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform, opacity;
}
@keyframes dotRing {
  0%        { transform: scale(1);   opacity: .85; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* 主标题：金属感渐变 + 一道缓慢扫过的镜面高光 */
html[data-page="home"] .hero-title {
  position: relative;
  font-size: clamp(2.7rem, 7.6vw, 5.6rem);
  font-weight: 700;
  /* 字距收紧只对拉丁字母有意义：DESIGN.md 明确写"中文不做负字距（会粘连）"，
     而标题是 "TaKuki 的小屋" 中英混排，所以取一个只压拉丁、不明显挤中文的量。 */
  letter-spacing: -.026em;
  line-height: 1.02;
  margin-bottom: 20px;
  /* 虹彩镀膜：白 → 冰蓝 → 暖奶油 → 余烬（冷起暖收，比"白→橙"更贵） */
  background: linear-gradient(176deg, #ffffff 3%, #dceaff 26%, #ffe3cd 56%, #ff9a5e 82%, #e2703a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 24px 60px color-mix(in srgb, var(--hx-ember) 24%, transparent));
  cursor: default;
}
/* 扫光：**只播一次（加载后）+ 悬停时再来一次**，不做常驻循环。
   原因是它动的是 `background-position` 而元素又用了 `background-clip: text`，
   等于每帧把文字重新栅格化一遍 —— 既是白烧性能，也是字缘发毛/"抽搐"的经典来源。 */
html[data-page="home"] .hero-title::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%);
  background-size: 230% 100%; background-position: 140% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: titleSheen 1.9s cubic-bezier(.4, 0, .2, 1) .55s 1 both;
}
html[data-page="home"] .hero-title:hover::after {
  animation: titleSheen 1.9s cubic-bezier(.4, 0, .2, 1) 0s 1 both;
}
@keyframes titleSheen {
  0%   { background-position: 140% 0; }
  24%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}

html[data-page="home"] .hero .sub {
  color: color-mix(in srgb, var(--w-text) 88%, transparent);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  max-width: 30em;
  margin: 0 auto 38px;
}

html[data-page="home"] .btn-hero-primary {
  position: relative; overflow: hidden;
  /* 磁吸位移由 JS 写 --mg-x/--mg-y，这里与 hover/active 的位移合成，
     不用 JS 直接写 transform（否则会盖掉按压反馈） */
  transform: translate3d(var(--mg-x, 0px), var(--mg-y, 0px), 0);
  transition: box-shadow var(--w-dur-2) var(--w-ease), border-color var(--w-dur-1) var(--w-ease);
  background: linear-gradient(132deg, #ff9440 0%, #ff5a2b 46%, #ff2f6b 100%);
  color: #fff; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 4px rgba(0, 0, 0, .45),
    0 18px 40px -14px color-mix(in srgb, #ff5a2b 80%, transparent);
}
html[data-page="home"] .btn-hero-primary::before {
  content: '';
  position: absolute; top: -60%; bottom: -60%; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  /* 扫光用 transform 位移（原来是动 left，每次都在触发布局） */
  transform: translateX(-130%) skewX(-18deg);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}
html[data-page="home"] .btn-hero-primary:hover::before { transform: translateX(320%) skewX(-18deg); }
html[data-page="home"] .btn-hero-primary:hover {
  transform: translate3d(var(--mg-x, 0px), calc(var(--mg-y, 0px) - 2px), 0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 2px 6px rgba(0, 0, 0, .45),
    0 24px 50px -16px color-mix(in srgb, #ff4a2b 90%, transparent);
}
html[data-page="home"] .btn-hero-primary:active {
  transform: translate3d(var(--mg-x, 0px), calc(var(--mg-y, 0px) + 1px), 0) scale(.985);
}

html[data-page="home"] .btn-hero-ghost {
  transform: translate3d(var(--mg-x, 0px), var(--mg-y, 0px), 0);
  transition: box-shadow var(--w-dur-2) var(--w-ease), background-color var(--w-dur-1) var(--w-ease), border-color var(--w-dur-1) var(--w-ease);
  background: rgba(255, 255, 255, .055);
  color: var(--w-ink);
  border: 1px solid var(--w-hair);
  box-shadow: var(--w-bevel-soft), 0 10px 26px -16px rgba(0, 0, 0, .8);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
html[data-page="home"] .btn-hero-ghost:hover {
  transform: translate3d(var(--mg-x, 0px), calc(var(--mg-y, 0px) - 2px), 0);
  background: rgba(255, 255, 255, .095);
  border-color: color-mix(in srgb, var(--hx-ember) 40%, transparent);
}
html[data-page="home"] .btn-hero-ghost:active {
  transform: translate3d(var(--mg-x, 0px), calc(var(--mg-y, 0px) + 1px), 0) scale(.985);
}

/* 首屏原来这里有一条元信息条（版本 / 内容），按要求已移除；
   版本号改放页脚徽章（.foot-ver），「最近更新」区块里也有版本标签。 */

/* ==========================================================================
   5. 悬浮展台（首屏的主角）
   ========================================================================== */

.showcase {
  position: relative;
  z-index: 2;
  margin-top: auto;
  height: clamp(280px, 40vh, 400px);
  perspective: 1700px;
  perspective-origin: 50% 40%;
  pointer-events: none;
}
.sc-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* 只保留一点"漂移"视差。
     **不再随滚动改透明度与缩放** —— 之前 opacity 从 1 掉到 0.45、scale 从 1 掉到 0.95，
     滚动时看起来就是"玻璃组件随滚动量变虚/变小"，这正是要修掉的那种感觉。 */
  transform: rotateX(11deg) rotateY(calc(var(--px, 0) * 3deg))
             translateY(calc(var(--sy, 0) * 18px));
  transition: none;
}

/* 背后的三色光：展台自己的"灯"
   同样不用 filter: blur() —— 椭圆径向渐变已经足够柔，模糊只是白算一遍。
   先写一条纯 rgba 的兜底：不支持 color-mix() 的老 Safari / 老 WebView 会整条声明失效，
   这层是"只有新层才声明"的装饰，丢了就完全没有灯了。 */
.sc-glow {
  position: absolute; left: 50%; top: 46%;
  width: 760px; height: 480px; margin: -240px 0 0 -380px;
  transform: translateZ(-430px);
  background:
    radial-gradient(ellipse at 42% 50%, rgba(255, 106, 43, .52), transparent 74%),
    radial-gradient(ellipse at 62% 46%, rgba(255, 47, 107, .38), transparent 74%),
    radial-gradient(ellipse at 50% 62%, rgba(124, 92, 255, .34), transparent 78%);
  background:
    radial-gradient(ellipse at 42% 50%, color-mix(in srgb, var(--hx-ember) 56%, transparent), transparent 74%),
    radial-gradient(ellipse at 62% 46%, color-mix(in srgb, var(--hx-rose) 42%, transparent), transparent 74%),
    radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--hx-violet) 38%, transparent), transparent 78%);
  opacity: .8;
  animation: glowBreath 11s ease-in-out infinite;
}

/* 玻璃板：薄、透、有边光 —— 靠 1px 亮边 + 顶部高光"立"起来
   --------------------------------------------------------------------------
   刻意**不用 backdrop-filter**：玻璃板下面正好是持续移动的光晕，
   每帧都要重新采样背景再模糊一次 —— 实测三块板吃掉 ~48ms/帧。
   改用"稍高一点的白 + 顶部内高光 + 深投影"，在这个深色场景里观感几乎无差。 */
.sc-slab {
  position: absolute; left: 50%; top: 50%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .17);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .155) 0%, rgba(255, 255, 255, .045) 44%, rgba(255, 255, 255, .085) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 3px 6px rgba(0, 0, 0, .45),
    0 30px 60px -22px rgba(0, 0, 0, .8);
  /* 板上的牌/标签靠 translateZ 浮在玻璃之上，需要 preserve-3d 才有纵深
     （这里已经没有 backdrop-filter 了，preserve-3d 不会被强制扁平化）。 */
  transform-style: preserve-3d;
  /* 这里的 will-change 是**有意义的**：玻璃板跟随指针移动，
     单独一层能让位移走合成器，避免每帧重新栅格化板内的文字与 1px 边光。 */
  will-change: transform;
}
/* 注意：玻璃板**不做任何常驻位移动画**。
   1px 边框跟着亚像素移动时会被每帧重新采样（实测 45 帧 45 个不同的小数位置），
   看上去就是"边框在蠕动"。生命感改由背后的光"呼吸"来表达 —— 只动透明度，不动几何。 */
@keyframes glowBreath {
  0%, 100% { opacity: .68; }
  50%      { opacity: .92; }
}

/* 三层错位：后层向左上"扇开"，每层露出自己的边（不扇开就只是一块板）
   --------------------------------------------------------------------------
   位移量由 JS 写成**整数像素**变量（--dx*/--dy*），转角写成 0.25° 步进（--ry*）。
   为什么不在 CSS 里 `calc(var(--px) * 30px)`：那会得到小数像素，
   合成层每帧按小数位置重采样，板内文字与 1px 边光就会"发毛/游走"。
   取整后每一帧都落在像素网格上，观感立刻干净。 */
.sc-slab--back {
  --off-x: -102px; --off-y: -74px;
  width: 262px; height: 158px; margin: -79px 0 0 -131px;
  transform:
    translate3d(calc(var(--off-x) + var(--dx3, 0px)), calc(var(--off-y) + var(--dy3, 0px)), -300px)
    rotateX(9deg) rotateY(var(--ry3, 0deg)) rotateZ(-11deg);
  opacity: .58;
}
.sc-slab--mid {
  --off-x: -56px; --off-y: -44px;
  width: 322px; height: 192px; margin: -96px 0 0 -161px;
  transform:
    translate3d(calc(var(--off-x) + var(--dx2, 0px)), calc(var(--off-y) + var(--dy2, 0px)), -150px)
    rotateX(6deg) rotateY(var(--ry2, 0deg)) rotateZ(-6deg);
  opacity: .8;
}
.sc-slab--front {
  --off-x: 34px; --off-y: 26px;
  width: 380px; height: 228px; margin: -114px 0 0 -190px;
  transform:
    translate3d(calc(var(--off-x) + var(--dx1, 0px)), calc(var(--off-y) + var(--dy1, 0px)), 70px)
    rotateX(2deg) rotateY(var(--ry1, 0deg));
}
/* 正面玻璃的镜面高光（跟着指针走） */
.sc-slab--front::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .26), transparent 62%);
}

/* 板上内容剪影
   --------------------------------------------------------------------------
   后两层玻璃板大部分被最前面的板挡住，所以内容必须放在**左上角**那块露出来的区域，
   否则文字会完全藏在前面板底下（这是实测截图才看出来的）。 */
.sc-cards { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 40px); display: flex; }
.sc-cards b {
  display: grid; place-items: center;
  width: 54px; height: 78px; margin: 0 -8px;
  border-radius: 7px;
  background: linear-gradient(158deg, #fffefb, #efe7d6);
  color: #23201c; font-size: 23px; font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), 0 12px 26px -12px rgba(0, 0, 0, .7);
  transform: rotate(var(--r, 0deg));
}
.sc-cards b:nth-child(1) { --r: -11deg; translate: 0 5px; }
.sc-cards b:nth-child(2) { --r: 0deg; }
.sc-cards b:nth-child(3) { --r: 11deg; translate: 0 5px; }
.sc-cards b.red { color: #c8352c; }
.sc-label {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center;
  font-family: var(--w-font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
/* 中层的露出区是"上边那条带"：左边放标签、右边放三根进度条 —— 一眼看出是 MBTI */
.sc-chip {
  position: absolute; left: 22px; top: 15px;
  transform: translate3d(0, 0, 26px);
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 8px 20px -10px rgba(0, 0, 0, .8);
  font-family: var(--w-font-mono); font-size: 10.5px; letter-spacing: .18em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.sc-bars {
  position: absolute; right: 24px; top: 20px; width: 42%;
  display: grid; gap: 7px;
  transform: translate3d(0, 0, 26px);
}
.sc-bars i {
  display: block; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .18));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.sc-bars i:nth-child(1) { width: 82%; }
.sc-bars i:nth-child(2) { width: 56%; }
.sc-bars i:nth-child(3) { width: 68%; }

/* 地面光池：让展台"落"在空间里，而不是漂在虚空（同样不用模糊滤镜） */
.sc-floor {
  position: absolute; left: 50%; top: 74%;
  width: 900px; height: 220px; margin-left: -450px;
  transform: translateZ(-60px) rotateX(76deg);
  background: radial-gradient(ellipse at center,
    rgba(255, 106, 43, .28),
    rgba(255, 47, 107, .11) 44%,
    transparent 80%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--hx-ember) 30%, transparent),
    color-mix(in srgb, var(--hx-rose) 12%, transparent) 44%,
    transparent 80%);
}

.sc-scroll-cue {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--w-font-mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--w-faint); text-transform: uppercase;
  opacity: calc(1 - var(--sy, 0) * 3);
}
.sc-scroll-cue span {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hx-ember) 80%, transparent));
  animation: cueDrop 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(.2); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.2); transform-origin: bottom; opacity: 0; }
}

/* 首屏离开视野后：把所有常驻动画真正停住。
   包括眉标活点（它的动画在 ::after 上，JS 改不到伪元素，只能靠这个类）。 */
.hero:not(.hero-visible) .hero-aurora .au,
.hero:not(.hero-visible) .sc-glow,
.hero:not(.hero-visible) .sc-scroll-cue span,
.hero:not(.hero-visible) .hero-eyebrow .dot::after {
  animation-play-state: paused;
}

/* ==========================================================================
   5′. 顶部导航滚动收缩（对齐 deepseek.com/harness 的行为）
   --------------------------------------------------------------------------
   参考站实测：页顶是一条通透的窄条，向下滚动后**收成一枚居中、带玻璃背景的胶囊**，
   过渡只作用于 background-color / border-color / backdrop-filter（都很便宜）。

   这里的关键取舍：**把胶囊做成绝对居中、导航外框高度固定 52px**。
   如果直接动 .nav-inner 的高度，它会参与文档流 —— sticky 导航每一帧改高度都会把
   整页往下推（整文档重排），收缩动画必然掉帧。外框定高 + 内部胶囊自己变，
   布局影响就只剩胶囊内部那 4 个元素。
   ========================================================================== */

html[data-page="home"] body > nav {
  height: 52px;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-page="home"] .nav-inner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 48px));
  max-width: none; margin: 0;
  height: 52px; padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition:
    width .32s var(--w-ease-out),
    height .32s var(--w-ease-out),
    padding .32s var(--w-ease-out),
    border-radius .32s var(--w-ease-out),
    background-color .3s var(--w-ease),
    border-color .3s var(--w-ease),
    box-shadow .3s var(--w-ease);
}
html[data-page="home"] .brand,
html[data-page="home"] .nav-links a,
html[data-page="home"] #theme-btn {
  transition: font-size .3s var(--w-ease-out), width .3s var(--w-ease-out),
              height .3s var(--w-ease-out), background-color .2s var(--w-ease),
              color .2s var(--w-ease), box-shadow .3s var(--w-ease);
}

/* 滚动态：收窄、变矮、显形为一枚玻璃胶囊，内部组件一起缩一档
   （宽度基准与未滚动时一致用 48px，否则窄屏上"滚动后反而更宽"）
   --------------------------------------------------------------------------
   毛玻璃的三层做法，缺一层就不像玻璃：
     ① backdrop-filter: blur + saturate —— 背景虚化并提纯色彩
     ② 一层极淡的上下渐变 —— 玻璃不是纯色，顶部受光、底部略深
     ③ inset 顶部 1px 高光 + 底部 1px 暗边 —— 这一步才"有厚度"，是玻璃的灵魂
   模糊半径从 18px 收到 14px：胶囊在滚动时每帧都要重新采样背后的内容，
   半径越大越贵；14px 在观感上几乎无差（配合 180% 饱和度反而更"通透"）。 */
html[data-page="home"] body > nav.is-scrolled .nav-inner {
  width: min(860px, calc(100% - 48px));
  /* 50 而不是 44：分段控件是 44px 按钮 + 2px 内边距 + 2px 边框，
     44px 的胶囊装不下，控件会上下各探出 3px（旧版就是这个毛病）。 */
  height: 50px;
  padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 56%, rgba(255, 255, 255, .045)),
    var(--nav-bg);
  border-color: var(--w-hair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 2px 6px -2px rgba(0, 0, 0, .40),
    0 14px 34px -14px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
/* 不支持 backdrop-filter 的浏览器：把底子加厚，别变成"透着一团糊" */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-page="home"] body > nav.is-scrolled .nav-inner {
    background: var(--nav-bg);   /* 不用 color-mix：这个分支本身就可能是老浏览器 */
  }
}
/* 浅色主题下玻璃要反过来：受光在上、底边压深，别用白高光堆在浅底上 */
:root[data-page="home"][data-theme="light"] body > nav.is-scrolled .nav-inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62) 58%, rgba(255, 255, 255, .78)),
    var(--nav-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(24, 18, 30, .05),
    0 2px 6px -2px rgba(24, 18, 30, .08),
    0 14px 34px -16px rgba(24, 18, 30, .18);
}
html[data-page="home"] body > nav.is-scrolled .brand { font-size: 14.5px; }
html[data-page="home"] body > nav.is-scrolled .nav-links { gap: 14px; }
html[data-page="home"] body > nav.is-scrolled .nav-links a { font-size: 13px; }
html[data-page="home"] body > nav.is-scrolled #theme-btn { width: 36px; height: 36px; }

/* ==========================================================================
   6. 区块：更大的字、更细的线、更克制的留白
   ========================================================================== */

html[data-page="home"] .sec-head { position: relative; }
html[data-page="home"] .sec-tag {
  color: var(--hx-ember);
  font-size: 11px; letter-spacing: .3em;
}
html[data-page="home"] .sec-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700; letter-spacing: -.034em; line-height: 1.08;
  color: var(--w-ink);
  margin-top: 12px;
}
html[data-page="home"] .sec-desc { font-size: 15px; color: var(--w-muted); margin-top: 12px; }
/* 标题下一条会"画出来"的发丝线 */
html[data-page="home"] .sec-head::after {
  content: ''; display: block; height: 1px; margin-top: 26px;
  background: linear-gradient(90deg, var(--w-hair), transparent 72%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .1s;
}
html[data-page="home"] .sec-head.visible::after { transform: scaleX(1); }

/* 作品卡：卡片背后各有一团自己颜色的光（第三张是站内的树洞，用冰蓝做区分） */
html[data-page="home"] .list .item:nth-child(1) { --card-glow: var(--hx-ember); }
html[data-page="home"] .list .item:nth-child(2) { --card-glow: var(--hx-violet); }
html[data-page="home"] .list .item:nth-child(3) { --card-glow: var(--hx-ice); }
/* 三张卡时如果按三列排，卡片只剩 ~300px 宽，中文会被断成"欢乐斗/地主"这种 ——
   改成两列（每张约 480px），并把"奇数张时的最后一张"通栏，
   既避免右下角留空，也多了一个编辑式的节奏。 */
html[data-page="home"] .list {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
html[data-page="home"] .list .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-page="home"] .item {
  position: relative;
  border-radius: var(--w-r-xl);
  /* 同色辉光用"背景图层"承载，而不是 ::after ——
     ::after 已经被 depth3d.js 的指针光泽（.dz-glare::after）占用，抢过来会让卡片失去光泽跟随 */
  background:
    radial-gradient(62% 130% at 0% 34%, color-mix(in srgb, var(--card-glow, #fff) 20%, transparent), transparent 62%),
    linear-gradient(158deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
  /* 边光直接用 border-color —— 早先用 mask 拼 1px 渐变边框，
     但遮罩边缘在 3D 变换下会逐个像素"游走"，看起来正是边框在抽搐。
     换成纯色边框 + 内侧 1px 高光环，稳定又便宜。 */
  border: 1px solid color-mix(in srgb, var(--card-glow, #fff) 16%, var(--w-hair));
  box-shadow: var(--w-bevel-soft), var(--w-e2), inset 0 0 0 1px rgba(255, 255, 255, .022);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
html[data-page="home"] .item:hover,
html[data-page="home"] .item.is-live {
  border-color: color-mix(in srgb, var(--card-glow, #fff) 42%, transparent);
  background:
    radial-gradient(62% 130% at 0% 34%, color-mix(in srgb, var(--card-glow, #fff) 30%, transparent), transparent 62%),
    linear-gradient(158deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: var(--w-bevel), var(--w-e3), inset 0 0 0 1px rgba(255, 255, 255, .035),
              0 20px 60px -24px color-mix(in srgb, var(--card-glow, #fff) 70%, transparent);
}
html[data-page="home"] .item-no {
  font-size: 13px; font-weight: 500; letter-spacing: .1em;
  color: color-mix(in srgb, var(--card-glow, #fff) 88%, #fff);
  min-width: 28px;
}
html[data-page="home"] .item-title { font-size: 18px; letter-spacing: -.012em; color: var(--w-ink); }
html[data-page="home"] .item-desc { color: var(--w-muted); font-size: 13.5px; }
html[data-page="home"] .item-tag {
  background: color-mix(in srgb, var(--card-glow, #fff) 14%, transparent);
  color: color-mix(in srgb, var(--card-glow, #fff) 92%, #fff);
  border: 1px solid color-mix(in srgb, var(--card-glow, #fff) 30%, transparent);
}
html[data-page="home"] .item:hover .item-arrow { color: color-mix(in srgb, var(--card-glow, #fff) 92%, #fff); }

/* 关注卡：整块玻璃 + 悬停时顶部一道流光 */
html[data-page="home"] .social {
  position: relative;
  border-radius: var(--w-r-xl);
  background: linear-gradient(158deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .026));
  border: 1px solid var(--w-hair);
  box-shadow: var(--w-bevel-soft), var(--w-e2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
}
html[data-page="home"] .social::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hx-ember) 80%, transparent), transparent);
  /* 用透明度而不是 scaleX：1px 线条做缩放会在 3D 变换下抖动 */
  opacity: 0; transition: opacity var(--w-dur-2) var(--w-ease);
}
html[data-page="home"] .social:hover::before,
html[data-page="home"] .social.is-live::before { opacity: 1; }
html[data-page="home"] .social:hover,
html[data-page="home"] .social.is-live {
  background: linear-gradient(158deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .04));
  box-shadow: var(--w-bevel), var(--w-e3);
  border-color: color-mix(in srgb, var(--hx-ice) 18%, var(--w-hair));
}
html[data-page="home"] .social-icon {
  background: linear-gradient(158deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid var(--w-hair);
  box-shadow: var(--w-bevel), 0 12px 26px -14px rgba(0, 0, 0, .8);
}

/* 树洞：工作台下沉，留言卡是玻璃 */
html[data-page="home"] .treehole-form {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--w-hair);
  border-radius: var(--w-r-2xl);
  box-shadow: var(--w-inset), 0 20px 50px -30px rgba(0, 0, 0, .9);
  padding: 24px 26px;
}
html[data-page="home"] .treehole-form input,
html[data-page="home"] .treehole-form textarea,
html[data-page="home"] .reply-form input {
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--w-hair);
  color: var(--w-ink);
  box-shadow: var(--w-inset);
}
html[data-page="home"] .treehole-form input:focus,
html[data-page="home"] .treehole-form textarea:focus,
html[data-page="home"] .reply-form input:focus {
  border-color: color-mix(in srgb, var(--hx-ember) 70%, transparent);
  box-shadow: var(--w-inset), 0 0 0 3px color-mix(in srgb, var(--hx-ember) 26%, transparent);
}
html[data-page="home"] .treehole-form button {
  background: linear-gradient(132deg, #ff9440, #ff5a2b 60%, #ff2f6b);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 34px -16px color-mix(in srgb, #ff5a2b 85%, transparent);
}
html[data-page="home"] .treehole-item {
  background: linear-gradient(158deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .026));
  border: 1px solid var(--w-hair);
  border-radius: var(--w-r-lg);
  box-shadow: var(--w-bevel-soft), var(--w-e2);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
html[data-page="home"] .treehole-item:hover { box-shadow: var(--w-bevel-soft), var(--w-e3); }
html[data-page="home"] .treehole-item.active {
  box-shadow: var(--w-bevel-soft), var(--w-e3), inset 3px 0 0 var(--hx-ember);
  border-color: color-mix(in srgb, var(--hx-ember) 45%, transparent);
}
html[data-page="home"] .treehole-more {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--w-hair);
  box-shadow: var(--w-bevel-soft), var(--w-e1);
}
html[data-page="home"] footer {
  border-top: 1px solid var(--w-hair-soft);
  position: relative;
}
html[data-page="home"] footer::before {
  content: ''; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: min(520px, 70%); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hx-ember) 55%, transparent), transparent);
}

/* ==========================================================================
   6′. 最近更新（时间线）
   --------------------------------------------------------------------------
   刻意不做成卡片：一条发丝竖线 + 等宽日期 + 一枚版本徽章，
   在满是玻璃卡的页面里反而更"编辑感"，也更耐看。
   ========================================================================== */

html[data-page="home"] .log {
  list-style: none;
  position: relative;
  padding-left: 28px;
  display: grid;
  gap: 30px;
}
/* 时间线：顶部带一点余烬色，向下淡出到发丝线 */
html[data-page="home"] .log::before {
  content: '';
  position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 106, 43, .6),
    rgba(255, 255, 255, .10) 44%,
    transparent);
}
html[data-page="home"] .log-item { position: relative; }
html[data-page="home"] .log-item::before {
  content: '';
  position: absolute; left: -28px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--w-bg, #07070d);
  border: 1px solid rgba(255, 106, 43, .75);
  box-shadow: 0 0 0 4px rgba(255, 106, 43, .12);
}
html[data-page="home"] .log-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
html[data-page="home"] .log-ver {
  font-family: var(--w-font-mono);
  font-size: 12px; letter-spacing: .06em; color: #fff;
  padding: 3px 11px; border-radius: var(--w-r-pill);
  background: linear-gradient(135deg, rgba(255, 106, 43, .95), rgba(255, 47, 107, .8));
  box-shadow: var(--w-bevel-soft), 0 8px 20px -10px rgba(255, 106, 43, .8);
}
html[data-page="home"] .log-date {
  font-family: var(--w-font-mono);
  font-size: 11.5px; letter-spacing: .05em; color: var(--w-faint);
}
html[data-page="home"] .log-body { margin-top: 9px; }
html[data-page="home"] .log-title {
  font-size: 16px; font-weight: 600; letter-spacing: -.012em; color: var(--w-ink);
}
html[data-page="home"] .log-desc {
  margin-top: 6px;
  font-size: 14px; line-height: 1.72; color: var(--w-muted);
  max-width: 66ch;                     /* 控制行长，长段落才好读 */
}

/* 页脚版本号 */
html[data-page="home"] .foot-ver {
  display: inline-block; margin-left: 10px;
  padding: 2px 9px; border-radius: var(--w-r-pill);
  border: 1px solid var(--w-hair);
  font-family: var(--w-font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--w-faint);
}

/* ==========================================================================
   7. 浅色主题：影棚白（玻璃反过来，光晕变淡）
   ========================================================================== */

:root[data-page="home"][data-theme="light"] body {
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--hx-ember) 7%, transparent), transparent 60%),
    var(--w-bg);
}
:root[data-page="home"][data-theme="light"] .hero-aurora .au { will-change: transform; }
:root[data-page="home"][data-theme="light"] .au-1 { opacity: .20; }
:root[data-page="home"][data-theme="light"] .au-2 { opacity: .16; }
:root[data-page="home"][data-theme="light"] .au-3 { opacity: .15; }
:root[data-page="home"][data-theme="light"] .au-4 { opacity: .16; }
:root[data-page="home"][data-theme="light"] .hero-rays { opacity: .35; }
:root[data-page="home"][data-theme="light"] .hero::before {
  background: radial-gradient(124% 78% at 50% 0%, transparent 30%, color-mix(in srgb, var(--w-bg) 70%, transparent) 78%, var(--w-bg) 100%);
}
:root[data-page="home"][data-theme="light"] .hero-title {
  background: linear-gradient(176deg, #0a0a12 3%, #1b3a5c 26%, #ffd0b0 62%, #b0491c 86%, #7d3413 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--hx-ember) 18%, transparent));
}
:root[data-page="home"][data-theme="light"] .hero-eyebrow {
  background: rgba(255, 255, 255, .7);
  border-color: var(--w-hair);
  box-shadow: var(--w-bevel), var(--w-e1);
}
:root[data-page="home"][data-theme="light"] .btn-hero-ghost {
  background: rgba(255, 255, 255, .7);
  border-color: var(--w-hair);
}
:root[data-page="home"][data-theme="light"] .btn-hero-ghost:hover { background: #fff; }
:root[data-page="home"][data-theme="light"] .sc-slab {
  border-color: rgba(11, 11, 13, .10);
  /* 浅色下玻璃板不能是纯白 —— 否则白玻璃 + 白牌面糊成一片，牌看不清 */
  background: linear-gradient(158deg, #f8f6fa 0%, #eae5ef 48%, #f2eef5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 6px rgba(24, 18, 30, .10),
    0 34px 64px -24px rgba(24, 18, 30, .26);
}
:root[data-page="home"][data-theme="light"] .sc-cards b {
  box-shadow: 0 2px 6px rgba(24, 18, 30, .18), 0 14px 30px -12px rgba(24, 18, 30, .38);
}
:root[data-page="home"][data-theme="light"] .sc-glow { opacity: .5; }
:root[data-page="home"][data-theme="light"] .sc-floor { opacity: .55; }
:root[data-page="home"][data-theme="light"] .sc-label { color: rgba(11, 11, 13, .45); }
:root[data-page="home"][data-theme="light"] .sc-chip {
  background: rgba(11, 11, 13, .07);
  border-color: rgba(11, 11, 13, .16);
  color: #16131b;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px -10px rgba(24, 18, 30, .3);
}
:root[data-page="home"][data-theme="light"] .sc-bars i {
  background: linear-gradient(90deg, rgba(11, 11, 13, .3), rgba(11, 11, 13, .08));
}
:root[data-page="home"][data-theme="light"] .item {
  background:
    radial-gradient(62% 130% at 0% 34%, color-mix(in srgb, var(--card-glow, #fff) 13%, transparent), transparent 62%),
    linear-gradient(158deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
}
:root[data-page="home"][data-theme="light"] .social {
  background: linear-gradient(158deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
}
:root[data-page="home"][data-theme="light"] .treehole-form { background: rgba(255, 255, 255, .6); }
:root[data-page="home"][data-theme="light"] .treehole-form input,
:root[data-page="home"][data-theme="light"] .treehole-form textarea,
:root[data-page="home"][data-theme="light"] .reply-form input { background: rgba(255, 255, 255, .9); }
:root[data-page="home"][data-theme="light"] .treehole-item {
  background: linear-gradient(158deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .78));
}

/* ==========================================================================
   8. 响应式
   ========================================================================== */

@media (max-width: 1080px) {
  .sc-slab--front { --off-x: 30px; --off-y: 22px; width: 340px; height: 204px; margin: -102px 0 0 -170px; }
  .sc-slab--mid   { --off-x: -50px; --off-y: -40px; width: 288px; height: 172px; margin: -86px 0 0 -144px; }
  .sc-slab--back  { --off-x: -92px; --off-y: -66px; width: 234px; height: 141px; margin: -70px 0 0 -117px; }
}
@media (max-width: 820px) {
  html[data-page="home"] .hero { min-height: auto; padding-bottom: 36px; }
  .showcase { height: 250px; perspective: 1200px; }
  .sc-slab--front { --off-x: 24px; --off-y: 18px; width: 290px; height: 174px; margin: -87px 0 0 -145px; }
  .sc-slab--mid   { --off-x: -40px; --off-y: -32px; width: 246px; height: 147px; margin: -74px 0 0 -123px; }
  .sc-slab--back  { display: none; }
  .sc-cards b { width: 44px; height: 62px; font-size: 19px; margin: 0 -7px; }
  .sc-glow { width: 460px; height: 300px; margin: -150px 0 0 -230px; }
  .sc-floor { width: 560px; margin-left: -280px; }
  .hero-eyebrow { font-size: 11px; padding: 6px 13px 6px 10px; }
}
@media (max-width: 560px) {
  .showcase { height: 220px; }
  .sc-slab--front { --off-x: 18px; --off-y: 14px; width: 236px; height: 142px; margin: -71px 0 0 -118px; border-radius: 18px; }
  .sc-slab--mid   { --off-x: -30px; --off-y: -24px; width: 200px; height: 120px; margin: -60px 0 0 -100px; border-radius: 16px; }
  .sc-cards b { width: 36px; height: 50px; font-size: 16px; margin: 0 -6px; }
  .sc-chip { left: 14px; top: 10px; padding: 4px 9px; font-size: 9px; }
  .sc-bars { right: 14px; top: 13px; gap: 5px; }
  .sc-bars i { height: 5px; }
  .sc-label { font-size: 9.5px; letter-spacing: .06em; bottom: 16px; color: rgba(255, 255, 255, .84); }
  .sc-scroll-cue { font-size: 9px; letter-spacing: .16em; bottom: -22px; }
  html[data-page="home"] .hero-actions { flex-direction: column; align-items: stretch; }
  html[data-page="home"] .hero-actions .btn { justify-content: center; }
}

/* 小屏 / 矮屏：首屏收紧，让"首屏"真的是一屏
   --------------------------------------------------------------------------
   实测 320×568 上首屏高 668px（比视口高 100px），要滚动才能看全展台。
   这条**必须放在本文件末尾**：展台高度是在上面几个媒体查询里定义的，
   写在 depth3d.css 会被这里的规则按"后加载覆盖"顶掉（我踩过这个坑）。 */
@media (max-width: 600px), (max-height: 620px) {
  html[data-page="home"] .hero { padding-top: clamp(64px, 9vh, 96px); padding-bottom: 40px; }
  html[data-page="home"] .hero-title { margin-bottom: 14px; letter-spacing: -.018em; }
  html[data-page="home"] .hero .sub { margin-bottom: 26px; }
  .showcase { height: 210px; }
  .hero-eyebrow { margin-bottom: 16px; }
}

/* ==========================================================================
   9. 降级：系统要求减少动态效果时，把"会动的东西"全部停掉
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-aurora .au,
  .sc-glow,
  .hero-eyebrow .dot::after,
  .sc-scroll-cue span { animation: none !important; }
  html[data-page="home"] .hero-title::after { animation: none; opacity: 0; }
  .scroll-beam i { transition: none; }
  .sc-stage { transform: rotateX(11deg); }
}
html[data-page="home"] .me-mail { background: rgba(226, 112, 58, .10); }
html[data-page="home"] .deck-card { background: rgba(255, 255, 255, .055); }
:root[data-page="home"][data-theme="light"] .deck-card { background: rgba(255, 255, 255, .94); }

/* 窄屏：语言段字号收一点，避免挤爆导航（高度仍保持触控目标） */
@media (max-width: 720px) {
  html[data-page="home"] .seg--lang .seg-item { padding: 0 8px; font-size: 11.5px; }
}
/* 超窄屏（iPhone SE 320 / 小安卓）：三个 44px 图标段 + 两个语言段 + 品牌
   在 240px 的内容宽里放不下 —— 这里把品牌收成只剩名字，分段收到 38×42
   （低于 44 是这一档的物理限制，审计对 <400px 的视口也按 38 判）。 */
@media (max-width: 399px) {
  html[data-page="home"] .seg-item { min-width: 40px; min-height: 42px; }
  html[data-page="home"] .brand { font-size: 14px; }
  html[data-page="home"] .brand .brand-full { display: none; }
}

/* ==========================================================================
   11. 「桌面卡片」—— 个人信息 + 介绍 / 此刻
   --------------------------------------------------------------------------
   参考 omari-8oj.pages.dev 的"卡片错落摆放"。
   上一版用绝对定位铺桌面，结果在 1000~1200px 宽的窗口里两张卡几乎贴在一起、
   右下角空一大片 —— 看着就像没做完。这版改成**两列网格 + 用 margin 做错落**：
   观感一样是"随手摆的"，但任何宽度都不会互相压住、也不会留下塌掉的空档。
   仍然刻意不用 backdrop-filter（三张卡的模糊实测要吃掉 30ms+/帧）。
   ========================================================================== */

html[data-page="home"] .deck {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 18px;
  /* 必须是 stretch（默认值）：左卡跨两行、右卡分居两行时，
     行高应当由右列内容决定、左卡拉伸去匹配 —— 这样永远不会重叠。
     之前是 align-items: start，行高由"跨行的左卡"决定，
     右卡再用 margin-top 下移就会溢出自己的行、压到下一张卡上。 */
  align-items: stretch;
  margin-top: 6px;
}
html[data-page="home"] .deck-card {
  padding: 24px 26px;
  border-radius: 22px;
  border: 1px solid var(--w-hair);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .045)),
    color-mix(in srgb, var(--w-surface) 74%, transparent);
  box-shadow: var(--w-bevel), var(--w-e2);
  /* 位移必须钳制在 ±5px 以内：三张卡之间只有 18px 间隙，
     而每张卡的视差系数不同 —— 不钳制的话（尤其改变窗口大小后带着旧布局算出的值）
     相邻两张卡会互相压过去（实测重叠 11~16px）。
     ±5px 意味着两张卡最多相差 10px，安全落在 18px 之内。 */
  transform: translate3d(0, clamp(-5px, calc(var(--p, 0) * 1px), 5px), 0);
}
/* 关于这三张卡的错落：**不做位移**。
   试过 margin-top 下移，在"跨行 + 行高由左侧决定"的网格里必然溢出到下一行（实测重叠 11~14px）。
   现在靠"左卡更高更宽 + 右列两张卡的尺寸差"形成层次，任何宽度都不会重叠。 */
html[data-page="home"] .deck-card--now { margin-top: 0; }

/* 浅色主题：反过来的玻璃 */
:root[data-page="home"][data-theme="light"] .deck-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .74) 58%, rgba(255, 255, 255, .88)),
    var(--w-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 3px rgba(24, 18, 30, .05),
    0 18px 40px -20px rgba(24, 18, 30, .22);
}

html[data-page="home"] .deck-card p {
  margin: 0 0 11px;
  color: var(--w-text);
  line-height: 1.8;
  font-size: 14.5px;
}
html[data-page="home"] .deck-card p:last-child { margin-bottom: 0; }
html[data-page="home"] .deck-card b { color: var(--w-ink); }

/* 个人信息头部：首字母头像 + 名字 + 身份 */
html[data-page="home"] .me-head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--w-hair-soft);
}
html[data-page="home"] .me-avatar {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(145deg, var(--w-accent-hi), var(--w-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px var(--w-accent);
}
html[data-page="home"] .me-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html[data-page="home"] .me-id b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
html[data-page="home"] .me-id i { font-style: normal; font-size: 12.5px; color: var(--w-muted); }

/* 邮箱：一枚可点的胶囊 */
html[data-page="home"] .me-mail {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 15px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--w-hair);
  background: color-mix(in srgb, var(--w-accent) 9%, transparent);
  color: var(--w-accent-tx);
  font-size: 13px;
  text-decoration: none;
  transition: background-color .2s var(--w-ease), border-color .2s var(--w-ease), transform .2s var(--w-ease);
}
html[data-page="home"] .me-mail svg { width: 13px; height: 13px; flex: none; }
html[data-page="home"] .me-mail,
html[data-page="home"] .me-social { white-space: nowrap; }
html[data-page="home"] .me-mail span { font-size: 11px; letter-spacing: -.01em; }
html[data-page="home"] .me-social { white-space: nowrap; }
html[data-page="home"] .me-mail:hover {
  background: color-mix(in srgb, var(--w-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--w-accent) 40%, transparent);
}

html[data-page="home"] .deck-kicker {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w-accent-tx);
  margin-bottom: 12px;
  font-weight: 600;
}

/* 世界时钟 */
html[data-page="home"] .clock-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--w-hair-soft);
}
html[data-page="home"] .clock-row:last-of-type { border-bottom: 0; }
html[data-page="home"] .clock-city { color: var(--w-muted); font-size: 13.5px; flex: none; min-width: 44px; white-space: nowrap; }
html[data-page="home"] .clock-time {
  font-size: 20px; font-weight: 600; color: var(--w-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
html[data-page="home"] .clock-date {
  margin-left: auto; font-style: normal;
  font-size: 12px; color: var(--w-faint);
  font-variant-numeric: tabular-nums;
}
html[data-page="home"] .clock-foot {
  margin-top: 13px; font-size: 12px; color: var(--w-faint);
  letter-spacing: .04em;
}

/* 中窄屏：并成一列，取消错落偏移 */
@media (max-width: 900px) {
  html[data-page="home"] .deck { grid-template-columns: 1fr; gap: 14px; }
  html[data-page="home"] .deck-card { padding: 20px 20px; }
  html[data-page="home"] .deck-card--now { margin-top: 0; }
  html[data-page="home"] .deck-card p { font-size: 14px; }
  html[data-page="home"] .clock-time { font-size: 18px; }
}

/* ==========================================================================
   12. 导航精简 + 切换动画 + 紧凑时钟卡 + 环境音播放器
   ========================================================================== */

/* ---------- 12.1 导航只剩「品牌 + 两个切换」 ---------- */
html[data-page="home"] .nav-links { display: none; }          /* 已从 HTML 移除，这里再兜一层 */
html[data-page="home"] .nav-right { gap: 10px; }
@keyframes segPop {
  0%   { transform: scale(.62) rotate(-28deg); opacity: .35; }
  60%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* 语言切换：被替换的文案淡入上浮一下，不是硬跳 */
.i18n-in { animation: i18nIn .36s var(--w-ease-out) both; }
@keyframes i18nIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 12.3 时钟卡做小 ---------- */
html[data-page="home"] .deck { grid-template-columns: 1.72fr 1fr; }
html[data-page="home"] .deck-card--now { padding: 18px 20px; }
html[data-page="home"] .deck-card--now .deck-kicker { margin-bottom: 9px; }
html[data-page="home"] .clock-row { padding: 5px 0; gap: 8px; }
html[data-page="home"] .clock-city { font-size: 12.5px; min-width: 40px; }
html[data-page="home"] .clock-time { font-size: 17px; }
html[data-page="home"] .clock-date { font-size: 11px; }
html[data-page="home"] .clock-foot { margin-top: 8px; font-size: 11px; }

/* ---------- 12.4 音乐卡播放器（真实音频文件） ---------- */
html[data-page="home"] .player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--w-hair-soft);
}
html[data-page="home"] .player-btn {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--w-hair);
  background: rgba(226, 112, 58, .12);
  background: color-mix(in srgb, var(--w-accent) 12%, transparent);
  color: var(--w-accent-tx);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .2s var(--w-ease), background-color .25s var(--w-ease), box-shadow .25s var(--w-ease);
}
html[data-page="home"] .player-btn svg { width: 16px; height: 16px; display: block; }
html[data-page="home"] .player-btn .ic-pause { display: none; }
html[data-page="home"] .player.is-playing .player-btn .ic-play { display: none; }
html[data-page="home"] .player.is-playing .player-btn .ic-pause { display: block; }
html[data-page="home"] .player.is-playing .player-btn {
  background: var(--w-accent);
  color: #fff;
  box-shadow: 0 6px 18px -8px var(--w-accent);
}
html[data-page="home"] .player-btn:active { transform: scale(.94); }
html[data-page="home"] .player-main { flex: 1; min-width: 0; }
html[data-page="home"] .player-title {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--w-ink);
}
html[data-page="home"] .player-dot { color: var(--w-faint); }
html[data-page="home"] .player-sub { margin-top: 2px; font-size: 11.5px; color: var(--w-faint); }

/* ---------- 12.6 进度条与时间（真实音频那一套） ----------
   进度条直接用 input[type=range]：键盘 ←→、触摸拖动、无障碍语义全都白送。
   两个硬约束（都是被自己的审计工具教出来的）：
     · 轨道视觉上只有 4px 细线，但控件本身必须 ≥44px 高 —— 否则 `smallControls`
       会判"可点区域太小"（移动端 40px 以下直接红）。
     · 显式 font-size:16px —— iOS 上字号 <16px 的输入控件聚焦时会把整页放大。
   已播部分的填充用 --fill（JS 每帧写一个百分比），比再叠一层 div 便宜。 */
html[data-page="home"] .player-track {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
html[data-page="home"] .player-seek {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  font-size: 16px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html[data-page="home"] .player-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--w-accent) 0 var(--mu-fill, 0%),
    color-mix(in srgb, var(--w-muted) 38%, transparent) var(--mu-fill, 0%) 100%);
}
html[data-page="home"] .player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  border: 0;
  background: var(--w-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
html[data-page="home"] .player-seek::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--w-muted) 38%, transparent);
}
html[data-page="home"] .player-seek::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--w-accent);
}
html[data-page="home"] .player-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--w-ink);
}
html[data-page="home"] .player-seek:focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 2px;
  border-radius: 999px;
}
html[data-page="home"] .player-seek:disabled { cursor: default; opacity: .5; }
html[data-page="home"] .player-time {
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--w-muted);
  white-space: nowrap;
}

/* 歌名 / 作者：正常换行，**不做省略号裁切**
   （audit 的文字裁切规则会把 ellipsis 判成"文字被裁掉"，而且长歌名本来就该看得全） */
html[data-page="home"] .player-title {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -.01em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
html[data-page="home"] .player-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--w-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
html[data-page="home"] .deck-card--music.is-error .player-sub { color: var(--w-accent-tx); }

/* 载入环：只在 buffering / play() 未 settle 时转，安静地贴在按钮边缘 */
html[data-page="home"] .player-btn { position: relative; }
html[data-page="home"] .player-spin {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--w-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--w-ease);
}
html[data-page="home"] .player.is-loading .player-spin {
  opacity: 1;
  animation: muSpin .8s linear infinite;
}
@keyframes muSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .player.is-loading .player-spin { animation: none; opacity: .85; }
}

/* ---------- 12.5 窄屏：导航只留两个切换，品牌收起 ---------- */
@media (max-width: 480px) {
  html[data-page="home"] .brand { display: none; }
  html[data-page="home"] .nav-right { gap: 8px; margin-left: auto; }
}

/* ==========================================================================
   13. 本轮：首屏文字动画 · 版面重整 · 音乐独立成卡
   ========================================================================== */

/* ---------- 13.1 首屏眉标「所有的相遇，始于一次联机」逐字入场 ----------
   JS 把文字拆成 <span class="eb-ch" style="--i:序号">，
   每个字延迟 34ms 上浮 + 轻微旋转淡入；随后整条胶囊过一道高光。 */
html[data-page="home"] .hero-eyebrow {
  position: relative;
  overflow: hidden;
}
html[data-page="home"] .hero-eyebrow .eb-ch {
  display: inline-block;
  animation: ebIn .62s var(--w-ease-out) both;
  animation-delay: calc(var(--i, 0) * 34ms);
}
@keyframes ebIn {
  from { opacity: 0; transform: translateY(9px) rotate(5deg); }
  to   { opacity: 1; transform: none; }
}
/* 逐字入场结束后，过一道柔光（一次性，不是常驻动画） */
html[data-page="home"] .hero-eyebrow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .22) 50%, transparent 66%);
  transform: translateX(-130%);
  animation: ebSweep 1.05s var(--w-ease-out) 1.05s both;
  pointer-events: none;
}
@keyframes ebSweep { to { transform: translateX(130%); } }
:root[data-page="home"][data-theme="light"] .hero-eyebrow::after {
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .75) 50%, transparent 66%);
}

/* ---------- 13.2 首屏版面重整 ----------
   两个按钮删掉后，标题下面只剩一句副标题 —— 用"上紧下松"的间距把这段收拢，
   展台上移，整屏不再头重脚轻、也不再空一块。 */
html[data-page="home"] .hero-inner { padding-bottom: 0; }
html[data-page="home"] .hero-inner .sub { margin-bottom: 0; }
html[data-page="home"] .hero-eyebrow { margin-bottom: 26px; }
html[data-page="home"] .hero-title { margin-bottom: 18px; }
html[data-page="home"] .showcase { margin-top: clamp(46px, 7vh, 84px); }

/* ---------- 13.3 音乐独立成卡：右侧两行、左卡跨行 ---------- */
html[data-page="home"] .deck {
  grid-template-columns: 1.55fr 1fr;
  align-items: stretch;
}
html[data-page="home"] .deck-card--me { grid-row: 1 / span 2; }
html[data-page="home"] .deck-card--now { grid-column: 2; grid-row: 1; }
html[data-page="home"] .deck-card--music { grid-column: 2; grid-row: 2; }
html[data-page="home"] .deck-card--music { padding: 18px 20px; }

/* 音乐卡里的播放器：竖排——大按钮 + 文案一行，下面是整条可视化波形 */
html[data-page="home"] .deck-card--music .player {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 13px;
}
html[data-page="home"] .deck-card--music .player-btn { width: 46px; height: 46px; }
html[data-page="home"] .deck-card--music .player-btn svg { width: 17px; height: 17px; }
/* 波形条：高度是**真实音频**的包络（--h，由 tools/waveform.mjs 解码算出来写进 HTML），
   这里只负责"播过的部分亮起来"。绝不加高度动画 —— 那会把真实包络盖掉，
   变成一条和音频毫无关系的装饰（旧版就是 5px↔26px 的假动画）。 */
html[data-page="home"] .player-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  margin-top: 12px;
}
html[data-page="home"] .player-wave i {
  flex: 1;
  height: var(--h, 40%);
  min-height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--w-muted) 62%, transparent);
  /* --mu-p 是"正在走的那一根"的比例（0~1），其余为 0：让进度在波形上连续推进。
     注意：这里**不能**用 --p —— 卡片视差那套也用 --p（单位是 px，由 home-hero.js 写在
     .deck-card 上），而波形条自己不带 --p，会从祖先继承到 ±5 这样的像素值，
     opacity 就被算成 2.8 / -1.7（裁到 1 / 0），往下滚动时条子会整排忽明忽暗。 */
  opacity: calc(.55 + .45 * var(--mu-p, 0));
  transition: background-color .35s var(--w-ease), opacity .35s var(--w-ease);
}
/* 正在播放：整条提一档亮度（形状不动） */
html[data-page="home"] .player.is-playing ~ .player-wave i { opacity: calc(.8 + .2 * var(--mu-p, 0)); }
/* 已经播过的部分：accent 全亮 */
html[data-page="home"] .player-wave i.is-on {
  background: var(--w-accent);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .player-wave i { transition: none; }
}

@media (max-width: 900px) {
  html[data-page="home"] .deck-card--me,
  html[data-page="home"] .deck-card--now,
  html[data-page="home"] .deck-card--music { grid-column: auto; grid-row: auto; }
  html[data-page="home"] .deck { grid-template-columns: 1fr; }
  html[data-page="home"] .hero-eyebrow { margin-bottom: 20px; }
}

/* ---------- 13.4 超窄屏（320~380px）标题字号 ----------
   标题是 nowrap 的：43.2px 时「TaKuki 的小屋」要 291px 宽，
   加上 .wrap 左右各 24px 内边距 = 339px > 320，右侧会被裁掉 19px（实测）。
   这一档收到 37px（约 244px 宽），留出安全余量。 */
@media (max-width: 380px) {
  html[data-page="home"] .hero-title { font-size: 37px; }
}

/* ---------- 13.5 首屏内容区显式撑满（修 320px 越界） ----------
   .hero 是居中列的 flex 容器，.hero-inner 作为 flex 子项会按 **fit-content** 定宽：
   内容需要多宽就多宽，于是 320px 屏上撑到 339px（右边缘被 overflow 裁掉 19px）。
   显式 width:100% + border-box + min-width:0 之后，它的宽度永远等于容器减内边距。 */
html[data-page="home"] .hero-inner {
  width: 100%;
  max-width: var(--w-wrap);
  box-sizing: border-box;
  min-width: 0;
}

/* ---------- 13.6 窄屏展台：三块玻璃板别叠成一团 ----------
   实测 390px 上"中间板 × 前面板"重叠 176×120px —— 中间板几乎被压没了，
   看起来就是"卡面糊在一起"。窄屏把三块板的位置拉开、并整体缩小：
   前面板下移、中间板左移、后面板上移，保持"三层"的层次但不再互相压住主体。 */
@media (max-width: 900px) {
  html[data-page="home"] .sc-slab--back  { transform: translate3d(-12%, -9%, -80px) scale(.82) rotateY(9deg); }
  html[data-page="home"] .sc-slab--mid   { transform: translate3d(-4%, -4%, -40px) scale(.90) rotateY(5deg); }
  html[data-page="home"] .sc-slab--front { transform: translate3d(6%, 4%, 0) scale(.98) rotateY(-5deg); }
}
@media (max-width: 560px) {
  html[data-page="home"] .showcase { height: clamp(220px, 34vh, 300px); }
  html[data-page="home"] .sc-slab--back  { transform: translate3d(-16%, -12%, -80px) scale(.78) rotateY(10deg); }
  html[data-page="home"] .sc-slab--front { transform: translate3d(9%, 6%, 0) scale(.96) rotateY(-6deg); }
}

/* ==========================================================================
   14. 博客主体：文章列表 / 公告 / 标签云 / 作者统计 / 头像
   --------------------------------------------------------------------------
   参考 mrzym.top（小张的个人博客）的结构取经：
     · 文章列表：标题 + 日期 + 标签 + 摘要，置顶单独标记
     · 作者卡：头像 + 名字 + 签名 + 统计（文章 / 标签 / 作品）
     · 公告：一行就够，不占版面
     · 标签云：从文章里自动统计，不需要单独维护
   注意：只取"结构"，文案与内容都是本站自己的。
   ========================================================================== */

/* ---------- 导航品牌 + 头像 ---------- */
html[data-page="home"] .brand--link {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--w-ink);
  font-weight: 700; font-size: 15px; white-space: nowrap;
}
html[data-page="home"] .brand-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: var(--w-bevel), var(--w-e1);
}

/* ---------- 个人信息卡：真头像 + 统计 ---------- */
html[data-page="home"] .me-avatar--img {
  object-fit: cover;
  background: none;
  padding: 0;
}
html[data-page="home"] .me-stats {
  display: flex; gap: 8px;
  margin: 0 0 15px; padding: 0; list-style: none;
}
html[data-page="home"] .me-stats li {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px;
  border-radius: 13px;
  border: 1px solid var(--w-hair-soft);
  background: rgba(255, 255, 255, .035);
}
html[data-page="home"] .me-stats b {
  font-size: 17px; font-weight: 700; color: var(--w-ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
html[data-page="home"] .me-stats span { font-size: 11px; color: var(--w-muted); }
:root[data-page="home"][data-theme="light"] .me-stats li { background: rgba(24, 18, 30, .035); }

/* ---------- 公告 ---------- */
html[data-page="home"] .notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
  padding: 13px 18px;
  border-radius: 15px;
  border: 1px solid var(--w-hair);
  background: rgba(226, 112, 58, .07);
  background: color-mix(in srgb, var(--w-accent) 7%, transparent);
  color: var(--w-text);
  font-size: 13.5px;
  line-height: 1.7;
}
html[data-page="home"] .notice a { color: var(--w-accent-tx); text-decoration: none; border-bottom: 1px solid currentColor; }
html[data-page="home"] .notice-dot {
  flex: none; width: 7px; height: 7px; margin-top: 7px;
  border-radius: 50%; background: var(--w-accent);
}

/* ---------- 文章列表 ---------- */
html[data-page="home"] .post-list { display: flex; flex-direction: column; gap: 12px; }
html[data-page="home"] .post {
  border-radius: 18px;
  border: 1px solid var(--w-hair);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%, rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .045);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%, rgba(255, 255, 255, .035)),
    color-mix(in srgb, var(--w-surface) 70%, transparent);
  box-shadow: var(--w-bevel), var(--w-e1);
  overflow: hidden;
  transition: border-color .25s var(--w-ease), box-shadow .25s var(--w-ease), transform .25s var(--w-ease);
}
:root[data-page="home"][data-theme="light"] .post {
  background: linear-gradient(180deg, #fff, #fbfafc);
  box-shadow: var(--w-bevel), var(--w-e1);
}
html[data-page="home"] .post:hover { border-color: color-mix(in srgb, var(--w-accent) 34%, var(--w-hair)); box-shadow: var(--w-bevel), var(--w-e2); }
html[data-page="home"] .post > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}
html[data-page="home"] .post > summary::-webkit-details-marker { display: none; }
html[data-page="home"] .post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
html[data-page="home"] .post-title {
  font-size: 16px; font-weight: 700; color: var(--w-ink);
  letter-spacing: -.01em; line-height: 1.35;
}
html[data-page="home"] .post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--w-faint);
}
html[data-page="home"] .post-meta time { font-variant-numeric: tabular-nums; }
html[data-page="home"] .post-tag {
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--w-hair-soft);
  background: rgba(255, 255, 255, .045);
  color: var(--w-muted); font-size: 11.5px;
}
/* 展开箭头：一条折线，展开时转 90° */
html[data-page="home"] .post-more {
  flex: none; width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--w-hair);
  display: grid; place-items: center;
  transition: transform .3s var(--w-ease-out), background-color .25s var(--w-ease);
}
html[data-page="home"] .post-more::before {
  content: ''; width: 6px; height: 6px;
  border-right: 1.6px solid var(--w-muted);
  border-bottom: 1.6px solid var(--w-muted);
  transform: rotate(45deg) translate(-1px, -1px);
}
html[data-page="home"] .post[open] .post-more { transform: rotate(90deg); background: color-mix(in srgb, var(--w-accent) 18%, transparent); }
html[data-page="home"] .post-body {
  padding: 0 20px 18px;
  color: var(--w-text);
  font-size: 14.5px;
  line-height: 1.85;
  animation: postIn .34s var(--w-ease-out);
}
html[data-page="home"] .post-body p { margin: 0 0 11px; }
html[data-page="home"] .post-body p:last-child { margin-bottom: 0; }
html[data-page="home"] .post-body code {
  font-family: var(--w-font-mono);
  font-size: .88em;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  color: var(--w-accent-tx);
}
@keyframes postIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 标签云 ---------- */
html[data-page="home"] .tag-cloud button i { margin-left: 6px; }
html[data-page="home"] .tag-cloud {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
html[data-page="home"] .tag-cloud button {
  appearance: none; cursor: pointer;
  /* 触控目标按 44×44 做（审计会按 44 判），视觉上仍是一枚轻量胶囊 */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--w-hair);
  background: rgba(255, 255, 255, .04);
  color: var(--w-muted);
  font: inherit; font-size: 12.5px;
  transition: color .2s var(--w-ease), border-color .2s var(--w-ease), background-color .2s var(--w-ease);
}
html[data-page="home"] .tag-cloud button:hover,
html[data-page="home"] .tag-cloud button.is-on {
  color: var(--w-ink);
  border-color: color-mix(in srgb, var(--w-accent) 40%, transparent);
  background: color-mix(in srgb, var(--w-accent) 12%, transparent);
}
html[data-page="home"] .tag-cloud button i { font-style: normal; color: var(--w-faint); margin-left: 5px; font-size: 11px; }

@media (max-width: 600px) {
  html[data-page="home"] .post > summary { padding: 15px 16px; gap: 10px; }
  html[data-page="home"] .post-title { font-size: 15px; }
  html[data-page="home"] .post-body { padding: 0 16px 16px; font-size: 14px; }
  html[data-page="home"] .me-stats li { padding: 8px 4px; }
}

/* ---------- 13.7 手机：展台只留两块玻璃板 ----------
   三块板在 ~390px 的舞台上必然互相压住（实测中板被前板压掉 176×120px），
   看起来就是"卡面糊在一起"。窄屏直接去掉最里面那块，只留两块并拉开偏移 ——
   两块的错位读起来是"一叠卡片"，是设计意图，而不是糊。 */
@media (max-width: 560px) {
  html[data-page="home"] .sc-slab--back { display: none; }
  html[data-page="home"] .sc-slab--mid   { transform: translate3d(-16%, -11%, -40px) scale(.88) rotateY(8deg); }
  html[data-page="home"] .sc-slab--front { transform: translate3d(13%, 8%, 0) scale(.97) rotateY(-6deg); }
}

/* ---------- 14.1 信息卡里的联系方式（邮箱 + B站 + 抖音）---------- */
html[data-page="home"] .me-links {
  display: grid;
  /* 三枚等宽（邮箱 + B站 + 抖音），手机上整行一个，仍然"大小一致" */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 15px;
}
html[data-page="home"] .me-mail,
html[data-page="home"] .me-social {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0;
  height: 44px;            /* 高度也钉死：三枚必须一模一样大 */
  min-height: 44px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--w-hair);
  text-decoration: none; font-size: 13px;
  transition: background-color .2s var(--w-ease), border-color .2s var(--w-ease);
}
html[data-page="home"] .me-mail {
  padding: 0 10px; gap: 5px;
  background: rgba(226, 112, 58, .10);
  background: color-mix(in srgb, var(--w-accent) 10%, transparent);
  color: var(--w-accent-tx);
}
html[data-page="home"] .me-mail svg { width: 13px; height: 13px; flex: none; }
html[data-page="home"] .me-mail,
html[data-page="home"] .me-social { white-space: nowrap; }
html[data-page="home"] .me-mail span { font-size: 11px; letter-spacing: -.01em; }
html[data-page="home"] .me-social { white-space: nowrap; }
html[data-page="home"] .me-social {
  background: rgba(255, 255, 255, .05);
  color: var(--w-muted);
}
html[data-page="home"] .me-social span { font-size: 14px; line-height: 1; }
html[data-page="home"] .me-mail:hover {
  background: color-mix(in srgb, var(--w-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--w-accent) 40%, transparent);
}
html[data-page="home"] .me-social:hover { color: var(--w-ink); border-color: var(--w-hair); }

@media (max-width: 520px) {
  html[data-page="home"] .me-links { grid-template-columns: 1fr; }
}

/* 文章区底部：去归档页 */
html[data-page="home"] .post-foot { margin-top: 14px; }
html[data-page="home"] .post-more-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--w-hair);
  color: var(--w-muted); text-decoration: none; font-size: 13.5px;
  transition: color .2s var(--w-ease), border-color .2s var(--w-ease);
}
html[data-page="home"] .post-more-link:hover { color: var(--w-ink); border-color: var(--w-accent); }

/* ==========================================================================
   15. 移动端横向溢出修复（实测：390px 设备上文档宽 420，浏览器被迫缩小页面，
       表现就是"板块像叠在一起、文字被挤出去"）
   --------------------------------------------------------------------------
   根因：导航里"品牌 + 语言分段 + 配色分段"合计约 420px，而胶囊在 390 屏上只有
   342px → 内容溢出胶囊 → 撑大文档宽度。
   ① 窄屏隐藏品牌：**这条必须放在 .brand--link 之后**（同特异性时后写的赢，
      之前那条写在前面，被 .brand--link{display:inline-flex} 覆盖了，所以品牌一直显示）；
   ② 分段控件在窄屏收小一档；
   ③ 兜底：html/body 用 overflow-x: clip（clip 不会创建滚动容器，position:sticky 照常工作）。
   ========================================================================== */
@media (max-width: 680px) {
  html[data-page="home"] .nav-inner .brand,
  html[data-page="home"] .nav-inner .brand--link { display: none; }
  html[data-page="home"] .nav-right { margin-left: auto; gap: 8px; }
}


/* 说说（琥珀）与相册（青绿）：与前三个作品卡区分开 */
html[data-page="home"] .list .item:nth-child(4) { --card-glow: #f5c542; }
html[data-page="home"] .list .item:nth-child(5) { --card-glow: #3ddc97; }