/* ==========================================================================
   环上旮旯 — Warm Ink
   与 ClipFlow 站点共用同一套设计令牌与组件取值：
   暖纸底 · 玫瑰主色 · 实心表面 + 细描边 · 10/16/20px 圆角 · MiSans
   （不使用紫色系、极光渐变、玻璃拟态）
   ========================================================================== */

:root{
  color-scheme: light;

  /* surfaces */
  --bg:#faf7f4;
  --bg-2:#f4efea;
  --surface:#ffffff;
  --surface-2:#fbf9f7;
  --ink:#1a1517;
  --ink-2:#453c40;
  --muted:#7a6f74;
  --line:rgba(26,21,23,.11);
  --line-2:rgba(26,21,23,.06);

  /* 外部平台品牌色（页脚联系方式用） */
  --brand-bili:#0d93c4;
  --brand-qq:#12b7f5;
  --brand-douyin:#e0335c;

  /* accents —— 站点默认主色是青绿（作品集首页），详情页由 data-accent 覆盖成
     该作品自己的色（rose / teal / amber，见文件末尾）。派生令牌一律 color-mix，
     换一次 --accent 就能整页换色；前一行是同值字面量做旧浏览器回退。 */
  --accent:#0b7e7e;
  --accent-fg:#fff;
  --accent-ink:#086060;
  --accent-ink:color-mix(in srgb, var(--accent) 76%, #000);
  --accent-soft:rgba(11,126,126,.10);
  --accent-soft:color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line:rgba(11,126,126,.34);
  --accent-line:color-mix(in srgb, var(--accent) 34%, transparent);
  --teal:#0d8f8f;
  --teal-soft:rgba(13,143,143,.10);
  --amber:#c9791f;

  --shadow-1:0 1px 2px rgba(26,21,23,.05),0 4px 14px -8px rgba(26,21,23,.14);
  --shadow-2:0 2px 6px rgba(26,21,23,.06),0 20px 44px -24px rgba(26,21,23,.30);

  /* 模糊令牌 —— 全站唯一的模糊出处，声明处一律写 var()，不要写死 blur()。
     （本站在入场动画里本来就不用 filter:blur，只有这几处毛玻璃，故只需玻璃令牌）
     fx-tier.js 在首帧之前给 html 加 .fx-lite（手机 / 核显 / 软件渲染）时，
     这一组整体解析成 none（见文件末尾「模糊分级」段）：既不画模糊，也不留合成层。 */
  --fx-glass-8:blur(8px);
  --fx-glass-14:blur(14px) saturate(1.3);
  --fx-glass-16:blur(16px) saturate(1.4);
  --fx-glass-20:blur(20px) saturate(1.5);

  --bezel:#ffffff;
  --device-shell:#ffffff;
  --grid:rgba(26,21,23,.045);
  --grain-opacity:.28;
  --grain-blend:multiply;
  --wash:radial-gradient(70% 55% at 50% -10%,rgba(11,126,126,.13),rgba(11,126,126,0) 70%);
  --wash:radial-gradient(70% 55% at 50% -10%,color-mix(in srgb, var(--accent) 13%, transparent),transparent 70%);
  --spot:rgba(11,126,126,.10);
  --spot:color-mix(in srgb, var(--accent) 10%, transparent);
  --shimmer:rgba(255,255,255,.34);
  --row-number:rgba(26,21,23,.16);

  --cursor-ring:rgba(11,126,126,.55);
  --cursor-ring:color-mix(in srgb, var(--accent) 55%, transparent);
  --cursor-ring-bg:rgba(11,126,126,.10);
  --cursor-ring-bg:color-mix(in srgb, var(--accent) 10%, transparent);
  --cursor-dot:var(--accent);

  --r-s:10px;
  --r-m:16px;
  --r-l:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --shell:1140px;

  /* 标题阶梯：与 APP官网/styles.css 完全同值，两站同一设计语言 */
  --t-display:clamp(44px,6vw,80px);  --t-display-ls:-.035em;
  --t-h1:clamp(38px,5.2vw,68px);     --t-h1-ls:-.045em;
  --t-h2:clamp(30px,3.8vw,48px);     --t-h2-ls:-.035em;
  --t-h3:clamp(19px,2vw,22px);       --t-h3-ls:-.012em;
  --t-lede:16px;                     --t-lede-lh:1.85;

  --ic-xs:14px; --ic-s:16px; --ic-m:18px; --ic-l:24px; --ic-xl:28px;
  --ic-stroke:1.75;

  --font:"MiSans","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

[data-theme="dark"]{
  color-scheme: dark;

  --bg:#141011;
  --bg-2:#191416;
  --surface:#1d1819;
  --surface-2:#231d1f;
  --ink:#f4efe9;
  --ink-2:#cfc5c7;
  --muted:#9a8f92;
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.07);

  /* 深色下品牌色提亮，保证在暗底上的可读性 */
  --brand-bili:#4bb8e8;
  --brand-qq:#4bc8f5;
  --brand-douyin:#ff5d7d;

  --accent:#3fc9c9;
  --accent-fg:#08221f;
  --accent-ink:#84e3e3;
  --accent-ink:color-mix(in srgb, var(--accent) 74%, #fff);
  --accent-soft:rgba(63,201,201,.14);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line:rgba(63,201,201,.40);
  --accent-line:color-mix(in srgb, var(--accent) 40%, transparent);
  --teal:#38c4be;
  --teal-soft:rgba(56,196,190,.14);
  --amber:#e2a561;

  --shadow-1:0 1px 2px rgba(0,0,0,.55),0 6px 18px -10px rgba(0,0,0,.8);
  --shadow-2:0 2px 8px rgba(0,0,0,.5),0 26px 54px -28px rgba(0,0,0,.9);

  --bezel:rgba(255,255,255,.88);
  --device-shell:#100c0d;
  --grid:rgba(255,255,255,.05);
  --grain-opacity:.16;
  --grain-blend:overlay;
  --wash:radial-gradient(70% 55% at 50% -10%,rgba(63,201,201,.16),rgba(63,201,201,0) 70%);
  --wash:radial-gradient(70% 55% at 50% -10%,color-mix(in srgb, var(--accent) 16%, transparent),transparent 70%);
  --spot:rgba(63,201,201,.12);
  --spot:color-mix(in srgb, var(--accent) 12%, transparent);
  --shimmer:rgba(255,255,255,.14);
  --row-number:rgba(255,255,255,.20);

  --cursor-ring:rgba(63,201,201,.7);
  --cursor-ring:color-mix(in srgb, var(--accent) 70%, transparent);
  --cursor-ring-bg:rgba(63,201,201,.12);
  --cursor-ring-bg:color-mix(in srgb, var(--accent) 12%, transparent);
  --cursor-dot:var(--accent);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
  overflow-x:clip;
}

body{
  margin:0;
  min-width:320px;
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0}
p{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:block;flex:none}

::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}

/* ---------- Backdrop ---------------------------------------------------- */
/* 这一层是「画了看不见」的：html 与 body 各自都有不透明背景，按绘制顺序，
   body 的在流背景画在 z-index:-2 的这个层之上 —— 所以 .wash / .grid-lines / .grain
   在整站都不出像素。于是这层任何会动 / 会过渡的属性都是纯浪费：主题切换那条
   .35s 底色淡入同样是整屏重绘，已删除。真正的底色氛围来自 body 的渐变。
   动这一层之前，先读这段。 */

.backdrop{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.wash{position:absolute;inset:-10% -10% auto -10%;height:82vh;background:var(--wash)}
.grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 20%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 20%,#000 0%,transparent 82%);
}
.grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:var(--grain-opacity);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.spotlight{
  position:fixed;z-index:-1;top:0;left:0;
  width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(circle,var(--spot) 0%,transparent 66%);
  will-change:transform;
}
body.has-pointer .spotlight{opacity:1}

/* ---------- Custom cursor ----------------------------------------------- */

/*
   注意：只有当 .cursor 元素真实存在时，JS 才会给 body 加 .custom-cursor。
   否则 cursor:none 会把系统指针藏掉、而替代光标又不存在 —— 指针直接消失。
*/
.cursor{position:fixed;z-index:9999;inset:0;pointer-events:none;display:none}
body.custom-cursor .cursor{display:block}
body.custom-cursor *{cursor:none !important}
body.custom-cursor :is(input,textarea,select,[contenteditable]){cursor:auto !important}

.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--cursor-dot);transition:opacity .3s ease}
.cursor-ring{
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border:1.5px solid var(--cursor-ring);
  transition:width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),background .3s ease,border-color .3s ease,opacity .3s ease;
}
body.cursor-hover .cursor-ring{width:50px;height:50px;margin:-25px 0 0 -25px;background:var(--cursor-ring-bg);border-color:transparent}
body.cursor-down .cursor-ring{width:22px;height:22px;margin:-11px 0 0 -11px}
body.cursor-hidden .cursor-dot,body.cursor-hidden .cursor-ring{opacity:0}

/* ---------- Scroll progress --------------------------------------------- */

.progress{position:fixed;z-index:60;top:0;left:0;right:0;height:2px;background:transparent}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--accent)}

/* ---------- Header ------------------------------------------------------ */

.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom:1px solid transparent;
  backdrop-filter:var(--fx-glass-20);
  -webkit-backdrop-filter:var(--fx-glass-20);
  transition:background .3s ease,border-color .3s ease;
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color:var(--line);
  backdrop-filter:var(--fx-glass-20);
  -webkit-backdrop-filter:var(--fx-glass-20);
}
.header-inner{width:min(var(--shell),calc(100% - 40px));margin-inline:auto;display:flex;align-items:center;gap:16px;height:64px}

.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em}
.brand-icon{width:32px;height:32px;border-radius:9px}
.brand-text{font-size:16.5px;font-weight:700;letter-spacing:-.015em}

.nav{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-ind{
  position:absolute;left:0;bottom:5px;height:2px;width:0;
  border-radius:2px;background:var(--accent);opacity:0;
  transition:transform .42s var(--spring),width .42s var(--spring),opacity .3s ease;
}
.nav a{position:relative;padding:10px 13px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:500;transition:color .22s ease,background .22s ease}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.is-active{color:var(--ink);font-weight:700}

.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav + .header-actions{margin-left:0}

.theme-toggle,.menu-toggle,.back-home{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  transition:border-color .22s ease,color .22s ease;
}
.theme-toggle:hover,.back-home:hover{border-color:var(--accent);color:var(--accent-ink)}
.theme-toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;overflow:hidden}
.theme-track{position:relative;display:block;width:17px;height:17px}
.theme-track .ic{position:absolute;inset:0;font-size:17px;opacity:0;transform:scale(.4) rotate(-50deg);transition:opacity .26s ease,transform .44s var(--spring)}
[data-theme-state="light"] .theme-track .t-light,
[data-theme-state="dark"] .theme-track .t-dark{opacity:1;transform:none}

/* 顶栏「返回首页」——与 app 站同一枚组件、同一套尺寸（34px / 12.5px / 700）。
   详情页没有导航、手机上也没有底部标签栏，这枚是窄屏唯一的返回入口，
   所以它不能像 .pill-btn 那样在 ≤820px 被藏掉。 */
.back-home{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.back-home .ic{font-size:15px}

.pill-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:12px;font-weight:500;
  transition:border-color .22s ease,color .22s ease;
}
.pill-btn .ic{font-size:13px;transition:transform .25s var(--ease)}
.pill-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.pill-btn:hover .ic{transform:translate(2px,-2px)}

.menu-toggle{display:none;width:34px;height:34px;border-radius:9px;position:relative}
.menu-toggle span{position:absolute;left:10px;width:14px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.menu-toggle span:first-child{top:13px}
.menu-toggle span:last-child{top:19px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobile-menu{
  position:fixed;z-index:49;top:72px;left:16px;right:16px;
  padding:12px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
  transform-origin:top center;
  animation:menuIn .28s var(--ease) both;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-menu nav{display:grid;gap:1px;margin-bottom:10px}
.mobile-menu nav a{padding:11px 13px;border-radius:9px;font-size:15px;font-weight:500;color:var(--ink-2)}
.mobile-menu nav a:hover{background:var(--surface-2);color:var(--ink)}
.mobile-menu .btn{width:100%}

/* ---------- Buttons ----------------------------------------------------- */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;
  border-radius:var(--r-s);border:1px solid transparent;
  font-size:14px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);transform:translate(-50%,-50%) scale(0);animation:ripple .62s ease-out forwards}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-primary:hover{background:var(--accent-ink);box-shadow:var(--shadow-1)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-outline,.btn-quiet{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-outline:hover,.btn-quiet:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* ---------- Hero -------------------------------------------------------- */

.hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:126px 0 90px}
.hero-inner{
  width:min(var(--shell),calc(100% - 48px));
  margin-inline:auto;position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
}

.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{
  position:absolute;bottom:-6%;
  width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:var(--pc,var(--accent));
  opacity:0;
  animation:rise var(--dur,18s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  14%{opacity:var(--po,.5)}
  78%{opacity:var(--po,.5)}
  100%{transform:translate3d(var(--dx,20px),-104vh,0);opacity:0}
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:500;letter-spacing:.01em;
}
.pulse{width:6px;height:6px;border-radius:50%;background:#25a06a;flex:none;box-shadow:0 0 0 0 rgba(37,160,106,.5);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,160,106,.45)}70%{box-shadow:0 0 0 9px rgba(37,160,106,0)}100%{box-shadow:0 0 0 0 rgba(37,160,106,0)}}

.hero h1{margin:22px 0 0;font-size:var(--t-display);line-height:1.08;letter-spacing:var(--t-display-ls);font-weight:700;text-wrap:balance}
.hero h1 .hl{display:block}
.hl{color:var(--accent);font-style:normal}

.hero .lede{max-width:480px;margin:22px 0 0;color:var(--muted);font-size:16px;line-height:1.85}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

.hero-stats{display:flex;flex-wrap:wrap;gap:36px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
.hero-stats li{display:flex;flex-direction:column;gap:2px}
.hero-stats strong{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-stats span{color:var(--muted);font-size:12.5px}

/* --- 首屏舞台：主视觉 + 腕表机模（2D 分层，无 preserve-3d） --- */

.hero-visual{position:relative;isolation:isolate}
.hero-visual::before{
  content:"";position:absolute;z-index:0;inset:-8% -6% -4% -6%;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--spot),transparent 72%);
}
.hero-stage{position:relative;z-index:1}

/*
  两款作品叠在同一个网格单元里切换 —— 隐藏的那个不再占用行高。
  之前的写法把它们上下堆叠，隐藏项仍然撑出高度，首屏凭空多出一整块空白。
*/
.stage-stack{display:grid}
.stage-product{
  grid-area:1/1;
  position:relative;
  /* 两款封面比例不同（1.745 / 1.497），网格高度取较高者；
     居中对齐让较矮的那款上下均分余量，手环的落点才一致 */
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.stage-product.is-hidden{opacity:0;pointer-events:none;transform:scale(.965)}

/*
   素材说明：机模截图（home/cg/settings/reading…）都是**带透明通道的抠图** ——
   四角 alpha = 0，轮廓本身就是设备外形。所以绝不能再套边框/圆角/底色，
   否则等于在抠图外面加一个白盒子，四角会露出方块。
   正确做法：直接投放 + drop-shadow（滤镜跟着 alpha 走，贴合外形）。
*/
.stage-cover{
  position:relative;z-index:1;
  aspect-ratio:var(--ar,16 / 10);
  overflow:hidden;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  background:var(--surface-2);
  box-shadow:var(--shadow-2);
  transition:border-color .35s ease;
}
/*
   图片尺寸用 !important 兜底：编辑器的实时预览会把浏览器算好的
   width/height 内联样式回写进源文件，那些固定像素会把图片钉死，
   换断点就错位。这里的尺寸是布局关键，必须压过可能存在的残留内联值。
*/
.stage-cover img{width:100% !important;height:100% !important;object-fit:cover}

.stage-watch{
  position:absolute;z-index:2;left:-8%;bottom:-8%;
  height:96%;aspect-ratio:272 / 563;
  rotate:-3deg;
  filter:drop-shadow(0 20px 30px rgba(26,21,23,.30)) drop-shadow(0 2px 6px rgba(26,21,23,.14));
  transition:filter .35s ease;
}
.stage-watch img{width:100% !important;height:100% !important;object-fit:contain}

.float-chip{
  position:absolute;z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-1);color:var(--ink);
  font-size:12px;font-weight:500;white-space:nowrap;
  animation:chipFloat 6s ease-in-out infinite;
}
.float-chip .ic{font-size:14px;color:var(--accent)}
.fc1{top:-16px;left:5%;animation-delay:0s}
.fc2{bottom:-14px;right:16%;animation-delay:1.3s}
.fc3{top:34%;right:-7%;animation-delay:2.4s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* --- 首屏作品切换 --- */

.hero-switcher{
  width:min(var(--shell),calc(100% - 48px));
  margin:60px auto 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  position:relative;z-index:2;
}
.hero-switcher button{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 12px;
  padding:14px 18px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);
  text-align:left;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.hero-switcher button:hover{border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.hero-switcher button.is-active{border-color:var(--accent);box-shadow:var(--shadow-1)}
.switch-index{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.hero-switcher button.is-active .switch-index{color:var(--accent-ink)}
.switch-label{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink-2)}
.hero-switcher button.is-active .switch-label{color:var(--ink)}
.switch-meta{color:var(--muted);font-size:11.5px;font-weight:400}
.switch-progress{grid-column:1/-1;height:2px;margin-top:6px;background:var(--line-2);border-radius:2px;overflow:hidden}
.switch-progress i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.14em;
}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(180deg,var(--accent-line),transparent);animation:cueMove 2.1s ease-in-out infinite}
@keyframes cueMove{0%,100%{transform:scaleY(.5);opacity:.45;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- Marquee ----------------------------------------------------- */

.marquee{
  position:relative;overflow:hidden;padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{padding-right:44px;color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------------------------------------------------- */

.section{position:relative;padding:112px 0;isolation:isolate}
.section + .section{padding-top:0}

.sec-head{position:relative;z-index:1;max-width:640px;margin-bottom:52px}
.kicker{color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sec-title{margin:14px 0 0;font-size:var(--t-h2);line-height:1.16;letter-spacing:var(--t-h2-ls);font-weight:700;text-wrap:balance}
.sec-lede{max-width:540px;margin:18px 0 0;color:var(--muted);font-size:15.5px;line-height:1.85}

/* ---------- Hover tint -------------------------------------------------- */

.glow{position:relative}
.glow::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--px,50%) var(--py,50%),var(--spot),transparent 62%);
  opacity:0;transition:opacity .3s ease;
}
.glow:hover::after{opacity:1}

/* ---------- 触屏设备：指针类效果一律不出现 ---------- */
/*
  除了 JS 侧的能力检测，这里再加一道 CSS 兜底：
  即使源文件被回写出残留的 body 状态类，触屏上也不会显示自定义光标与聚光斑，
  指针跟随高亮也不会因为「点一下触发 sticky hover」而残留。
*/
@media (hover: none){
  .cursor,.spotlight{display:none !important}
  .glow::after{display:none}
  [data-tilt]:hover{will-change:auto}
  .pill-btn:hover .ic,.rel-item:hover .rel-arrow,.friend-card:hover .friend-go,.update-row:hover .update-arrow{transform:none}
}

/* ---------- 3D tilt（全站卡片共用） ------------------------------------ */

/*
   所有卡片共用同一套倾斜逻辑：由 [data-tilt] 启用，强度用 data 属性声明，
   JS 只负责按指针位置写入 transform。想调参改 HTML 上的 data 属性即可。

   关键约束：这里绝不能出现 transform-style: preserve-3d。
   那会创建真实的三维渲染上下文，让卡片内部的浮层/角标与倾斜平面真实相交，
   渲染时被沿交线切成两半（本项目此前踩过的 3D 穿模问题）。
*/
[data-tilt]{transform-style:flat}
[data-tilt]:hover{will-change:transform}

/* ---------- Filter bar -------------------------------------------------- */

.filter-bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.search-box{
  display:flex;align-items:center;gap:9px;
  width:min(300px,100%);
  padding:0 14px;height:42px;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface);
  transition:border-color .22s ease;
}
.search-box:focus-within{border-color:var(--accent)}
.search-box .ic{font-size:16px;color:var(--muted)}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13.5px}
.search-box input::placeholder{color:var(--muted)}

.filter-tags{display:flex;flex-wrap:wrap;gap:6px}
.filter-tags button{
  padding:7px 14px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:500;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.filter-tags button:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.filter-tags button.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:700}

/* ---------- Product cards ---------------------------------------------- */

.product-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.product-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:border-color .28s ease,box-shadow .28s ease;
}
.product-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.product-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--card-accent,var(--accent));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.product-card:hover::before{transform:scaleX(1)}
.product-card[data-accent="teal"]{--card-accent:var(--teal)}
.product-card[data-accent="amber"]{--card-accent:var(--amber)}

.product-card-media{position:relative;display:block;aspect-ratio:var(--ar,16 / 10);overflow:hidden;background:var(--surface-2)}
.product-card-image{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .product-card-image{transform:scale(1.03)}
.product-card-flag{
  position:absolute;z-index:2;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-s);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:var(--fx-glass-8);-webkit-backdrop-filter:var(--fx-glass-8);
  border:1px solid var(--line);
  color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.product-card-flag .ic{font-size:13px;color:var(--accent)}

.product-card-copy{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;flex:1}
.product-card-head{display:flex;align-items:center;gap:12px}
.product-icon{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);flex:none}
.product-card-title{display:flex;flex-direction:column;min-width:0}
.product-card-title h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.product-card-title span{color:var(--muted);font-size:12.5px;margin-top:2px}
.product-card-summary{color:var(--muted);font-size:14px;line-height:1.8}

.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.card-tags i{
  font-style:normal;
  padding:4px 10px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font-size:11.5px;font-weight:500;
}

.product-card-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.card-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent-ink);font-size:13.5px;font-weight:700;
  border-bottom:1px solid var(--accent-line);padding-bottom:2px;
  transition:color .22s ease,border-color .22s ease;
}
.card-link b{font-weight:700;transition:transform .28s var(--ease)}
.product-card:hover .card-link b{transform:translate(2px,-2px)}
.card-link:hover{color:var(--accent);border-color:var(--accent)}
.card-price{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:700}

/* ---------- 作品卡横排（对齐 app 站项目卡的排版）------------------------
   左主视觉固定 44%，右侧文案；窄屏（≤820px，与 .product-grid 同断点）
   自动回到竖排，避免小屏上被挤成细条。 */
.product-card{flex-direction:row;align-items:stretch}
.product-card-media{flex:0 0 44%;aspect-ratio:auto;border-right:1px solid var(--line)}
.product-card-copy{padding:22px 24px}
@media (max-width:820px){
  .product-card{flex-direction:column}
  .product-card-media{flex:none;aspect-ratio:var(--ar,16 / 10);border-right:0;border-bottom:1px solid var(--line)}
}

.empty-state{margin:36px 0 0;color:var(--muted);font-size:14px;text-align:center}

/* ---------- Bento（腕上体验） ------------------------------------------ */

.bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

.bcard{
  position:relative;display:flex;flex-direction:column;
  padding:24px 22px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s var(--ease);
}
.bcard:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}

.bcard-icon{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:20px;
  transition:transform .3s var(--spring);
}
.bcard:hover .bcard-icon{transform:scale(1.06)}
.bcard h3{margin:18px 0 0;font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.bcard p{margin:9px 0 0;color:var(--muted);font-size:13.5px;line-height:1.78}

.b-tall{grid-column:span 2;grid-row:span 2;padding:30px 28px}
.b-tall h3{font-size:21px;margin-top:20px}
.b-tall p{font-size:14.5px;max-width:330px}
.b-tall .bcard-icon{width:48px;height:48px;border-radius:13px;font-size:23px}
.b-wide{grid-column:span 2}

/* 全 CG 收录：CG 缩略图排带 */
.cg-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:26px}
.cg-strip span{
  display:block;aspect-ratio:272 / 563;border-radius:9px;
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--accent-soft),var(--teal-soft));
  position:relative;overflow:hidden;
}
.cg-strip span::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 40% at 50% 12%,var(--shimmer),transparent 70%);
}

/* 文本框可拖动：可平移的文本框示意 */
.drag-demo{position:relative;margin-top:auto;padding-top:26px}
.drag-track{position:relative;height:74px;border-radius:10px;border:1px dashed var(--line);background:var(--surface-2)}
.drag-box{
  position:absolute;left:8px;bottom:10px;right:38%;
  padding:8px 10px;border-radius:8px;
  border:1px solid var(--accent-line);background:var(--accent-soft);
  color:var(--accent-ink);font-size:11px;font-weight:700;
  animation:dragSlide 5s var(--ease) infinite;
}
@keyframes dragSlide{0%,18%{transform:translate(0,0)}46%,64%{transform:translate(0,-26px)}92%,100%{transform:translate(0,0)}}

/* ---------- Steps ------------------------------------------------------- */

.steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps::before{content:"";position:absolute;top:52px;left:10%;right:10%;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 14px)}

.step{
  position:relative;padding:26px 24px 28px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s var(--ease);
}
.step:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.step-num{position:absolute;top:16px;right:20px;font-size:32px;font-weight:700;letter-spacing:-.04em;color:var(--row-number)}
.step-icon{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:20px;
  transition:transform .3s var(--spring);
}
.step:hover .step-icon{transform:scale(1.07)}
.step h3{margin:20px 0 0;font-size:17.5px;font-weight:700;letter-spacing:-.02em}
.step p{margin:9px 0 0;color:var(--muted);font-size:13.5px;line-height:1.78}

/* ---------- Showcase（界面预览） ---------------------------------------- */

.showcase{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.shot{margin:0;text-align:center}
.shot:nth-child(even){margin-top:36px}
/*
   截图框：素材本身是抠图，这里只负责阴影与悬停位移，
   不要 border / border-radius / background —— 那会在透明四角外露白。
*/
.shot-frame{
  position:relative;
  filter:drop-shadow(0 18px 26px rgba(26,21,23,.26));
  transition:filter .45s var(--ease),transform .45s var(--ease);
}
.shot:hover .shot-frame{transform:translateY(-8px);filter:drop-shadow(0 26px 34px rgba(26,21,23,.30))}
.shot-frame img{width:100% !important;height:auto !important;display:block}
.shot figcaption{margin-top:14px;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.6}

/* ---------- Device groups ----------------------------------------------- */

.device-groups{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.device-group{
  display:flex;flex-direction:column;
  padding:26px 26px 24px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  transition:border-color .28s ease,box-shadow .28s ease;
}
.device-group:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.dg-head{display:flex;align-items:flex-start;gap:14px}
.dg-icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:12px;
  background:var(--teal-soft);color:var(--teal);font-size:21px;
  transition:transform .3s var(--spring);
}
.device-group:hover .dg-icon{transform:scale(1.06)}
.dg-head h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.dg-head p{margin:7px 0 0;color:var(--muted);font-size:13.5px;line-height:1.75}
.dg-count{
  margin-left:auto;flex:none;
  padding:4px 10px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font-size:11.5px;font-weight:700;
}
.dg-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.dg-list li{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font-size:13px;
  transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.dg-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none}
.dg-list li:hover{border-color:var(--accent-line);color:var(--ink);background:var(--surface)}

/* ---------- Updates ----------------------------------------------------- */

.update-list{position:relative;z-index:1;display:grid;gap:10px}
.update-row{
  display:grid;grid-template-columns:104px 1fr 1.15fr auto;gap:20px;align-items:center;
  padding:22px 24px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease);
}
a.update-row:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.update-state{
  justify-self:start;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-s);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
}
.update-state[data-tone="live"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.update-state[data-tone="wip"]{border-color:var(--teal-soft);background:var(--teal-soft);color:var(--teal)}
.update-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.update-row strong{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.update-row > span:last-child{color:var(--muted);font-size:14px}
.update-arrow{color:var(--muted);font-size:16px;transition:transform .28s var(--ease),color .22s ease}
a.update-row:hover .update-arrow{transform:translate(3px,-3px);color:var(--accent)}
.update-row.plain{grid-template-columns:104px 1fr 1.15fr}

/* ---------- FAQ --------------------------------------------------------- */

.faq-list{position:relative;z-index:1;display:grid;gap:8px;max-width:820px}
.faq-item{
  position:relative;
  border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);
  overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.faq-item:hover{border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.faq-item.open{border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:19px 22px;text-align:left;font-size:15.5px;font-weight:500}
.faq-q i{position:relative;flex:none;width:16px;height:16px}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.6px;border-radius:2px;background:var(--accent);transition:transform .3s var(--ease)}
.faq-q i::after{transform:rotate(90deg)}
.faq-item.open .faq-q i::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.85}
.faq-a p a{
  display:inline-block;margin-left:4px;
  color:var(--accent-ink);font-weight:700;
  border-bottom:1px solid var(--accent-line);
  transition:color .22s ease,border-color .22s ease;
}
.faq-a p a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Friends ----------------------------------------------------- */

.friend-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.friend-card{
  position:relative;display:flex;gap:16px;align-items:flex-start;
  padding:22px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease);
}
.friend-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.friend-logo{
  position:relative;z-index:1;
  display:grid;place-items:center;flex:none;
  width:52px;height:52px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface-2);
  font-size:26px;
  transition:transform .3s var(--spring);
}
.friend-card:hover .friend-logo{transform:scale(1.06) rotate(-3deg)}
.friend-card[data-brand="clipflow"] .friend-logo{background:rgba(196,86,111,.12);color:#c4566f;border-color:rgba(196,86,111,.22)}
.friend-card[data-brand="bandbbs"] .friend-logo{background:var(--teal-soft);color:var(--teal);border-color:rgba(13,143,143,.22)}

.friend-body{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;flex:1}
.friend-head{display:flex;align-items:center;gap:10px}
.friend-head strong{font-size:16px;font-weight:700;letter-spacing:-.01em}
.friend-go{margin-left:auto;color:var(--muted);font-size:15px;transition:transform .28s var(--ease),color .22s ease}
.friend-card:hover .friend-go{transform:translate(3px,-3px);color:var(--accent)}
.friend-body small{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.75}
.friend-url{margin-top:10px;color:var(--accent-ink);font-size:12px;font-weight:700}

/* ---------- Footer ------------------------------------------------------ */

.site-footer{position:relative;margin-top:32px;padding:72px 0 32px;border-top:1px solid var(--line);background:var(--surface-2)}
.footer-inner{display:grid;grid-template-columns:1.1fr .94fr 1.24fr;gap:44px;align-items:start;padding-bottom:40px}
.footer-brand .brand{padding:0}
.footer-brand > p{max-width:320px;margin:18px 0 0;color:var(--muted);font-size:13.5px;line-height:1.8}
.footer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.footer-tags span,.footer-tags a{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:11.5px;font-weight:500;
  transition:border-color .22s ease,color .22s ease;
}
.footer-tags a:hover{border-color:var(--accent-line);color:var(--accent-ink)}

/* 页脚联系方式：B 站 / 抖音 / QQ 群 / 邮箱 */
.footer-contact{margin-top:16px}
.footer-contact h4{
  display:flex;align-items:center;gap:7px;
  margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.footer-contact-list{display:grid;gap:8px}
.contact-chip{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  padding:8px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;line-height:1;
  transition:border-color .22s ease,color .22s ease;
}
.contact-chip .ic{width:16px;height:16px;flex:none;color:var(--muted);transition:color .22s ease}
.contact-chip:hover{border-color:var(--accent-line);color:var(--ink)}
.contact-chip[data-brand="bili"] .ic{color:var(--brand-bili)}
.contact-chip[data-brand="qq"] .ic{color:var(--brand-qq)}
.contact-chip[data-brand="qq"]:hover{border-color:color-mix(in srgb,var(--brand-qq) 42%,var(--line));color:var(--brand-qq)}
.contact-chip[data-brand="bili"]:hover{border-color:color-mix(in srgb,var(--brand-bili) 42%,var(--line));color:var(--brand-bili)}
.contact-chip[data-brand="douyin"] .ic{color:var(--brand-douyin)}
.contact-chip[data-brand="douyin"]:hover{border-color:color-mix(in srgb,var(--brand-douyin) 42%,var(--line));color:var(--brand-douyin)}

.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.footer-nav h4,.related-title,.disclaimer h4{
  display:flex;align-items:center;gap:7px;
  margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.footer-nav a{display:block;margin-bottom:9px;color:var(--ink-2);font-size:13.5px;transition:color .22s ease}
.footer-nav a:hover{color:var(--accent-ink)}

.related{position:relative}
.related-list{display:grid;gap:8px}
.rel-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  overflow:hidden;
  transition:border-color .22s ease,transform .22s var(--ease),box-shadow .22s ease;
}
.rel-item:hover{border-color:var(--accent-line);transform:translateX(3px);box-shadow:var(--shadow-1)}
.rel-badge{
  position:relative;z-index:1;
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:10px;font-size:18px;
  transition:transform .3s var(--spring);
}
.rel-item:hover .rel-badge{transform:scale(1.07)}
.rel-item[data-brand="clipflow"] .rel-badge{background:rgba(196,86,111,.12);color:#c4566f}
.rel-item[data-brand="bandbbs"] .rel-badge{background:var(--teal-soft);color:var(--teal)}
.rel-item[data-brand="amber"] .rel-badge{background:rgba(201,121,31,.12);color:var(--amber)}
.rel-text{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0}
.rel-text strong{font-size:13px;font-weight:700}
.rel-text small{color:var(--muted);font-size:11.5px;margin-top:1px}
.rel-arrow{position:relative;z-index:1;margin-left:auto;color:var(--muted);font-size:15px;transition:transform .28s var(--ease),color .22s ease}
.rel-item:hover .rel-arrow{transform:translate(3px,-3px);color:var(--accent)}

.disclaimer{
  position:relative;
  margin-top:8px;padding:22px 24px;
  border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);
}
.disclaimer h4{margin-bottom:12px}
.disclaimer h4 .ic{font-size:14px;color:var(--amber)}
.disclaimer p{color:var(--muted);font-size:12.5px;line-height:1.9}
.disclaimer p + p{margin-top:10px}
.disclaimer strong{color:var(--ink-2);font-weight:700}

.footer-base{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px;
}
.footer-base a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--line);transition:color .22s ease,border-color .22s ease}
.footer-base a:hover{color:var(--accent-ink);border-color:var(--accent-line)}

/* ---------- To top ------------------------------------------------------ */

.to-top{
  position:fixed;z-index:45;right:22px;bottom:22px;
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  color:var(--ink-2);font-size:17px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .34s var(--ease),visibility .3s,color .22s ease,border-color .22s ease;
}

.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- Entrance ---------------------------------------------------- */

/*
   文字出现动效：由「上移 + 高斯模糊」改为「上移 + 底部遮罩擦除」。
   模糊在中低端设备上掉帧明显，clip-path 只影响合成层，更顺滑。
*/
.js .reveal{opacity:0;transform:translate3d(0,18px,0)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms);
}
.js .reveal-title{clip-path:inset(-12% 0 108% 0)}
.js .reveal.in .reveal-title{
  clip-path:inset(-12% 0 -16% 0);
  transition:clip-path .78s var(--ease) calc(var(--d,0ms) + 90ms);
}
.js [data-anim]{opacity:0;transform:translate3d(0,16px,0)}
.js .hero-ready [data-anim]{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .hero-ready [data-anim="1"]{transition-delay:.04s}
.js .hero-ready [data-anim="2"]{transition-delay:.12s}
.js .hero-ready [data-anim="3"]{transition-delay:.22s}
.js .hero-ready [data-anim="4"]{transition-delay:.32s}
.js .hero-ready [data-anim="5"]{transition-delay:.42s}
.js .hero-ready [data-anim="6"]{transition-delay:.22s}
.js .hero-ready [data-anim="7"]{transition-delay:.5s}

/* ==========================================================================
   详情页
   ========================================================================== */

/*
   详情页首屏：不用「全宽头图 + 白字」。
   插画被拉到整屏会丢构图，而标题压在半透明遮罩上的对比度不可控 ——
   窄屏或浅色插画上直接读不清。改为与首页一致的左右分栏：
   文字落在实色纸面上，插画收进圆角海报框，手环以抠图叠在左下方。
*/
.detail-hero{position:relative;isolation:isolate;padding:126px 0 76px}
.detail-hero-inner{
  position:relative;z-index:1;
  width:min(var(--shell),calc(100% - 48px));margin-inline:auto;
  display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;
}
.detail-hero-content{max-width:560px}
.detail-hero-visual{position:relative;isolation:isolate}
.detail-hero-visual::before{
  content:"";position:absolute;z-index:0;inset:-8% -6% -4% -6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--spot),transparent 72%);
}
.detail-stage{position:relative;z-index:1}

.back-link{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:24px;
  padding:7px 14px 7px 12px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:500;
  transition:border-color .22s ease,color .22s ease;
}
.back-link:hover{border-color:var(--accent);color:var(--accent-ink)}
.detail-eyebrow{color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.detail-hero h1{margin:14px 0 0;font-size:var(--t-h1);line-height:1.06;letter-spacing:var(--t-h1-ls);font-weight:700;text-wrap:balance;color:var(--ink)}
.detail-subtitle{margin:18px 0 0;font-size:19px;color:var(--ink-2);font-weight:500}
.detail-description{max-width:480px;margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.85}
.detail-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.price-chip{
  display:inline-flex;align-items:center;height:46px;padding:0 16px;
  border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:13.5px;font-weight:700;
}
.dl-count{
  display:inline-flex;align-items:center;height:46px;padding:0 14px;
  color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;
}
.purchase-actions .dl-count{height:auto;padding:0}

.detail-section{position:relative;width:min(var(--shell),calc(100% - 48px));margin-inline:auto;padding:96px 0}
.detail-section + .detail-section{padding-top:0}
.detail-heading{max-width:620px;margin-bottom:48px}
.detail-heading > p:first-child{color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0}
.detail-heading h2{margin:14px 0 0;font-size:var(--t-h2);line-height:1.16;letter-spacing:var(--t-h2-ls);font-weight:700;text-wrap:balance}
.detail-heading h2 em{color:var(--accent);font-style:normal}
.detail-lede{max-width:520px;margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.85}

.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feature-item{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.feature-item:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
/* 序号用 --row-number（浅色 16% / 深色 20%），此前误用 --line（11%）导致几乎不可见 */
.feature-item > span{font-size:30px;font-weight:700;letter-spacing:-.04em;color:var(--row-number);margin-bottom:16px;line-height:1}
.feature-item h3{font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.feature-item p{margin:9px 0 0;color:var(--muted);font-size:13.5px;line-height:1.75}

.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.gallery-item{margin:0;display:flex;flex-direction:column;min-width:0}
/* 同样不再加边框/底色：素材是抠图，阴影由 .shot-frame 统一提供 */
.gallery-item img{width:100% !important;height:auto !important;display:block}
.gallery-item figcaption{margin-top:13px;color:var(--muted);font-size:12.5px;text-align:center;line-height:1.6}

/* ---------- 插件（AstroBox 导入器，界面截图按窄窗比例展示） ---------- */
.plugin-frames{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.plugin-frame{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:0;padding:0;
}
.plugin-screen{
  width:288px;max-width:100%;
  aspect-ratio:652 / 1170;
  border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--surface-2);
  box-shadow:var(--shadow-2);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .28s ease,box-shadow .28s ease;
}
.plugin-screen:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.plugin-screen img{
  width:100% !important;height:100% !important;
  object-fit:cover;object-position:top center;display:block;
}
.plugin-frame figcaption{
  color:var(--muted);font-size:12.5px;font-weight:500;line-height:1.6;
  text-align:center;max-width:300px;
}
/* 手机端：横向 snap 轮播，单张窄屏展示、不占满屏高，可滑动浏览 */
@media (max-width:680px){
  .plugin-frames{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-16px;padding:2px 16px 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .plugin-frames::-webkit-scrollbar{display:none}
  .plugin-frame{flex:0 0 auto;scroll-snap-align:start}
  .plugin-screen{width:min(62vw,228px)}
}

.device-grid{display:flex;flex-wrap:wrap;gap:8px}
.device-grid span{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:13px;
  transition:border-color .22s ease,color .22s ease;
}
.device-grid span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none}
.device-grid span:hover{border-color:var(--accent-line);color:var(--ink)}

.purchase-section{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  padding:36px 38px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2);
}
.purchase-section > div:first-child > p{color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.purchase-section h2{margin:12px 0 0;font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.purchase-section h2 em{color:var(--accent);font-style:normal}
.purchase-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:flex-end}
.price-label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;height:46px;line-height:1;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
  color:var(--muted);font-size:13px;
}
/*
   内层保留基线对齐（13px 的「售价」与 19px 的「2 元」并排时基线对齐最好看），
   外层用 align-items:center 把这一组垂直居中。
   之前只有 align-items:baseline：交叉轴按起点对齐，文字被顶在 46px 胶囊最上沿
   （实测上间距 1px / 下间距 13px），所以看起来「没有居中」。
*/
.price-label-inner{display:inline-flex;align-items:baseline;gap:7px}
.price-label strong{color:var(--accent-ink);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1}

/*
   玩家交流：原来是一条 1140px 宽的 flex 行，`justify-content:space-between`
   把两小段文字顶到左右两端、中间空掉一大片，看着很散。
   改成与购买区一致的两栏卡片：左侧是标签 + 大号群号 + 说明，右侧是明确的按钮。
*/
.community-section{
  display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;
  padding:30px 34px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);
}
.community-copy > p{color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.community-copy > strong{display:block;margin-top:10px;font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.community-copy > span{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.75}
.community-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

.legal-section{display:block}
/* 左对齐 + 小间距，不要 space-between（否则 1140px 宽下两段小字被拉到两端） */
.legal-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:30px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.legal-header p{margin:0;color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.legal-header span{color:var(--muted);font-size:12px}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 52px}
.legal-block{padding-top:18px;border-top:2px solid var(--line-2)}
.legal-block h3{margin:0;color:var(--ink);font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.legal-block p{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.95}

.detail-related{margin-top:8px}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:52px;padding-top:16px}
  .hero-copy{max-width:620px}
  .hero-visual{order:2}
  .float-chip{display:none}
  .hero{padding:118px 0 84px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:36px}
  .related{grid-column:1/-1}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-tall{grid-column:span 2;grid-row:auto}
  .b-wide{grid-column:span 2}
  .showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .shot:nth-child(even){margin-top:0}
  .shot:nth-child(2){margin-top:32px}
  .friend-grid{grid-template-columns:1fr}
  .device-groups{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purchase-section{grid-template-columns:1fr;gap:24px;padding:30px 28px}
  .purchase-actions{justify-content:flex-start}
  .detail-hero-inner{grid-template-columns:1fr;gap:44px}
  .detail-hero-content{max-width:600px}
  .detail-hero-visual{order:2;max-width:560px}
  .community-section{grid-template-columns:1fr;gap:20px;padding:26px 28px}
  .community-actions{justify-content:flex-start}
}

@media (max-width:820px){
  .nav,.pill-btn{display:none}
  .menu-toggle{display:block}
  /* 导航藏起来后没人再把按钮簇顶到右边，得自己右对齐。
     .nav + .header-actions 是 0-2-0，比 .header-actions 的 0-1-0 优先级高，
     只写后者会被上面「.nav + .header-actions{margin-left:0}」压掉（桌面端有 .nav 顶着，看不出来）。 */
  .header-actions,.nav + .header-actions{margin-left:auto}
  .section{padding:76px 0}
  .sec-head{margin-bottom:36px}
  .hero{min-height:auto;padding:110px 0 72px}
  .hero h1{font-size:clamp(36px,9.4vw,52px)}
  .hero-switcher{margin-top:48px}
  .scroll-cue{display:none}
  .product-grid{grid-template-columns:1fr}
  .update-row,.update-row.plain{grid-template-columns:1fr;gap:10px}
  .update-row > span:last-child{grid-column:auto}
  .update-arrow{display:none}
  .footer-inner{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
  .site-footer{padding:52px 0 28px}
  .to-top{right:14px;bottom:14px;width:40px;height:40px}
  .shell,.hero-inner,.header-inner,.hero-switcher,.detail-hero-inner{width:calc(100% - 32px)}
  .detail-hero{padding:118px 0 64px}
  .detail-hero h1{font-size:clamp(36px,9vw,52px)}
  .detail-section{width:calc(100% - 32px);padding:64px 0}
  .feature-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal-grid{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps::before{display:none}
  .showcase{grid-template-columns:1fr;gap:26px;max-width:320px;margin-inline:auto}
  .shot:nth-child(2){margin-top:0}
}

@media (max-width:600px){
  body{font-size:15px}
  /* 窄屏标题阶梯降一档（原先是 .sec-title 自己硬写 clamp） */
  :root{--t-h2:clamp(27px,7.6vw,34px);--t-h1:clamp(30px,8.4vw,44px)}
  .hero .lede{font-size:14.5px}
  .hero-stats{gap:22px}
  .hero-stats strong{font-size:21px}
  .btn{width:100%;min-height:46px}
  .hero-actions{gap:8px}
  .hero-switcher{grid-template-columns:1fr;gap:8px}
  .switch-label{font-size:14px}
  .filter-bar{flex-direction:column;align-items:stretch}
  .search-box{width:100%}
  .filter-tags{overflow-x:auto;padding-bottom:2px}
  .filter-tags button{flex:none}
  .product-card-copy{padding:20px 20px 22px}
  .bento{grid-template-columns:1fr}
  .b-tall,.b-wide{grid-column:auto}
  .b-tall{padding:24px 22px}
  .bcard{padding:22px 20px}
  .cg-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dg-list li{font-size:12.5px;padding:7px 11px}
  .update-row{padding:20px}
  .faq-q{padding:16px 18px;font-size:15px}
  .faq-a p{padding:0 18px 18px}
  .friend-card{padding:18px;gap:13px}
  .friend-logo{width:46px;height:46px;font-size:22px}
  .disclaimer{padding:18px}
  .purchase-section{padding:24px 20px}
  .community-section{padding:22px 20px}
  .footer-base{flex-direction:column;align-items:flex-start;gap:6px}
  .feature-grid,.gallery-grid{grid-template-columns:1fr}
  .detail-hero{padding:112px 0 48px}
  .detail-hero h1{font-size:clamp(32px,10vw,44px)}
  .detail-section{padding:56px 0}
  .particles{display:none}
}

/* ---------- 模糊 / 动画分级（弱设备） ---------------------------------- */

/*
  fx-tier.js 在首帧之前给 <html> 挂标记，两件事分开管：

  · html.fx-lite —— 动画与过渡降级（手机 / 平板 / 核显 / 省流 / 低内存）：停掉整屏
    重绘类动画与主题过渡。**它不再管模糊。**
  · html.fx-noblur —— 只关模糊（就是下面这块）。默认全站都有模糊，只有软件渲染 /
    没有可用 WebGL / URL 显式要求才加这个标记（2026-10-03 用户要求把模糊加回来）。

  这块把模糊令牌整体归零：filter:none 与 backdrop-filter:none 不产生任何滤镜合成层；
  位移 / 透明度 / clip-path 擦除一律保留，所以关掉的只有「糊」。
  代价提醒：模糊回到手机之后，顶栏、底部标签栏与详情页操作条那三条 backdrop-filter
  是常驻的，滚动时会逐帧采样背后内容 —— 这是这次恢复里唯一有真实开销的地方。

  想看判定结果：控制台 [fx-tier]，或 document.documentElement.dataset.fx。
  临时覆盖：?fx=lite（动画 + 模糊都关）/ ?fx=noblur（只关模糊）/ ?fx=full / ?fx=reset。
*/
html.fx-noblur{
  --fx-glass-8:none;
  --fx-glass-14:none;
  --fx-glass-16:none;
  --fx-glass-20:none;
}

/*
  主题切换那条 .35s 底色 / 文字淡入在 fx-lite 下改成立即生效：body 与 .backdrop
  的过渡整体停掉，手机上换主题不再是一次整屏重绘；桌面端保留原来的淡入。
  （.backdrop 是看不见的死层，它的 transition 已在上面删掉了，这里一并兜底。）
*/
html.fx-lite body{animation:none}
html.fx-lite body,
html.fx-lite .backdrop{transition:none}

/* ---------- Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal,.js [data-anim]{opacity:1 !important;transform:none !important}
  .js .reveal-title{clip-path:none !important}
  .spotlight,.cursor,.particles{display:none}
  .glow::after{display:none}
  .drag-box{animation:none}
}

/* ---------- Print ------------------------------------------------------- */

@media print{
  .backdrop,.spotlight,.progress,.site-header,.to-top,.marquee,.cursor,.particles,.scroll-cue{display:none}
  body{background:#fff}
  .js .reveal,.js [data-anim]{opacity:1 !important;transform:none !important}
}

/* ==========================================================================
   手机端 App 式适配
   全部在 ≤820px 内生效，**桌面端与平板横屏不受任何影响**。
   思路：底部标签栏承担导航、图集改横向 snap 轮播、触控目标 ≥44px、
   图片不再被拉伸放大、首屏机模不再越界被裁。
   ========================================================================== */

/* 底部标签栏：桌面隐藏 */
.tabbar{display:none}
/* 顶栏里的「进群」快捷入口只在手机显示（桌面已有米坛社区入口） */
.tabbar-only{display:none}

@media (max-width:820px){
  .tabbar-only{display:inline-flex}
  /* 窄屏首屏标题降一档（原先是 .hero h1 自己硬写 clamp） */
  :root{--t-display:clamp(34px,9.2vw,46px)}

  /* ---------- ① 底部标签栏（App 主导航） ---------- */
  .tabbar{
    position:fixed;z-index:48;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    border-top:1px solid var(--line);
    backdrop-filter:var(--fx-glass-20);
    -webkit-backdrop-filter:var(--fx-glass-20);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:50px;border-radius:12px;
    color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.01em;
    transition:color .2s ease,background .2s ease;
  }
  .tabbar a .ic{font-size:19px;transition:transform .28s var(--spring)}
  .tabbar a.is-active{color:var(--accent-ink);background:var(--accent-soft)}
  .tabbar a:active .ic{transform:scale(.88)}

  /* 底部栏占位，避免压住页脚末尾 */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* 手机端改由底部栏导航，收起汉堡菜单 */
  .menu-toggle,.mobile-menu{display:none !important}

  /* 回到顶部移到标签栏之上 */
  .to-top{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));width:46px;height:46px}

  /* ---------- ② 顶栏：下滑收起 / 上滑露出（App 常见） ---------- */
  .site-header{transition:transform .34s var(--ease),background .3s ease,border-color .3s ease}
  body.nav-hidden .site-header{transform:translateY(-102%)}

  /* ---------- ③ 触控目标一律 ≥44px ---------- */
  .brand{padding:6px 0;min-height:44px}
  .theme-toggle{width:44px;height:44px}
  .back-home{height:44px;padding:0 14px}
  .pill-btn{height:44px;padding:0 14px;font-size:12.5px}
  .back-link{min-height:44px;padding:0 16px;margin-bottom:18px}
  .filter-tags button{padding:11px 16px;font-size:13px}
  .filter-tags{gap:8px}
  .footer-nav a{padding:11px 0;margin-bottom:0}
  .footer-nav h4{margin-bottom:6px}
  .footer-tags span,.footer-tags a{min-height:44px;padding:12px 14px;font-size:12px}
  .contact-chip{min-height:44px;padding:12px 14px}
  .footer-base a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .card-link{min-height:44px;padding:0 2px;display:inline-flex;align-items:center}
  .faq-a p a{padding:8px 0;min-height:40px;display:inline-flex;align-items:center}
  .rel-item{min-height:62px}
  .update-row{min-height:64px}
  .search-box{height:48px}
  .faq-q{min-height:56px}

  /* ---------- ④ 首屏：机模不再越界被裁，视觉降级为「海报主图 + 机模内嵌」 ---------- */
  .hero{padding:96px 0 52px}
  .hero h1{line-height:1.12}
  .hero .lede{font-size:15px;line-height:1.8}
  .hero-stats{gap:22px;margin-top:30px;padding-top:20px}
  .hero-stats strong{font-size:23px}
  .hero-actions{gap:10px;margin-top:24px}
  /*
     手机端不再用「叠加」构图：
     桌面端画框够宽，机模负偏移叠出去是「探出画框」的层次；
     但手机画框只有 358px 宽，叠加既会把机模左侧裁掉（实测 x=-19），
     又会遮住海报主体。这里改成 App 商品页常见的「封面 + 设备」并列，
     两者都完整可见，机模也足够大（约 129×267）。
  */
  .stage-product{flex-direction:row;align-items:center;gap:14px}
  .stage-cover{flex:1 1 auto;min-width:0;border-radius:var(--r-m)}
  .stage-watch{
    position:static;flex:0 0 auto;
    width:36%;height:auto;aspect-ratio:272 / 563;
    rotate:-2deg;
  }
  .hero-switcher{margin-top:32px}
  .hero-switcher button{padding:12px 14px;min-height:64px}
  .switch-meta{font-size:11px}

  /* ---------- ⑤ 界面预览：横向 snap 轮播（App 图集浏览） ---------- */
  .showcase{
    display:flex;gap:14px;
    max-width:none;margin-inline:-16px;
    padding:4px 16px 12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .showcase::-webkit-scrollbar{display:none}
  /* 卡片宽度控制在原图 272px 以内，避免放大导致发虚 */
  .shot{flex:0 0 min(60%,214px);scroll-snap-align:center}
  .shot:nth-child(n){margin-top:0}

  /* ---------- ⑥ 其它区块的紧凑化 ---------- */
  .section{padding:64px 0}
  .sec-head{margin-bottom:28px}
  .sec-lede{font-size:14.5px}
  .filter-bar{margin-bottom:22px}

  /* 作品卡：压缩封面与文案间距 */
  .product-card-copy{padding:16px 16px 18px;gap:11px}
  .product-card-head{gap:10px}
  .product-icon{width:40px;height:40px;border-radius:10px}
  .product-card-title h3{font-size:17px}
  .product-card-title span{font-size:12px}
  .product-card-summary{font-size:13px;line-height:1.7}

  /* 腕上体验：手机上改两列瓦片，比单列省一半高度 */
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .b-tall,.b-wide{grid-column:span 2;grid-row:auto}
  .bcard{padding:16px 14px;gap:0}
  .bcard-icon{width:34px;height:34px;border-radius:10px;font-size:16px}
  .bcard h3{margin-top:12px;font-size:14.5px;line-height:1.35}
  .bcard p{margin-top:6px;font-size:12.5px;line-height:1.65}
  .b-tall{padding:20px 18px}
  .b-tall h3{margin-top:14px;font-size:17px}
  .b-tall p{font-size:13px}
  .b-tall .bcard-icon{width:40px;height:40px;font-size:19px}
  .cg-strip{padding-top:16px;gap:6px}
  .drag-demo{padding-top:16px}
  .drag-track{height:60px}

  /* 使用流程：压缩为紧凑卡 */
  .step{padding:18px 16px 20px}
  .step-num{font-size:24px;top:14px;right:16px}
  .step-icon{width:38px;height:38px;font-size:17px}
  .step h3{margin-top:14px;font-size:16px}
  .step p{margin-top:7px;font-size:13px;line-height:1.7}

  /* 设备：两列对齐，省掉逐行参差 */
  .device-group{padding:20px 18px}
  .dg-head{gap:12px}
  .dg-icon{width:38px;height:38px;font-size:18px}
  .dg-head h3{font-size:15.5px}
  .dg-head p{margin-top:5px;font-size:13px}
  .dg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px;padding-top:16px}
  .dg-list li{justify-content:center;font-size:12.5px;padding:10px 8px}

  /* 更新：行内信息改为上下排，去掉多余空白 */
  .update-row,.update-row.plain{padding:16px 18px;gap:8px;min-height:0}
  .update-row strong{font-size:14.5px}
  .update-row > span:last-child{font-size:13px}

  /* 问答：整行可点，高度已提到 56px */
  .faq-list{gap:10px}
  .faq-a p{padding:0 18px 18px;font-size:13.5px}
  .faq-item{border-radius:var(--r-m)}

  /* 友链：压缩 */
  .friend-card{padding:16px;gap:13px;align-items:center}
  .friend-logo{width:48px;height:48px;font-size:22px}
  .friend-body small{font-size:12.5px;line-height:1.7;margin-top:6px}
  .friend-url{font-size:11.5px;margin-top:8px}

  /* 页脚：先给「站内 / 社区 / 相关链接」定好节奏 */
  .footer-nav{gap:18px}
  .site-footer{padding:48px 0 24px}
  .disclaimer{padding:18px}
  .disclaimer p{font-size:12.5px;line-height:1.85}

  /* ---------- ⑦ 详情页 ---------- */
  .detail-hero{padding:104px 0 44px}
  .detail-hero-visual{max-width:none}
  .detail-stage .stage-watch{height:74%}
  .detail-section{padding:56px 0}
  .detail-heading{margin-bottom:28px}
  .detail-lede{font-size:14px}

  /* 特性 / 截图：手机上两列，既省一半高度，也把 272px 原图缩到约 170px 不再发虚 */
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feature-item{padding:18px 16px}
  .feature-item > span{font-size:22px;margin-bottom:10px}
  .feature-item h3{font-size:14.5px}
  .feature-item p{margin-top:6px;font-size:12.5px;line-height:1.7}

  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .gallery-item figcaption{margin-top:9px;font-size:11.5px}
  .shot-frame{filter:drop-shadow(0 10px 16px rgba(26,21,23,.22))}

  .device-grid span{padding:10px 12px;font-size:12.5px}
  .device-grid{gap:6px}

  .purchase-section{padding:24px 20px;gap:18px}
  .purchase-section h2{font-size:22px}
  .purchase-actions{width:100%}
  .purchase-actions .btn{flex:1 1 auto}

  .community-section{padding:22px 20px;gap:16px}
  .community-copy > strong{font-size:19px}
  .community-copy > span{font-size:12.5px}
  .community-actions{width:100%}
  .community-actions .btn{flex:1 1 auto}

  .legal-header{margin-bottom:22px;gap:8px}
  .legal-grid{gap:20px}
  .legal-block p{font-size:12px;line-height:1.85}

  /* ---------- ⑧ 详情页底部操作条（App 商品页式） ---------- */
  .actionbar{
    position:fixed;z-index:48;left:0;right:0;bottom:0;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 94%, transparent);
    border-top:1px solid var(--line);
    backdrop-filter:var(--fx-glass-16);
    -webkit-backdrop-filter:var(--fx-glass-16);
  }
  .actionbar .ab-price{
    display:flex;flex-direction:column;gap:1px;flex:none;
    color:var(--muted);font-size:11px;line-height:1.3;
  }
  .actionbar .ab-price strong{color:var(--accent-ink);font-size:17px;font-weight:700;letter-spacing:-.02em}
  .actionbar .btn{flex:1 1 auto;min-height:46px}
  .actionbar .btn-icon{
    flex:0 0 auto;width:46px;min-height:46px;padding:0;
    display:grid;place-items:center;font-size:19px;
  }
}

@media (min-width:821px){
  /* 桌面/平板：底部操作条不出现 */
  .actionbar{display:none}
}

@media (max-width:600px){
  /* 底部栏 5 个标签在窄屏上再收一点 */
  .tabbar a{font-size:10.5px;min-height:48px}
  .hero-switcher{grid-template-columns:1fr}
  .product-card-copy{padding:15px 15px 17px}
  .bcard{padding:15px 13px}
  .bcard h3{font-size:14px}
  .bcard p{font-size:12px}
  .dg-list li{font-size:12px;padding:9px 6px}
  .gallery-grid{gap:12px}
  .legal-block p{font-size:11.5px}
}

/* ==========================================================================
   作品级强调色 —— 三张详情页各自的主色
   --------------------------------------------------------------------------
   色值不是另起的，而是直接复用 data.js 里早就写好的 product.accent
   （witch-sabbath=rose / gal-master=teal / amakano2=amber）。
   detail.js 拿到 product 后设置 document.documentElement.dataset.accent，
   于是「进哪部作品，整页就是那部作品的色」。
   首页 index.html 不设 data-accent，落到 :root 默认的青绿。

   色相均已避开站点红线（HSL 235–315° 紫色区间），三档对比度已实测达标：
   白字 on accent ≥ 4.5:1、accent on 浅底 ≥ 4.5:1、accent on 深底 ≥ 4.5:1。
   ========================================================================== */

html[data-accent="rose"] {--accent:#c9255c;--accent-fg:#fff}
html[data-accent="teal"] {--accent:#0b7e7e;--accent-fg:#fff}
html[data-accent="amber"]{--accent:#8a6a1f;--accent-fg:#fff}

[data-theme="dark"] html[data-accent="rose"],
html[data-theme="dark"][data-accent="rose"] {--accent:#ff6b96;--accent-fg:#2a0d18}
[data-theme="dark"] html[data-accent="teal"],
html[data-theme="dark"][data-accent="teal"] {--accent:#3fc9c9;--accent-fg:#08221f}
[data-theme="dark"] html[data-accent="amber"],
html[data-theme="dark"][data-accent="amber"]{--accent:#d9b356;--accent-fg:#221904}

/* ==========================================================================
   动效层（配合 motion.js）—— 全部为渐进增强，浏览器不支持时自动退回静态
   ========================================================================== */

/* ---------- 1. 首屏编排交回 GSAP ----------
   GSAP 接管 [data-anim] 后会加 html.gsap-motion；此时必须撤掉 CSS 自己那份
   transition，否则两套动画同时驱动同一属性会互相打架（表现为抖动/闪回）。 */
html.gsap-motion [data-anim]{transition:none !important}

/* ---------- 2. 粒子斥力 ----------
   .particle 的 rise 关键帧占用的是 transform，所以位移走独立的 translate 属性，
   两者各管一路、可以叠加。 */
.particle{translate:var(--px,0) var(--py,0)}

/* ---------- 3. 主题切换：从点击处扩散的圆形揭示（View Transitions）----------
   View Transitions 支持：Chrome 111+ / Safari 18+ / Firefox 144+，不支持时自动普通切换。 */
html[data-vt="theme"]::view-transition-old(root){animation:none}
html[data-vt="theme"]::view-transition-new(root){
  animation:vtReveal .52s var(--ease) both;
  clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%));
}
@keyframes vtReveal{
  to{clip-path:circle(var(--vt-r,120vmax) at var(--vt-x,50%) var(--vt-y,50%))}
}

/* ---------- 4. 站内跳转的跨文档过渡 ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.34s;animation-timing-function:var(--ease)}

/* ==========================================================================
   视觉增强层 —— 底色氛围、深度、光感与更细的入错落
   --------------------------------------------------------------------------
   这一层不改任何既有令牌取值、不动组件结构，只叠「氛围」与「深度」。

   为什么这里要补底色：本文件顶部写着「真正的底色氛围来自 body 的渐变」，
   但 body 至今仍是纯色 var(--bg) —— 于是 .backdrop 那一层（因绘制顺序永远不出
   像素，见上文）之后，整站其实没有任何渐变氛围，页面读起来是平的。
   这里把 app 站 body 的那套多光源渐变搬过来，两站底色语言保持一致。

   继续遵守的硬约束：
   · 模糊只写 var(--fx-*) 令牌；本层不含任何 filter:blur，只用径向渐变；
   · 派生色一律 color-mix，且**前一行**保留同值字面量做旧浏览器回退；
   · 禁用紫色系（HSL 235–315°）；
   · 抠图素材（.stage-watch / .shot-frame / .gallery-item img）是透明 PNG/WebP，
     绝不可加边框、圆角或底色，本层完全不碰它们。
   ========================================================================== */

/* ---------- 0. 底色氛围（同 app 站） ------------------------------------ */
body{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--accent) 9%,transparent) 0%,
      transparent 42%,
      color-mix(in srgb,var(--teal) 7%,transparent) 100%
    ),
    radial-gradient(70% 52% at 12% 12%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 74%),
    radial-gradient(62% 48% at 88% 38%,color-mix(in srgb,var(--teal) 10%,transparent),transparent 76%),
    radial-gradient(56% 46% at 42% 92%,color-mix(in srgb,var(--amber) 8%,transparent),transparent 78%),
    var(--bg);
  background-attachment:fixed;
  background-size:130% 130%,130% 130%,120% 120%,115% 115%,100% 100%;
  background-position:0 0,0 0,100% 10%,24% 100%,center;
  animation:bodyAtmosphere 22s ease-in-out infinite alternate;
}
@keyframes bodyAtmosphere{
  from{background-position:0 0,0 0,100% 10%,24% 100%,center}
  to{background-position:0 0,18% 8%,82% 28%,46% 84%,center}
}
/* 弱机：只停这条改 background-position 的循环（每帧重画整块渐变），
   底色渐变本身保留 —— 与 app 站的处理完全一致。 */
html.fx-lite body{animation:none}

/* ---------- 1. 光感令牌 ------------------------------------------------- */
:root{
  /* 浅色下白色内高光在白底上不出像素，所以浅色靠多层投影表达厚度。
     深色下才是真正的高光（见下面的 [data-theme="dark"] 覆盖）。 */
  --hi:rgba(255,255,255,0);
  --hi-soft:rgba(255,255,255,0);
  --elev-1:
    0 1px 1px rgba(26,21,23,.045),
    0 2px 4px -2px rgba(26,21,23,.06),
    0 10px 22px -14px rgba(26,21,23,.20);
  --elev-2:
    0 1px 1px rgba(26,21,23,.05),
    0 5px 12px -5px rgba(26,21,23,.10),
    0 20px 44px -22px rgba(26,21,23,.30);
  --elev-2:
    0 1px 1px rgba(26,21,23,.05),
    0 5px 12px -5px rgba(26,21,23,.10),
    0 20px 44px -22px rgba(26,21,23,.30),
    0 34px 68px -46px color-mix(in srgb,var(--accent) 34%,transparent);
  --elev-3:
    0 2px 3px rgba(26,21,23,.06),
    0 10px 22px -8px rgba(26,21,23,.14),
    0 34px 64px -30px rgba(26,21,23,.38);
  --elev-3:
    0 2px 3px rgba(26,21,23,.06),
    0 10px 22px -8px rgba(26,21,23,.14),
    0 34px 64px -30px rgba(26,21,23,.38),
    0 44px 88px -52px color-mix(in srgb,var(--accent) 46%,transparent);
}
[data-theme="dark"]{
  /* 暗表面上的白高光超过 10% 就发灰变脏，克制一点 */
  --hi:rgba(255,255,255,.09);
  --hi-soft:rgba(255,255,255,.04);
  --elev-1:0 1px 2px rgba(0,0,0,.5),0 10px 24px -16px rgba(0,0,0,.75);
  --elev-2:0 2px 4px rgba(0,0,0,.45),0 22px 48px -24px rgba(0,0,0,.85);
  --elev-2:0 2px 4px rgba(0,0,0,.45),0 22px 48px -24px rgba(0,0,0,.85),0 38px 74px -50px color-mix(in srgb,var(--accent) 40%,transparent);
  --elev-3:0 3px 6px rgba(0,0,0,.5),0 34px 70px -32px rgba(0,0,0,.9);
  --elev-3:0 3px 6px rgba(0,0,0,.5),0 34px 70px -32px rgba(0,0,0,.9),0 50px 96px -56px color-mix(in srgb,var(--accent) 52%,transparent);
}

/* ---------- 2. 表面：顶部内高光 + 多层投影 ------------------------------
   刻意**不改 border-color**：各卡片本来就有自己的悬停描边变色
   （.product-card:hover / .bcard:hover / .device-group:hover …），
   改成透明 + 渐变描边会把那些规则盖掉，主色反馈反而丢了。
   所以只往 box-shadow 加一条 inset 顶部高光，描边完全交回原有规则。 */
.product-card,.bcard,.step,.device-group,.feature-item,.friend-card,
.faq-item,.disclaimer,.rel-item,.update-row,.purchase-section,.community-section,.plugin-screen{
  box-shadow:inset 0 1px 0 var(--hi-soft),var(--elev-1);
  transition:
    box-shadow .34s var(--ease),
    transform .34s var(--ease),
    border-color .34s ease;
}
.product-card:hover,.bcard:hover,.step:hover,.device-group:hover,.feature-item:hover,
.friend-card:hover,.faq-item:hover,.disclaimer:hover,.rel-item:hover,.update-row:hover,
.purchase-section:hover,.community-section:hover,.plugin-screen:hover{
  box-shadow:inset 0 1px 0 var(--hi),var(--elev-2);
}
/* 未用 data-tilt 的卡片由 CSS 抬起；带 data-tilt 的交给 site-effects.js，
   否则指针离开时会与内联 transform 打架、产生跳位。 */
.product-card:not([data-tilt]):hover,
.bcard:not([data-tilt]):hover,
.step:not([data-tilt]):hover,
.device-group:hover,
.feature-item:hover{
  transform:translateY(-4px);
}

/* 静止态本来就是 --shadow-2 的整块面板，不能跟着上面那组降到 --elev-1（≈--shadow-1），
   否则比改之前更浅。单独提到 --elev-2 / 悬停 --elev-3，只增不减。 */
.purchase-section,.plugin-screen{box-shadow:inset 0 1px 0 var(--hi-soft),var(--elev-2)}
.purchase-section:hover,.plugin-screen:hover{box-shadow:inset 0 1px 0 var(--hi),var(--elev-3)}

/* ---------- 3. 渐变标题与强调字 -----------------------------------------
   background-clip:text 不支持时文字会整段消失，所以整套锁在 @supports 里，
   不支持就保留 .hl 原有的纯色 --accent，零回退风险。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl,.sec-title em,.detail-heading h2 em,.purchase-section h2 em{
    background-image:linear-gradient(100deg,var(--accent),var(--accent-ink) 42%,var(--accent) 88%);
    background-image:linear-gradient(100deg,
      var(--accent),
      color-mix(in srgb,var(--accent) 52%,var(--amber)) 44%,
      var(--accent) 90%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:hlPan 14s ease-in-out infinite alternate;
  }
  @keyframes hlPan{
    from{background-position:0% 50%}
    to{background-position:100% 50%}
  }
}

/* kicker：前置一小段主色短杠，区块起点更清楚。
   刻意**不改 .kicker 的 display**（它是个 <p>，块级）——改成 inline-flex 会让
   行盒多出一截基线空隙，把下方标题整体推下去几像素。
   短杠用 inline-block 伪元素即可，和文字同处一个行盒，版式完全不动。 */
.kicker::before{
  content:"";display:inline-block;vertical-align:middle;
  width:18px;height:2px;border-radius:2px;
  margin-right:9px;margin-top:-2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

/* ---------- 4. 首屏极光 -------------------------------------------------
   .hero-inner 的两个伪元素都是空的（.hero-visual::before 已被占用，不动它）。
   两团缓慢漂移的极光，色相全部取自站点现有的 --accent / --teal，不引入新色。
   漂移只写 transform（合成层），不改 background-position。 */
.hero-inner::before,
.hero-inner::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  will-change:transform;
}
.hero-inner::before{
  left:-14%;top:-26%;width:min(660px,76vw);aspect-ratio:1;
  background:radial-gradient(closest-side,var(--spot),transparent 70%);
  animation:auroraA 19s ease-in-out infinite alternate;
}
.hero-inner::after{
  right:-16%;bottom:-34%;width:min(580px,70vw);aspect-ratio:1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teal) 13%,transparent),transparent 72%);
  animation:auroraB 23s ease-in-out infinite alternate;
}
@keyframes auroraA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7%,5%,0) scale(1.13)}
}
@keyframes auroraB{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(-6%,-7%,0) scale(.94)}
}
html.fx-lite .hero-inner::before,
html.fx-lite .hero-inner::after{animation:none}

/* ---------- 5. 错落入场 -------------------------------------------------
   按结构位置自动错峰。GSAP 只管 [data-anim] 与滚动视差，.reveal 始终归
   IntersectionObserver —— 两者不抢同一属性，不会出现抖动。 */
.js .product-grid > .reveal:nth-child(1){--d:0ms}
.js .product-grid > .reveal:nth-child(2){--d:90ms}
.js .product-grid > .reveal:nth-child(3){--d:180ms}

.js .bento > .reveal:nth-child(1){--d:0ms}
.js .bento > .reveal:nth-child(2){--d:60ms}
.js .bento > .reveal:nth-child(3){--d:120ms}
.js .bento > .reveal:nth-child(4){--d:180ms}
.js .bento > .reveal:nth-child(5){--d:240ms}
.js .bento > .reveal:nth-child(6){--d:300ms}
.js .bento > .reveal:nth-child(7){--d:360ms}
.js .bento > .reveal:nth-child(8){--d:420ms}

.js .showcase > .reveal:nth-child(1){--d:0ms}
.js .showcase > .reveal:nth-child(2){--d:90ms}
.js .showcase > .reveal:nth-child(3){--d:180ms}
.js .showcase > .reveal:nth-child(4){--d:270ms}

.js .steps > .reveal:nth-child(1){--d:0ms}
.js .steps > .reveal:nth-child(2){--d:100ms}
.js .steps > .reveal:nth-child(3){--d:200ms}

.js .device-groups > .reveal:nth-child(1){--d:0ms}
.js .device-groups > .reveal:nth-child(2){--d:100ms}

.js .feature-grid > .reveal:nth-child(1){--d:0ms}
.js .feature-grid > .reveal:nth-child(2){--d:70ms}
.js .feature-grid > .reveal:nth-child(3){--d:140ms}
.js .feature-grid > .reveal:nth-child(4){--d:210ms}

.js .gallery-grid > .reveal:nth-child(1){--d:0ms}
.js .gallery-grid > .reveal:nth-child(2){--d:80ms}
.js .gallery-grid > .reveal:nth-child(3){--d:160ms}
.js .gallery-grid > .reveal:nth-child(4){--d:240ms}

.js .update-list > .reveal:nth-child(1){--d:0ms}
.js .update-list > .reveal:nth-child(2){--d:70ms}
.js .update-list > .reveal:nth-child(3){--d:140ms}
.js .update-list > .reveal:nth-child(4){--d:210ms}
.js .update-list > .reveal:nth-child(5){--d:280ms}

.js .related-list > .reveal:nth-child(1){--d:0ms}
.js .related-list > .reveal:nth-child(2){--d:60ms}
.js .related-list > .reveal:nth-child(3){--d:120ms}
.js .related-list > .reveal:nth-child(4){--d:180ms}

.js .friend-grid > .reveal:nth-child(1){--d:0ms}
.js .friend-grid > .reveal:nth-child(2){--d:90ms}

/* ---------- 6. 图标与徽标：悬停辉光 ------------------------------------- */
.bcard-icon,.rel-badge,.step-icon,.friend-logo,.dg-icon,.product-icon{
  transition:transform .34s var(--spring),box-shadow .34s var(--ease);
}
.bcard:hover .bcard-icon,
.step:hover .step-icon,
.rel-item:hover .rel-badge{
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 60%,transparent);
}

/* ---------- 7. 滚动进度条的主色辉光 ------------------------------------- */
.progress i{
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--amber)));
  box-shadow:0 0 10px -2px color-mix(in srgb,var(--accent) 55%,transparent);
}

/* ---------- 8. 触屏与低动效：本层全部静态化 ----------------------------- */
@media (hover:none){
  .product-card:not([data-tilt]):hover,
  .bcard:not([data-tilt]):hover,
  .step:not([data-tilt]):hover,
  .device-group:hover,
  .feature-item:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .hl,.sec-title em,.detail-heading h2 em,.purchase-section h2 em{animation:none}
  .hero-inner::before,.hero-inner::after{animation:none}
}