/* ============================================================
   智星播 · v4 设计系统（产品页 + 下载页共用）
   IP 同源配色 · 亮色默认暗色可切 · 五套配色 · 23 套首屏动效可切
   令牌与智巧行官网 Demo 同一套（--p1/--p2/--p3 + 中性色相推导）
   零外部依赖：不引 CDN / 字体 / 图标库
   ============================================================ */

/* ---------- 1. 五套配色（来自吉祥物 + 你给的配色参考） ---------- */
:root, :root[data-palette="xinghai"]{     /* ① 星海 · IP 同源：头盔蓝 + 蒂芙尼青 + 金环 */
  --p1:#1F6BFF; --p2:#3ED0D8; --p3:#F5C24B; --hn:218; --sn:34%;
  --btn-a:#1F6BFF; --btn-b:#2FB7D9; --on-p:#ffffff;
}
:root[data-palette="kelan"]{              /* ② 克莱因蓝 · 蒂芙尼蓝 #002CB0 → #66D4C8 */
  --p1:#002CB0; --p2:#66D4C8; --p3:#F9D308; --hn:226; --sn:40%;
  --btn-a:#0A3BD6; --btn-b:#2A8FD0; --on-p:#ffffff;
}
:root[data-palette="diwang"]{             /* ③ 帝王紫 · 财富金 #6A0DAD → #F9D308 */
  --p1:#6A0DAD; --p2:#B24BFF; --p3:#F9D308; --hn:272; --sn:34%;
  --btn-a:#6A0DAD; --btn-b:#9A3BE8; --on-p:#ffffff;
}
:root[data-palette="yulin"]{              /* ④ 雨林青 · 冰川青 #00755D → #A7E3EB */
  --p1:#00755D; --p2:#3EC9B0; --p3:#A7E3EB; --hn:172; --sn:30%;
  --btn-a:#00755D; --btn-b:#1FA88C; --on-p:#ffffff;
}
:root[data-palette="luori"]{              /* ⑤ 落日橘 · 暖渐变 #FE8E28 → #FBE693（中性色走冷灰） */
  --p1:#F4741A; --p2:#FFB03B; --p3:#FBE693; --hn:224; --sn:14%;
  --btn-a:#F4741A; --btn-b:#FF9A2E; --on-p:#1F1200;
}

/* ---------- 2. 明暗两套中性色 + 动效强度（亮色默认） ---------- */
:root, :root[data-theme="light"]{
  --bg:      hsl(var(--hn) 42% 98.5%);
  --bg-2:    hsl(var(--hn) 36% 96.2%);
  --surface: #fff;
  --raise:   hsl(var(--hn) 40% 97%);
  --line:    hsl(var(--hn) 26% 89%);
  --line-2:  hsl(var(--hn) 24% 82%);
  --ink:     hsl(var(--hn) 45% 10%);
  --ink-2:   hsl(var(--hn) 20% 26%);
  --muted:   hsl(var(--hn) 12% 45%);
  --faint:   hsl(var(--hn) 10% 62%);
  --acc:     color-mix(in oklab,var(--p1) 86%,black);
  --blend:   multiply;
  --beam-o:  .72; --beam-blur:28px; --beam-blend:normal;
  --wall-o:  .56; --wall-blur:1.5px;
  --au-o:    .42; --au-blur:70px;
  --wv-o:    .34; --net-o:.92; --scr-o:.52; --dm-o:.5; --tk-o:.5; --te-o:.42; --fr-o:.6;
  --cam-o:   .44; --flip-o:.5; --dash-o:.82; --sd-o:.5; --sd-blur:34px; --mx-o:.5; --lv-o:.42;
  --sk-o:    .9; --sk-blur:1.6px; --film-o:.42; --orb-o:.26; --spot-o:.5; --grid-o:.8;
  --shadow:  0 26px 60px -32px hsl(var(--hn) 40% 30% / .34);
  --shadow-2:0 12px 30px -18px hsl(var(--hn) 40% 30% / .26);
  --glass:   hsl(var(--hn) 40% 100% / .74);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:      hsl(var(--hn) var(--sn) 5%);
  --bg-2:    hsl(var(--hn) var(--sn) 7.5%);
  --surface: hsl(var(--hn) var(--sn) 9.5%);
  --raise:   hsl(var(--hn) var(--sn) 13%);
  --line:    hsl(var(--hn) calc(var(--sn) * .8) 19%);
  --line-2:  hsl(var(--hn) calc(var(--sn) * .8) 26%);
  --ink:     hsl(var(--hn) 30% 97%);
  --ink-2:   hsl(var(--hn) 16% 80%);
  --muted:   hsl(var(--hn) 12% 60%);
  --faint:   hsl(var(--hn) 10% 42%);
  --acc:     color-mix(in oklab,var(--p2) 80%,white);
  --blend:   screen;
  --beam-o:  1; --beam-blur:2.5px; --beam-blend:screen;
  --wall-o:  .66; --wall-blur:1.1px;
  --au-o:    .5; --au-blur:62px;
  --wv-o:    .5; --net-o:.82; --film-o:.5; --scr-o:.46; --dm-o:.72; --tk-o:.46; --te-o:.6; --fr-o:.62;
  --cam-o:   .42; --flip-o:.46; --dash-o:.72; --sd-o:.4; --sd-blur:40px; --mx-o:.52; --lv-o:.4;
  --sk-o:    .7; --sk-blur:2.4px; --orb-o:.3; --spot-o:.55; --grid-o:.5;
  --shadow:  0 30px 70px -30px hsl(var(--hn) 60% 2% / .9);
  --shadow-2:0 14px 34px -18px hsl(var(--hn) 60% 2% / .8);
  --glass:   hsl(var(--hn) var(--sn) 9% / .72);
  color-scheme:dark;
}

/* ---------- 3. 尺度与字体 ---------- */
:root{
  --sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",-apple-system,"Segoe UI",system-ui,sans-serif;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STZhongsong","SimSun",Georgia,serif;
  --mono:"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --maxw:1200px;
  --pad:clamp(64px,7.2vw,112px);
  --r:18px;
  --ease:cubic-bezier(.22,.72,.2,1);
  --ease2:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,p,ul,ol,figure,table,details,summary{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--p1);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in oklab,var(--p1) 30%,transparent)}
.wrap{width:min(100% - 44px,var(--maxw));margin-inline:auto}
.sec{position:relative;z-index:2;padding-block:var(--pad)}
.sec+.sec{padding-top:0}

/* ---------- 4. 排版 ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:12.5px;font-weight:600;letter-spacing:.2em;color:var(--acc)}
.eyebrow .bead{width:6px;height:6px;border-radius:50%;background:var(--p1);box-shadow:0 0 0 4px color-mix(in oklab,var(--p1) 20%,transparent)}
.eyebrow .cn{font-weight:400;letter-spacing:.14em;color:var(--muted);padding-left:.7em;border-left:1px solid var(--line-2)}
.h2{font-size:clamp(1.85rem,3.2vw,2.8rem);line-height:1.24;font-weight:800;letter-spacing:.012em;margin-top:.75rem;text-wrap:balance}
.h2 .thin{font-weight:300;color:var(--ink-2);letter-spacing:.03em}
.h2 .grad{background-image:linear-gradient(96deg,var(--p1),var(--p2) 60%,var(--p3));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:38rem;margin-top:1.1rem;color:var(--muted);font-size:clamp(.96rem,1.05vw,1.05rem);line-height:1.9}
.tiny{font-size:.82rem;color:var(--faint);line-height:1.75}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line)}
.head .tiny{max-width:18rem;text-align:right}

/* ---------- 5. 按钮（胶囊 + 跟随光标高光） ---------- */
.btn{--bx:50%;--by:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.86em 1.6em;border-radius:999px;font-size:.94rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;background:none;cursor:pointer;
  transition:transform .35s var(--ease2),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn svg{width:16px;height:16px;flex:none}
.btn::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(120px circle at var(--bx) var(--by),hsl(0 0% 100% / .34),transparent 62%)}
.btn:hover::after{opacity:1}
.btn-solid{background:linear-gradient(118deg,var(--btn-b),var(--btn-a));color:var(--on-p);box-shadow:0 12px 30px -14px color-mix(in oklab,var(--p1) 80%,transparent)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px color-mix(in oklab,var(--p1) 90%,transparent)}
.btn-line{border:1px solid var(--line-2);color:var(--ink);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-line:hover{border-color:var(--p1);color:var(--acc);transform:translateY(-2px)}
.btn-lg{padding:1.02em 2em;font-size:1rem}
.btn-sm{padding:.6em 1.1em;font-size:.84rem}

/* ---------- 6. 全站环境光：光斑 + 光标柔光 + 网格底纹 ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--orb-o);mix-blend-mode:var(--blend);will-change:transform}
.orb-1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:var(--p2);animation:drift1 26s var(--ease) infinite alternate}
.orb-2{width:44vw;height:44vw;right:-12vw;top:6vh;background:var(--p1);animation:drift2 31s var(--ease) infinite alternate}
.orb-3{width:38vw;height:38vw;left:26vw;bottom:-18vw;background:var(--p3);opacity:calc(var(--orb-o) * .62);animation:drift3 37s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,12vh,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-11vw,16vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(13vw,-12vh,0) scale(1.2)}}
.gridbg{position:absolute;inset:0;opacity:calc(.4 * var(--grid-o));background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 8%,transparent 78%);mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 8%,transparent 78%)}
.noise{position:absolute;inset:0;opacity:.038;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .7s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),color-mix(in oklab,var(--p1) 16%,transparent),transparent 68%)}
body.has-cursor .spot{opacity:var(--spot-o)}

/* ---------- 7. 顶部导航 ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background .45s var(--ease),border-color .45s var(--ease)}
.nav.stuck,.nav.open{background:var(--glass);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.nav-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;opacity:0;transition:opacity .45s}
.nav.stuck .nav-prog{opacity:1}
.nav-prog i{display:block;height:100%;width:var(--prog,0%);background:linear-gradient(90deg,var(--p1),var(--p2) 55%,var(--p3));box-shadow:0 0 12px color-mix(in oklab,var(--p1) 80%,transparent)}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);height:74px}
.brand{display:flex;align-items:center;gap:10px;flex:none;text-align:left}
.brand img{width:40px;height:40px;border-radius:50%;filter:drop-shadow(0 4px 10px color-mix(in oklab,var(--p1) 40%,transparent))}
.brand b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:.18em;line-height:1.2}
.brand i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.by{display:flex;align-items:center;padding-left:14px;border-left:1px solid var(--line-2);height:28px}
.by img{height:20px;width:auto}
:root[data-theme="dark"] .by img,:root[data-theme="dark"] .foot-logo img{filter:brightness(1.25) saturate(.9)}
.menu{display:flex;gap:clamp(12px,1.9vw,28px);margin-left:auto;font-size:.92rem}
.menu a{position:relative;color:var(--ink-2);padding:.4em 0;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--p1),var(--p2));transition:right .4s var(--ease2)}
.menu a:hover,.menu a.on{color:var(--ink)}
.menu a:hover::after,.menu a.on::after{right:0}
.nav-act{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);background:none;transition:.3s var(--ease)}
.icon-btn:hover{border-color:var(--p1);color:var(--acc)}
.icon-btn svg{width:17px;height:17px}
:root[data-theme="dark"] .icon-btn .sun{display:none}
:root:not([data-theme="dark"]) .icon-btn .moon{display:none}
.burger{display:none;width:40px;height:40px;place-items:center;border-radius:12px;border:1px solid var(--line);background:none}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:.3s var(--ease)}
.burger span+span{margin-top:4px}
.nav.open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.drawer{display:none;flex-direction:column;gap:2px;padding:8px 0 20px;border-top:1px solid var(--line)}
.drawer a{padding:.85em 2px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.nav.open .drawer{display:flex}

/* ---------- 9. 首屏舞台 S01 ----------
   深色＝黑场斜射光束（闪剪那种舞台感）；浅色＝同一组光束被大幅模糊成柔光色团 */
.stage{
  position:relative;z-index:2;overflow:hidden;text-align:center;
  min-height:100svh;display:grid;align-content:center;background:var(--bg);
  padding-block:clamp(118px,15vh,170px) clamp(168px,21vh,232px);
}
.stage-in{position:relative;z-index:3;width:min(100% - 44px,1080px);margin-inline:auto}
/* 六套首屏动效共用这个容器，切换时整块换掉 */
.fxstage{
  position:absolute;inset:-12% -8% -20%;z-index:1;pointer-events:none;overflow:hidden;
  transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -11px),0);
  transition:transform 1s var(--ease2);
}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-veil{      /* 只在标题这一块压底：四周的动效照样看得清，字仍然是唯一锚点 */
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--veil,0);
  background:radial-gradient(44% 38% at 50% 47%,var(--bg) 34%,
    color-mix(in oklab,var(--bg) 74%,transparent) 62%,transparent 84%);
}
.stage::before{   /* 顶部压一层，保证导航永远读得清 */
  content:"";position:absolute;left:0;right:0;top:0;height:132px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 8%,color-mix(in oklab,var(--bg) 45%,transparent) 55%,transparent);
}

/* ① 光束舞台 */
.fx-beams i{
  position:absolute;bottom:-4vh;left:var(--x);width:var(--w);height:var(--h);
  border-radius:99px;transform-origin:50% 100%;transform:rotate(var(--r));
  background:linear-gradient(to top,transparent 4%,var(--c) 26%,
    color-mix(in oklab,var(--c) 62%,#fff) 46%,var(--c) 62%,transparent 93%);
  filter:blur(var(--beam-blur)) saturate(1.25);
  opacity:calc(var(--o) * var(--beam-o));mix-blend-mode:var(--beam-blend);
  animation:sway var(--t) var(--ease) var(--d) infinite alternate;
}
@keyframes sway{to{transform:rotate(calc(var(--r) * .48)) scaleY(1.15)}}

/* ② 视频墙：竖版成片一列一列反向流动 */
.fx-wall{
  position:absolute;inset:-26% -16%;display:flex;justify-content:center;
  gap:clamp(12px,1.4vw,22px);transform:rotate(-10deg) scale(1.22);
  filter:blur(var(--wall-blur)) saturate(.9);opacity:var(--wall-o);
}
.fx-wall .wcol{
  display:grid;gap:clamp(12px,1.4vw,22px);flex:0 0 clamp(62px,6.2vw,100px);
  height:max-content;animation:wup var(--t) linear infinite;will-change:transform;
}
.fx-wall .wcol.dn{animation-name:wdn}
@keyframes wup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wdn{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.fx-wall i{
  position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--wg);border:1px solid hsl(0 0% 100% / .14);
}
.fx-wall i canvas{display:block;width:100%;height:100%}
/* 隐藏的媒体源：布局按原尺寸走（GIF 才会持续播放），外面用 2px 盒子裁掉 */
.fx-pool{position:absolute;top:0;left:0;width:2px;height:2px;overflow:hidden;opacity:.02;pointer-events:none}
.fx-pool>*{display:block;width:116px;height:206px;object-fit:cover}

.fx-beams,.fx-aurora{position:absolute;inset:0}
.fx-wall i canvas,.fx-film i canvas,.fx-screens i canvas,.fx-multicam i canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-wall.has-media{filter:blur(var(--wall-blur)) saturate(.95)}
.fx-wall.has-media i::before,.fx-wall.has-media i::after{display:none}
.fx-film.has-media i{opacity:calc(var(--film-o) + .3)}
.fx-screens.has-media{filter:blur(calc(var(--wall-blur) * .8))}
.fx-screens.has-media i{opacity:var(--scr-o);animation:none;background:var(--bg-2)}
.fx-multicam.has-media{filter:blur(calc(var(--wall-blur) * .6))}
.fx-wall{--wgap:clamp(12px,1.4vw,22px)}
.fx-wall,.fx-wall .wcol{gap:var(--wgap)}
.fx-wall .wcol{padding-bottom:var(--wgap)}

/* ④ 流体极光 */
.fx-aurora i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--c),transparent 66%);
  filter:blur(var(--au-blur));opacity:var(--au-o);mix-blend-mode:var(--beam-blend);
  animation:au var(--t) var(--ease) var(--d) infinite alternate;will-change:transform;
}
@keyframes au{to{transform:translate3d(var(--dx),var(--dy),0) scale(var(--k))}}

/* ⑫ 导播台 */
.fx-screens{
  position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(9px,1.1vw,18px);transform:rotate(-2deg) scale(1.05);
}
.fx-screens i{
  position:relative;border-radius:10px;background:var(--g);
  border:1px solid hsl(0 0% 100% / .14);opacity:.2;
  animation:scrpulse 7s var(--ease) var(--d) infinite;
}
@keyframes scrpulse{
  0%,72%,100%{opacity:calc(var(--scr-o) * .3);filter:saturate(.55)}
  16%,40%{opacity:var(--scr-o);filter:saturate(1.25)}}

/* ⑰ 多机位监看 */
.fx-multicam{
  position:absolute;inset:4% 3%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(12px,1.6vw,26px);
}
.fx-multicam i{
  position:relative;border-radius:10px;overflow:hidden;background:var(--g);
  border:1px solid hsl(0 0% 100% / .16);opacity:var(--cam-o);
}
.fx-multicam i u{
  position:absolute;left:9px;top:8px;z-index:2;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:hsl(0 0% 100% / .82)}
.fx-multicam i b{
  position:absolute;right:9px;top:10px;z-index:2;width:6px;height:6px;border-radius:50%;
  background:#ff4040;box-shadow:0 0 8px #ff4040;animation:beat 1.6s var(--d) infinite}
.fx-multicam i::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(180deg,hsl(0 0% 100% / .05) 0 1px,transparent 1px 3px)}

/* ㉑ 账号矩阵 */
/* 自定义背景：铺满 + 轻虚化，亮暗各一档 */
.fx-custom{position:absolute;inset:0;opacity:var(--wall-o);filter:blur(var(--wall-blur)) saturate(.95)}
.fx-custom video,.fx-custom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fx-matrix{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  align-content:center;gap:clamp(9px,1.2vw,20px);padding:0 4%;
}
.fx-matrix i{
  position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--g);
  border:1px solid hsl(0 0% 100% / .14);opacity:var(--mx-o);
  animation:mxpulse 7s var(--ease) var(--d) infinite;
}
@keyframes mxpulse{0%,74%,100%{opacity:calc(var(--mx-o) * .5)}18%,44%{opacity:var(--mx-o)}}
.fx-matrix i u{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.45em .4em;text-decoration:none;
  font-size:9px;letter-spacing:.04em;text-align:center;color:hsl(0 0% 100% / .9);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;background:linear-gradient(transparent,hsl(0 0% 0% / .62));
}
.fx-matrix.has-media{filter:blur(calc(var(--wall-blur) * .8))}
.fx-matrix.has-media i{animation:none;opacity:var(--mx-o)}

/* ㉒ 百叶光栅 */
.fx-louver{position:absolute;inset:-3% 0;display:flex;gap:clamp(4px,.6vw,11px);perspective:1200px}
.fx-louver i{
  flex:1;border-radius:4px;transform-origin:50% 50%;opacity:var(--lv-o);
  background:linear-gradient(180deg,color-mix(in oklab,var(--c) 82%,transparent),
    color-mix(in oklab,var(--c) 10%,transparent));
  animation:louver var(--t) var(--ease) var(--d) infinite alternate;
}
@keyframes louver{to{transform:rotateY(74deg);opacity:calc(var(--lv-o) * .35)}}

/* ㉓ 光条雨 */
.fx-streak{position:absolute;inset:-30% 0 -20%;overflow:hidden}
.fx-streak i{
  position:absolute;left:var(--x);top:0;width:var(--w);height:var(--h);border-radius:99px;
  background:linear-gradient(to bottom,transparent,var(--c) 45%,transparent);
  filter:blur(var(--sk-blur));opacity:var(--sk-o);
  animation:fallstreak var(--t) linear var(--d) infinite;
}
@keyframes fallstreak{from{transform:translateY(-60%)}to{transform:translateY(150vh)}}

/* ⑱ 翻牌墙 */
.fx-flip{
  position:absolute;inset:-4%;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(5px,.7vw,11px);perspective:900px;
}
.fx-flip i{
  border-radius:4px;background:color-mix(in oklab,var(--c) 62%,transparent);
  opacity:var(--flip-o);transform-origin:50% 0;
  animation:flipcard 4.6s var(--ease) var(--d) infinite;
}
@keyframes flipcard{
  0%,52%,100%{transform:rotateX(0deg);opacity:calc(var(--flip-o) * .3)}
  16%{transform:rotateX(-88deg);opacity:calc(var(--flip-o) * .1)}
  30%{transform:rotateX(0deg);opacity:var(--flip-o)}}

/* ⑲ 数据大屏 */
@property --ring{syntax:"<percentage>";initial-value:50%;inherits:false}
.fx-dash{position:absolute;inset:0}
.fx-dash i{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:16/11;
  border-radius:12px;padding:11px 12px;display:grid;gap:8px;align-content:start;
  border:1px solid color-mix(in oklab,var(--p1) 30%,var(--line-2));
  background:linear-gradient(160deg,color-mix(in oklab,var(--p1) 12%,var(--bg-2)),var(--bg-2));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:var(--dash-o);
  animation:dashfloat var(--t) var(--ease) var(--d) infinite alternate;
}
@keyframes dashfloat{to{transform:translate3d(1.4vw,-2vh,0)}}
.fx-dash u{display:block;height:4px;width:46%;border-radius:3px;background:var(--line-2)}
.fx-dash .dbars{display:flex;align-items:flex-end;gap:4px;height:54%}
.fx-dash .dbars em{flex:1;border-radius:3px 3px 1px 1px;height:var(--h);
  background:linear-gradient(to top,var(--p2),var(--p1));
  animation:vbar 1.5s var(--ease) var(--d) infinite alternate}
.fx-dash .dline{display:block;height:54%}
.fx-dash .dline svg{width:100%;height:100%;overflow:visible}
.fx-dash .dline polyline{fill:none;stroke:var(--p1);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-dasharray:180;stroke-dashoffset:180;
  animation:draw 3.4s var(--ease2) infinite}
@keyframes draw{0%{stroke-dashoffset:180}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-180}}
.fx-dash .dring{
  display:block;height:54%;aspect-ratio:1;margin-inline:auto;border-radius:50%;
  background:conic-gradient(from -90deg,var(--p1) 0 var(--ring),
    color-mix(in oklab,var(--line-2) 70%,transparent) var(--ring) 100%);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%);
          mask:radial-gradient(circle,transparent 54%,#000 56%);
  animation:ringgrow 4s var(--ease) infinite alternate}
@keyframes ringgrow{from{--ring:22%}to{--ring:82%}}

/* ⑳ 影棚聚光 */
.fx-studio{position:absolute;inset:0;overflow:hidden}
.fx-studio .cone{
  position:absolute;top:-16%;left:50%;width:var(--w,26%);height:104%;
  transform-origin:50% 0;filter:blur(var(--sd-blur));opacity:var(--sd-o);
  background:linear-gradient(to bottom,color-mix(in oklab,var(--c) 85%,transparent),transparent 78%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  animation:swaycone var(--t) var(--ease) infinite alternate;
}
.fx-studio .c1{--c:var(--p1);--w:30%;--t:13s;margin-left:-32%;rotate:-13deg}
.fx-studio .c2{--c:#ffffff;--w:22%;--t:17s;margin-left:-11%;rotate:2deg}
.fx-studio .c3{--c:var(--p3);--w:26%;--t:15s;margin-left:12%;rotate:14deg}
@keyframes swaycone{to{rotate:0deg;opacity:calc(var(--sd-o) * .58)}}
.fx-studio .pool{
  position:absolute;left:50%;bottom:6%;width:64%;height:26%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in oklab,var(--p1) 46%,transparent),transparent 68%);
  filter:blur(26px);opacity:calc(var(--sd-o) * .9)}
.fx-studio .dust{position:absolute;inset:0}
.fx-studio .dust em{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:color-mix(in oklab,var(--p1) 65%,#fff);
  animation:driftdust var(--t) linear var(--d) infinite}
@keyframes driftdust{
  0%{transform:translate(0,0);opacity:0}
  22%{opacity:.62}
  78%{opacity:.5}
  100%{transform:translate(3vw,-17vh);opacity:0}}

/* ⑬ 弹幕流 */
.fx-danmu{position:absolute;inset:0;display:grid;align-content:space-around;padding:5% 0;overflow:hidden}
.fx-danmu .drow{display:flex;gap:clamp(26px,3.6vw,60px);width:max-content;white-space:nowrap;
  animation:dmove var(--t) linear infinite}
.fx-danmu .drow.rev{animation-name:dmover}
@keyframes dmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dmover{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.fx-danmu span{
  display:inline-flex;align-items:center;gap:.55em;padding:.42em 1.05em;border-radius:99px;
  font-size:clamp(.8rem,1.05vw,.98rem);letter-spacing:.06em;color:var(--ink-2);opacity:var(--dm-o);
  border:1px solid var(--line-2);background:color-mix(in oklab,var(--bg-2) 66%,transparent);
}
.fx-danmu span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--p1)}

/* ⑭ 剪辑轨道 */
.fx-track{position:absolute;inset:0;display:grid;align-content:center;gap:clamp(9px,1.3vw,18px);overflow:hidden}
.fx-track .trow{display:flex;gap:6px;width:max-content;opacity:var(--o);
  animation:dmove var(--t) linear infinite}
.fx-track .trow i{flex:none;width:var(--w);height:clamp(20px,2.8vw,40px);border-radius:6px;
  background:linear-gradient(160deg,var(--c),color-mix(in oklab,var(--c) 35%,transparent));
  opacity:var(--tk-o)}
.fx-track .playhead{position:absolute;left:38%;top:0;bottom:0;width:1.5px;
  background:linear-gradient(to bottom,transparent,var(--p1),transparent);
  box-shadow:0 0 14px color-mix(in oklab,var(--p1) 90%,transparent)}

/* ⑮ 提词流 */
.fx-tele{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.fx-tele .trun{display:grid;gap:clamp(14px,2.2vw,30px);text-align:center;
  animation:teleup var(--t) linear infinite}
@keyframes teleup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.fx-tele p{font-size:clamp(.95rem,1.7vw,1.5rem);letter-spacing:.04em;color:var(--muted);
  opacity:var(--te-o);white-space:nowrap}
.fx-tele p:nth-child(3n){color:var(--p1);opacity:calc(var(--te-o) + .22)}

/* ⑯ 取景框 */
.fx-frames{position:absolute;inset:0}
.fx-frames i{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:9/16;border-radius:12px;
  border:1px solid color-mix(in oklab,var(--c) 42%,transparent);opacity:var(--fr-o);
  animation:frdrift var(--t) var(--ease) var(--d) infinite alternate;
}
.fx-frames i::before,.fx-frames i::after{content:"";position:absolute;width:30%;height:17%}
.fx-frames i::before{left:-1px;top:-1px;border-left:2px solid var(--c);border-top:2px solid var(--c);border-radius:12px 0 0 0}
.fx-frames i::after{right:-1px;bottom:-1px;border-right:2px solid var(--c);border-bottom:2px solid var(--c);border-radius:0 0 12px 0}
@keyframes frdrift{to{transform:translate(2.5vw,-3vh) scale(1.12)}}

/* ⑪ 胶片流 */
.fx-film{position:absolute;inset:-20% -30%;transform:rotate(-8deg)}
.fx-film .fstrip{position:absolute;left:0;right:0;height:23%;overflow:hidden}
.fx-film .frun{display:flex;height:100%;width:max-content;gap:10px;
  animation:filmrun var(--t) linear infinite}
.fx-film .fstrip.rev .frun{animation-name:filmrunr}
@keyframes filmrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes filmrunr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.fx-film i{
  position:relative;display:block;height:100%;aspect-ratio:9/16;width:auto;flex:none;border-radius:8px;
  background:linear-gradient(165deg,color-mix(in oklab,var(--c) 72%,transparent),
    color-mix(in oklab,var(--c) 16%,transparent));
  border:1px solid color-mix(in oklab,var(--c) 45%,transparent);
  opacity:var(--film-o);
}
.fx-film i::before,.fx-film i::after{
  content:"";position:absolute;left:6px;right:6px;height:5px;border-radius:2px;
  background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--c) 55%,transparent) 0 5px,transparent 5px 12px);
}
.fx-film i::before{top:5px}
.fx-film i::after{bottom:5px}

/* ⑥ 声纹墙 */
.fx-wave{
  position:absolute;left:0;right:0;bottom:19%;height:42%;
  display:flex;align-items:flex-end;gap:clamp(2px,.42vw,6px);padding-inline:1.5%;
}
.fx-wave i{
  flex:1;border-radius:7px 7px 3px 3px;height:var(--h);opacity:var(--wv-o);
  background:linear-gradient(to top,color-mix(in oklab,var(--p2) 92%,transparent),
    color-mix(in oklab,var(--p1) 72%,transparent) 58%,transparent);
  animation:wvbeat var(--t) var(--ease) var(--d) infinite alternate;will-change:height;
}
@keyframes wvbeat{to{height:var(--h2)}}
.stage-floor{
  position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 86% at 50% 100%,color-mix(in oklab,var(--p1) 14%,transparent),transparent 60%),
    linear-gradient(to top,var(--bg) 6%,color-mix(in oklab,var(--bg) 46%,transparent) 40%,transparent);
}

/* ============================================================
   v4 组件：首屏 / 平台墙 / 对比 / 时钟 / 直播间演示 / 便当格 / 三步 /
   套餐 / 问答 / 贴牌 / 页脚 / 悬浮件 / 面板 / 下载页 / 响应式
   （写在 动效.css 之后，覆盖 .stage 的居中布局）
   ============================================================ */
@property --zx-ang{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- 首屏：左文案 + 右吉祥物，动效满铺背景 ---------- */
.stage{text-align:left;padding-block:clamp(118px,14vh,160px) clamp(150px,17vh,200px)}
.stage-in{width:min(100% - 44px,var(--maxw));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.stage-veil{background:radial-gradient(46% 56% at 28% 50%,var(--bg) 30%,color-mix(in oklab,var(--bg) 72%,transparent) 60%,transparent 84%)}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;pointer-events:none;background:linear-gradient(to top,var(--bg) 10%,transparent)}
.pill{display:inline-flex;align-items:center;gap:.6em;padding:.42em 1.05em .42em .8em;border-radius:99px;font-size:12.5px;letter-spacing:.12em;color:var(--ink-2);border:1px solid var(--line-2);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pill .bead{width:7px;height:7px;border-radius:50%;background:#FF3B3B;box-shadow:0 0 0 4px rgba(255,59,59,.18);animation:beat 1.6s infinite}
.pill em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--acc)}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}
.stage h1{margin-top:1.4rem;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.12;font-weight:900;letter-spacing:.01em}
.stage h1 .l1,.stage h1 .l2{white-space:nowrap}
.stage h1 .l1{display:block;color:var(--ink)}
.stage h1 .l2{display:block;background-image:linear-gradient(96deg,var(--p1),var(--p2) 55%,var(--p3));-webkit-background-clip:text;background-clip:text;color:transparent}
.stage h1 .ch{display:inline-block;opacity:0;transform:translateY(.4em);animation:chin .7s var(--ease2) var(--cd,0s) forwards}
.stage h1 .l2 .ch{background-image:inherit;background-size:var(--bgw,100%) 100%;background-position:var(--bgx,0) 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes chin{to{opacity:1;transform:none}}
:root.still .stage h1 .ch,html:not(.js) .stage h1 .ch{opacity:1;transform:none;animation:none}
.stage .lead{max-width:34rem;font-size:clamp(1rem,1.15vw,1.1rem)}
.stage .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.9rem}
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
.facts li{display:flex;flex-direction:column;gap:2px;padding-inline:clamp(14px,2vw,26px)}
.facts li:first-child{padding-left:0}
.facts li+li{border-left:1px solid var(--line)}
.facts b{font-size:clamp(1.5rem,2.3vw,2rem);font-weight:800;line-height:1.05;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.facts b small{font-size:.5em;font-weight:500;color:var(--muted);margin-left:.15em}
.facts span{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* 吉祥物舞台 */
.mascot{position:relative;display:grid;place-items:center;min-height:380px}
.mascot .halo{position:absolute;width:min(78%,420px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from var(--zx-ang),var(--p1),var(--p2),var(--p3),var(--p1));filter:blur(28px);opacity:.55;animation:spinang 9s linear infinite}
:root[data-theme="dark"] .mascot .halo{opacity:.7}
.mascot .ring{position:absolute;width:min(88%,470px);aspect-ratio:1;border-radius:50%;border:1px dashed color-mix(in oklab,var(--p1) 45%,transparent);animation:spin 40s linear infinite}
.mascot .ring i{position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--p2);box-shadow:0 0 12px var(--p2);translate:-50% 0}
.mascot .ring i:nth-child(2){top:auto;bottom:-5px;background:var(--p3);box-shadow:0 0 12px var(--p3)}
.mascot .ring i:nth-child(3){top:50%;left:-5px;translate:0 -50%;background:var(--p1);box-shadow:0 0 12px var(--p1)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinang{to{--zx-ang:360deg}}
.mascot img{position:relative;z-index:2;width:min(72%,400px);height:auto;filter:drop-shadow(0 30px 50px color-mix(in oklab,var(--p1) 40%,transparent));animation:floaty 6s var(--ease) infinite alternate;transform:translate3d(calc(var(--px,0) * 14px),calc(var(--py,0) * 10px),0)}
@keyframes floaty{from{translate:0 -8px}to{translate:0 10px}}
.mascot .tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--glass);border:1px solid var(--line-2);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap}
.mascot .tag b{width:7px;height:7px;border-radius:50%;background:var(--p1);box-shadow:0 0 0 3px color-mix(in oklab,var(--p1) 20%,transparent)}
.mascot .tag.t1{left:2%;top:16%;animation:floaty 7s var(--ease) infinite alternate}
.mascot .tag.t2{right:0;top:42%;animation:floaty 6s var(--ease) 1s infinite alternate}
.mascot .tag.t3{left:8%;bottom:12%;animation:floaty 6.5s var(--ease) .5s infinite alternate}
.mascot .tag.t2 b{background:#FF3B3B;box-shadow:0 0 0 3px rgba(255,59,59,.2);animation:beat 1.6s infinite}
.cue{position:absolute;left:50%;bottom:clamp(96px,11vh,120px);translate:-50% 0;z-index:3;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--faint)}
.cue .mouse{width:18px;height:28px;border-radius:10px;border:1px solid var(--line-2);position:relative}
.cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;border-radius:2px;background:var(--p1);translate:-50% 0;animation:mouse 1.8s var(--ease) infinite}
@keyframes mouse{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
/* 平台墙 */
.ticker{position:absolute;left:0;right:0;bottom:clamp(26px,4vh,44px);z-index:3;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ticker-in{display:flex;width:max-content;animation:slide 40s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:1.9rem;padding-right:1.9rem;font-size:clamp(.8rem,.95vw,.92rem);font-weight:500;letter-spacing:.09em;color:var(--muted);white-space:nowrap}
.ticker span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--p1);opacity:.5}
.ticker span.warn{color:var(--faint)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 卡片通用：玻璃 + 3D 倾斜 + 边框跑光 ---------- */
.card{position:relative;border-radius:calc(var(--r) + 2px);border:1px solid var(--line);background:var(--surface);transition:transform .5s var(--ease2),border-color .5s var(--ease),box-shadow .5s var(--ease);transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--zx-ang),transparent 0deg,color-mix(in oklab,var(--p1) 95%,transparent) 46deg,transparent 176deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;animation:spinang 3.4s linear infinite;animation-play-state:paused;transition:opacity .4s}
.card:hover{border-color:color-mix(in oklab,var(--p1) 40%,var(--line));box-shadow:var(--shadow)}
.card:hover::after{opacity:1;animation-play-state:running}

/* ---------- 一场直播，两种做法 ---------- */
.versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:stretch;margin-top:clamp(34px,4vw,54px)}
.vs-col{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,34px)}
.vs-col.is-old{background:color-mix(in oklab,var(--bg-2) 88%,transparent)}
.vs-col.is-new{border-color:color-mix(in oklab,var(--p1) 40%,var(--line));box-shadow:var(--shadow)}
.vs-col.is-new::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--p1),transparent)}
.vs-tag{font-size:12px;letter-spacing:.2em;color:var(--faint);font-weight:600}
.vs-col.is-new .vs-tag{color:var(--acc)}
.vs-col h3{margin-top:.5rem;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:800}
.vs-rows{margin-top:1.3rem;flex:1}
.vs-row{display:grid;grid-template-columns:5rem 1fr;gap:12px;padding:.85rem 0;border-top:1px solid var(--line);font-size:.93rem;line-height:1.7}
.vs-row em{font-style:normal;font-weight:700;color:var(--ink-2);font-size:.86rem;letter-spacing:.06em;padding-top:.1em}
.vs-row span{color:var(--muted)}
.vs-col.is-new .vs-row span{color:var(--ink-2)}
.vs-sum{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line-2);font-size:.9rem;color:var(--muted);line-height:1.7}
.vs-col.is-new .vs-sum{color:var(--ink);font-weight:600}
.vs-mid{display:grid;place-items:center;align-self:center}
.vs-mid i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.1em;border:1px solid var(--line-2);background:var(--glass);color:var(--faint)}

/* ---------- 24 小时时钟（拖动看谁在播） ---------- */
.clock{margin-top:clamp(30px,3.6vw,46px);padding:clamp(22px,2.6vw,34px);border-radius:calc(var(--r) + 4px);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2)}
.clock-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.clock-top .now{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;background-image:linear-gradient(96deg,var(--p1),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.clock-top .now small{font-size:.4em;font-weight:500;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:.4em}
.clock-top .hint{font-size:.86rem;color:var(--muted)}
.clock input[type=range]{width:100%;margin:18px 0 6px;accent-color:var(--p1);height:34px;cursor:grab}
.clock input[type=range]:active{cursor:grabbing}
.clock .hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.clock .hours i{height:8px;border-radius:3px;background:var(--line)}
.clock .hours i.on{background:linear-gradient(90deg,var(--p2),var(--p1))}
.clock .hours i.cur{outline:2px solid var(--p3);outline-offset:1px}
.clock .lab{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint)}
.clock-rows{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.clock-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);transition:.4s var(--ease)}
.clock-row .st{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;border:1px solid var(--line-2);color:var(--faint);background:var(--surface);transition:.4s}
.clock-row.on .st{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--btn-b),var(--btn-a));box-shadow:0 0 0 6px color-mix(in oklab,var(--p1) 18%,transparent);animation:beat 2s infinite}
.clock-row.on{border-color:color-mix(in oklab,var(--p1) 40%,var(--line));background:color-mix(in oklab,var(--p1) 6%,var(--surface))}
.clock-row b{display:block;font-size:1rem}
.clock-row p{margin-top:.15rem;font-size:.86rem;color:var(--muted);line-height:1.6}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(16px,2vw,22px)}
.cmp .card{padding:20px 22px}
.cmp b{display:block;font-size:1.02rem;font-weight:800}
.cmp p{margin-top:.5rem;font-size:.88rem;color:var(--muted);line-height:1.7}
.cmp p u{text-decoration:line-through;text-decoration-color:var(--p1);color:var(--faint)}
.cmp p strong{display:block;color:var(--acc)}

/* ---------- 直播间演示（可以真的发弹幕） ---------- */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(30px,3.6vw,46px)}
.demo-txt h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;line-height:1.35}
.demo-txt p{margin-top:.8rem;color:var(--muted);font-size:.96rem;line-height:1.85;max-width:30rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.chips button{padding:.6em 1.1em;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:.9rem;color:var(--ink-2);transition:.3s var(--ease);cursor:pointer}
.chips button:hover{border-color:var(--p1);color:var(--acc);transform:translateY(-2px)}
.ask{display:flex;gap:8px;margin-top:14px;max-width:30rem}
.ask input{flex:1;min-width:0;padding:.8em 1.1em;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem}
.ask input:focus{outline:2px solid var(--p1);outline-offset:0;border-color:transparent}
.demo-stat{margin-top:1.3rem;display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.demo-stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.demo-stat b.grad{background-image:linear-gradient(96deg,var(--p1),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.phonebox{display:grid;place-items:center;position:relative}
.phonebox::before{content:"";position:absolute;left:50%;top:50%;width:min(110%,520px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in oklab,var(--p1) 22%,transparent),color-mix(in oklab,var(--p2) 10%,transparent) 48%,transparent 70%);filter:blur(24px)}
.phone{position:relative;width:min(100%,318px);aspect-ratio:9/18.4;border-radius:38px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.phone::before{content:"";position:absolute;left:50%;top:10px;width:92px;height:22px;translate:-50% 0;border-radius:12px;background:var(--ink);opacity:.9;z-index:5}
:root[data-theme="dark"] .phone::before{background:#000}
.ph-top{display:flex;align-items:center;gap:8px;padding:42px 14px 10px;font-size:11.5px;font-weight:600;color:var(--ink-2);position:relative;z-index:3}
.ph-top img{width:24px;height:24px;border-radius:50%}
.ph-top em{font-style:normal;display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#FF3B3B}
.ph-top em::before{content:"";width:5px;height:5px;border-radius:50%;background:#FF3B3B;animation:beat 1.6s infinite}
.ph-stage{position:relative;margin:0 10px;border-radius:20px;overflow:hidden;background:linear-gradient(165deg,color-mix(in oklab,var(--p2) 28%,var(--surface)),color-mix(in oklab,var(--p1) 22%,var(--surface)) 55%,color-mix(in oklab,var(--p3) 26%,var(--surface)))}
.mimg{display:block;background:var(--mascot) center/contain no-repeat}
.ph-stage .mimg{position:absolute;left:50%;bottom:-4%;width:70%;aspect-ratio:1;translate:-50% 0;filter:drop-shadow(0 10px 20px rgba(0,0,0,.2))}
.ph-wave{position:absolute;left:12px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:16px}
.ph-wave i{width:3px;border-radius:2px;background:#fff;opacity:.85;height:30%;animation:wv 1.1s var(--ease) var(--wd,0s) infinite alternate}
@keyframes wv{to{height:100%}}
.ph-tags{position:absolute;left:12px;top:12px;display:grid;gap:6px}
.ph-tags i{font-style:normal;font-size:10px;padding:.28em .6em;border-radius:6px;background:hsl(0 0% 100% / .88);color:#111;font-weight:600;opacity:0;transform:translateX(-8px);animation:tag 9s var(--ease) var(--d) infinite}
@keyframes tag{0%,4%{opacity:0;transform:translateX(-8px)}10%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateX(-8px)}}
.ph-card{position:absolute;right:10px;bottom:10px;width:58%;display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:center;padding:7px;border-radius:10px;background:hsl(0 0% 100% / .95);color:#111;opacity:0;transform:translateY(8px);transition:.45s var(--ease2)}
.ph-card.show{opacity:1;transform:none}
.ph-card i{display:block;width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--p3),var(--p2))}
.ph-card b{display:block;font-size:10.5px;line-height:1.3}
.ph-card em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--p1);font-weight:700}
.ph-chat{padding:10px 12px 8px;display:grid;gap:6px;align-content:end;min-height:170px;overflow:hidden}
.ph-chat i{font-style:normal;justify-self:start;max-width:86%;padding:.34em .75em;border-radius:12px 12px 12px 4px;font-size:11px;line-height:1.45;background:var(--raise);border:1px solid var(--line);color:var(--ink-2);animation:bub .4s var(--ease2)}
.ph-chat i.sys{background:none;border:0;color:var(--faint);font-size:10.5px;padding-left:0}
.ph-chat i.ai{justify-self:end;border-radius:12px 12px 4px 12px;background:linear-gradient(118deg,var(--btn-b),var(--btn-a));border-color:transparent;color:var(--on-p)}
.ph-chat i.ai::before{content:"AI · " attr(data-t) " 秒";display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;opacity:.8;margin-bottom:2px}
.ph-chat i.typing{color:var(--faint);letter-spacing:.2em}
@keyframes bub{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph-input{margin:0 10px 12px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:8px}
.ph-input i{margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--p1);opacity:.7}

/* ---------- 能力便当格（每张卡自己演示） ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,4vw,54px)}
.cap{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column}
.cap .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cap .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--acc);background:color-mix(in oklab,var(--p1) 12%,transparent);border:1px solid color-mix(in oklab,var(--p1) 30%,transparent);transform:translateZ(24px)}
.cap .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap h3{margin-top:1rem;font-size:1.1rem;font-weight:800}
.cap h3 small{font-size:.74rem;font-weight:400;color:var(--faint);margin-left:.6em;letter-spacing:.06em}
.cap ul{margin-top:.7rem;display:grid;gap:.35rem}
.cap li{position:relative;padding-left:1.05em;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.cap li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--p1)}
.mini{width:76px;height:42px;position:relative;overflow:hidden;border-radius:9px;opacity:.5;transition:opacity .4s}
.card:hover .mini{opacity:1}
.mini-clone{display:grid;place-items:center}
.mini-clone i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--p2),var(--p1));position:relative}
.mini-clone i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed var(--p1);animation:spin 5s linear infinite}
.mini-script{display:grid;gap:5px;align-content:center;padding:0 6px}
.mini-script i{height:4px;border-radius:2px;background:var(--p1);transform-origin:left;animation:sx 2.4s var(--ease) var(--d) infinite}
@keyframes sx{0%{transform:scaleX(0)}40%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.mini-reply{display:grid;gap:4px;align-content:end;padding:4px 5px}
.mini-reply i{height:9px;border-radius:5px;width:60%;background:var(--line-2);animation:rq 3s var(--ease) infinite}
.mini-reply i+i{justify-self:end;background:var(--p1);animation-name:rr}
@keyframes rq{0%,10%{opacity:0}20%,90%{opacity:1}100%{opacity:0}}
@keyframes rr{0%,40%{opacity:0;transform:translateY(4px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
.mini-ctrl{display:flex;gap:4px;align-items:flex-end;padding:4px}
.mini-ctrl i{flex:1;height:100%;border-radius:5px;border:1px solid var(--line-2);background:var(--surface);animation:dcard 4.5s var(--ease) var(--d) infinite}
@keyframes dcard{0%,10%{transform:translateY(110%)}22%,70%{transform:none}84%,100%{transform:translateY(110%)}}
.mini-globe{display:grid;place-items:center}
.mini-globe i{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--p1);position:relative;overflow:hidden}
.mini-globe i::before,.mini-globe i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--p1) 60%,transparent);animation:meridian 4s linear infinite}
.mini-globe i::after{animation-delay:-2s}
@keyframes meridian{from{transform:scaleX(1)}50%{transform:scaleX(.1)}to{transform:scaleX(1)}}
.mini-shield{display:grid;place-items:center}
.mini-shield i{width:22px;height:26px;background:var(--p1);clip-path:polygon(50% 0,100% 20%,100% 60%,50% 100%,0 60%,0 20%);animation:beat 2.4s infinite}
.plat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:clamp(18px,2vw,24px)}
.plat{padding:16px;text-align:center}
.plat b{display:block;font-size:1rem;font-weight:800}
.plat em{display:inline-block;margin-top:6px;font-style:normal;font-size:.7rem;letter-spacing:.14em;padding:.2em .6em;border-radius:5px;color:var(--acc);background:color-mix(in oklab,var(--p1) 11%,transparent)}
.plat.warn em{color:#B25E00;background:rgba(245,166,35,.16)}
:root[data-theme="dark"] .plat.warn em{color:#FFC46B}
.plat p{margin-top:8px;font-size:.8rem;color:var(--muted);line-height:1.6}

/* ---------- 三步开播 ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:clamp(38px,4.4vw,64px)}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:8%;top:30px;height:1px;width:calc(84% * var(--sp,0));background:linear-gradient(90deg,var(--p3),var(--p2),var(--p1));box-shadow:0 0 12px color-mix(in oklab,var(--p1) 80%,transparent);transition:width 1.6s var(--ease2)}
.step{position:relative;padding-top:6px}
.step .idx{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;font-family:var(--serif);font-size:1.5rem;color:var(--acc);background:var(--bg);border:1px solid var(--line-2)}
.step h3{margin-top:1.2rem;font-size:1.2rem;font-weight:800}
.step h3 small{font-size:.72rem;letter-spacing:.14em;color:var(--faint);margin-left:.6em;font-weight:400}
.step p{margin-top:.6rem;color:var(--muted);font-size:.92rem;line-height:1.8;max-width:22rem}
.step .spec{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:6px}
.step .spec span{font-size:11.5px;letter-spacing:.04em;padding:.32em .7em;border-radius:6px;background:color-mix(in oklab,var(--p1) 12%,transparent);color:var(--acc)}

/* ---------- 套餐（模式切换算时长） ---------- */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.seg button{padding:.5em 1em;border-radius:9px;font-size:.84rem;color:var(--muted);transition:.3s var(--ease);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
.plans-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,3vw,38px)}
.plans-top .tiny{max-width:none;text-align:left}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:18px;align-items:stretch}
.plan{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;border-radius:calc(var(--r) + 4px)}
.plan.hot{border-color:color-mix(in oklab,var(--p1) 55%,var(--line));box-shadow:var(--shadow);background:linear-gradient(180deg,color-mix(in oklab,var(--p1) 7%,var(--surface)),var(--surface) 40%)}
.plan .ribbon{position:absolute;right:18px;top:-12px;padding:.28em .85em;border-radius:999px;font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--on-p);background:linear-gradient(118deg,var(--btn-b),var(--btn-a))}
.plan .name{font-size:1.05rem;font-weight:800;letter-spacing:.04em}
.plan .name small{display:block;font-size:.78rem;font-weight:400;color:var(--faint);margin-top:.15rem;letter-spacing:.02em}
.plan .price{margin-top:1rem;display:flex;align-items:baseline;gap:.2em}
.plan .price i{font-style:normal;font-size:1.05rem;color:var(--muted)}
.plan .price b{font-size:clamp(2rem,3vw,2.6rem);font-weight:900;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.plan .price u{text-decoration:none;font-size:.86rem;color:var(--muted);margin-left:.15em}
.plan .price s{margin-left:.6em;font-size:.9rem;color:var(--faint);text-decoration-color:color-mix(in oklab,var(--p1) 70%,transparent)}
.plan .hrs .rate{display:block;font-style:normal;font-size:.74rem;color:var(--faint);margin-top:2px}
.plan .pts{margin-top:.9rem;display:flex;align-items:baseline;gap:.4em;padding:.7em .9em;border-radius:12px;background:color-mix(in oklab,var(--p1) 9%,transparent);color:var(--acc)}
.plan .pts b{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.plan .pts small{font-size:.78rem;color:var(--muted);margin-left:auto}
.plan .hrs{margin-top:1rem;padding:14px 16px;border-radius:12px;border:1px dashed var(--line-2);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan .hrs span{font-size:.84rem;color:var(--muted)}
.plan .hrs b{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;transition:.3s}
.plan .hrs b small{font-size:.55em;font-weight:500;color:var(--muted);margin-left:.2em}
.plan ul{margin-top:1rem;display:grid;gap:.5rem;flex:1}
.plan li{position:relative;padding-left:1.5em;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--acc);font-weight:700}
.plan .btn{margin-top:1.3rem;justify-content:center}
.extras{margin-top:clamp(22px,3vw,36px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(12px,1.6vw,20px)}
.ex{padding:20px 22px}
.ex h4{font-size:1rem;font-weight:800}
.ex h4 small{font-size:.78rem;font-weight:400;color:var(--faint);margin-left:.6em}
.ex ul{margin-top:.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.4rem}
.ex li{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:.35rem 0;border-bottom:1px dashed var(--line);color:var(--ink-2)}
.ex li b{font-variant-numeric:tabular-nums;color:var(--acc);white-space:nowrap}
.ex p{margin-top:.6rem;font-size:.86rem;color:var(--muted);line-height:1.75}
.ex p b{color:var(--ink-2)}

/* ---------- 常见问题 ---------- */
.faq{margin-top:clamp(30px,3.6vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:color-mix(in oklab,var(--p1) 40%,var(--line));box-shadow:var(--shadow-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px;font-weight:700;font-size:.96rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;color:var(--acc);background:color-mix(in oklab,var(--p1) 11%,transparent)}
.faq summary::after{content:"+";margin-left:auto;color:var(--faint);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 16px 56px;font-size:.9rem;color:var(--muted);line-height:1.8}
.faq .a b{color:var(--ink-2)}

/* ---------- 贴牌合作 ---------- */
.oem{position:relative;margin-top:clamp(30px,3.6vw,46px);padding:clamp(26px,3.4vw,44px);border-radius:calc(var(--r) + 8px);border:1px solid color-mix(in oklab,var(--p1) 40%,var(--line));background:var(--surface);overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.oem::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--zx-ang),transparent 0deg,color-mix(in oklab,var(--p2) 90%,transparent) 50deg,transparent 190deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinang 7s linear infinite}
.oem h3{font-size:1.2rem;font-weight:800}
.oem h3 small{display:block;font-size:.74rem;font-weight:400;color:var(--faint);letter-spacing:.14em;margin-bottom:.3rem}
.oem p{margin-top:.5rem;font-size:.9rem;color:var(--muted);line-height:1.8}
.oem .note{grid-column:1/-1;padding-top:16px;border-top:1px dashed var(--line-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:.92rem;color:var(--ink-2)}

/* ---------- 收尾 + 页脚 ---------- */
.final{position:relative;text-align:center;padding:clamp(48px,6vw,84px) clamp(22px,4vw,60px);border-radius:calc(var(--r) + 10px);overflow:hidden;color:#fff;background:linear-gradient(135deg,color-mix(in oklab,var(--p1) 88%,black),var(--p1) 45%,var(--p2))}
.final::before{content:"";position:absolute;right:-10%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,hsl(0 0% 100% / .3),transparent 68%);pointer-events:none}
.final .final-m{position:absolute;left:clamp(10px,4vw,60px);bottom:-20px;width:clamp(110px,14vw,190px);aspect-ratio:1;opacity:.95;filter:drop-shadow(0 20px 30px rgba(0,0,0,.3));animation:floaty 6s var(--ease) infinite alternate}
.final h2{position:relative;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:900;line-height:1.3}
.final h2 .thin{display:block;font-weight:300;font-size:.6em;letter-spacing:.08em;margin-top:.5rem;opacity:.9}
.final .cta{position:relative;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:1.8rem}
.final .btn-solid{background:#fff;color:var(--acc);box-shadow:0 14px 34px -16px rgba(0,0,0,.5)}
.final .btn-line{border-color:hsl(0 0% 100% / .5);color:#fff;background:hsl(0 0% 100% / .08)}
.foot{position:relative;z-index:2;padding:clamp(34px,4vw,52px) 0 28px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-logo img{height:40px;width:auto}
.foot p{margin-top:.8rem;line-height:1.8}
.foot .cols{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.foot .cols h5{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.14em;color:var(--ink);font-weight:700}
.foot .cols a{display:block;padding:.2em 0;color:var(--ink-2)}
.foot .cols a:hover{color:var(--acc)}
.copy{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px 22px;flex-wrap:wrap;font-size:.78rem;color:var(--faint)}
.copy .beian{display:inline-flex;gap:14px;flex-wrap:wrap}
.copy .beian a{color:var(--faint);display:inline-flex;align-items:center;gap:5px}
.copy .beian a:hover{color:var(--acc);text-decoration:underline}
.copy .gongan i{width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,#e2313a,#b71c24);position:relative;flex:none}
.copy .gongan i::after{content:"";position:absolute;left:4px;top:3px;width:6px;height:8px;background:#fff;clip-path:polygon(50% 0,100% 25%,100% 65%,50% 100%,0 65%,0 25%)}

/* ---------- 下载页 ---------- */
.dl-hero{position:relative;z-index:2;padding-block:clamp(120px,15vh,168px) clamp(40px,5vw,64px)}
.dl-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,3.4vw,44px);border-radius:calc(var(--r) + 8px)}
.dl-card h1{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.2;font-weight:900;margin-top:.8rem}
.dl-card h1 .thin{display:block;font-weight:300;color:var(--ink-2);font-size:.62em;letter-spacing:.04em;margin-top:.35rem}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:1rem;font-size:.86rem;color:var(--muted)}
.dl-meta b{color:var(--ink-2);font-family:var(--mono);font-weight:600}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem;align-items:center}
.code{display:inline-flex;align-items:center;gap:8px;padding:.6em .9em;border-radius:12px;border:1px dashed var(--line-2);background:var(--bg-2);font-size:.86rem;color:var(--muted)}
.code b{font-family:var(--mono);font-size:1rem;letter-spacing:.14em;color:var(--ink)}
.code button{padding:.3em .7em;border-radius:8px;font-size:.78rem;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer}
.dl-side{display:grid;gap:10px}
.dl-side>*{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);transition:border-color .3s}
.dl-side>a:hover{border-color:var(--p1)}
.dl-side i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--acc);background:color-mix(in oklab,var(--p1) 11%,transparent)}
.dl-side i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl-side b{display:block;font-size:.92rem}
.dl-side small{display:block;font-size:.78rem;color:var(--muted);margin-top:1px}
.req{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(12px,1.6vw,20px);align-items:start}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:.74rem;letter-spacing:.14em;color:var(--faint);font-weight:600;background:var(--bg-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.hl{color:var(--acc);font-weight:700}
.note{padding:16px 20px;border-radius:14px;border:1px dashed var(--line-2);background:var(--surface);font-size:.86rem;color:var(--muted);line-height:1.75}
.note b{color:var(--ink-2)}
.inst{margin-top:clamp(30px,3.6vw,46px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);counter-reset:st}
.inst li{position:relative;padding:22px;list-style:none}
.inst li::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--acc);font-weight:700}
.inst h4{margin-top:.5rem;font-size:1.02rem;font-weight:800}
.inst p{margin-top:.45rem;font-size:.88rem;color:var(--muted);line-height:1.75}
.inst p b{color:var(--ink-2)}
.inst .warn{margin-top:.6rem;font-size:.8rem;color:#B25E00;background:rgba(245,166,35,.12);padding:.5em .8em;border-radius:8px}
:root[data-theme="dark"] .inst .warn{color:#FFC46B}

/* ---------- 悬浮件：客服 / 回顶 ---------- */
.to-top{position:fixed;right:22px;bottom:24px;z-index:60;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--glass);color:var(--ink);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:.3s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--p1);color:var(--acc)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-dock{position:fixed;right:22px;top:52%;transform:translateY(-50%);z-index:61;display:flex;flex-direction:column;align-items:flex-end}
.cs-main{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:grab;padding:11px 17px 11px 25px;border-radius:999px;color:var(--on-p);font-size:14px;font-weight:700;letter-spacing:.03em;white-space:nowrap;background:linear-gradient(118deg,var(--btn-b),var(--btn-a));box-shadow:0 12px 28px -12px color-mix(in oklab,var(--p1) 80%,transparent);touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .2s,transform .15s}
.cs-dock.dragging .cs-main{cursor:grabbing;transform:scale(1.03)}
.cs-main svg.ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-main .cs-badge{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#FF3B3B;box-shadow:0 0 0 3px rgba(255,59,59,.3);animation:beat 1.8s infinite}
.cs-grip{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(2,2.5px);gap:2.5px;opacity:.5;pointer-events:none}
.cs-grip i{width:2.5px;height:2.5px;border-radius:50%;background:currentColor}

/* ---------- 显示设置（配色 / 明暗 / 动效 / 虚化 / 素材），导出客户版时删除 ---------- */
.skin{position:fixed;left:18px;bottom:18px;z-index:62;width:300px;max-height:calc(100vh - 40px);overflow:auto;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.82rem}
.skin-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:800;cursor:pointer;user-select:none;background:var(--surface);border-bottom:1px solid var(--line)}
.skin-h::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);transition:.3s}
.skin.closed .skin-h::after{transform:rotate(-135deg)}
.skin.closed .skin-b{display:none}
.skin.closed .skin-h{border-bottom:0}
.skin-b{padding:10px 14px 14px;display:grid;gap:8px}
.skin-b label{font-size:11px;letter-spacing:.14em;color:var(--faint);font-weight:600}
.sw{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.sw button{height:32px;border-radius:9px;border:2px solid transparent;background:linear-gradient(135deg,var(--a),var(--b));position:relative}
.sw button[aria-pressed="true"]{border-color:var(--ink)}
.sw button span{position:absolute;left:0;right:0;bottom:-16px;font-size:9.5px;color:var(--muted);text-align:center}
.skin .seg{display:flex}
.skin .seg button{flex:1}
.fxlist{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:220px;overflow:auto;padding-right:2px}
.fxlist button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);text-align:left;font-size:.78rem;color:var(--ink-2);cursor:pointer;transition:.25s}
.fxlist button small{font-size:.68rem;color:var(--faint)}
.fxlist button:hover{border-color:var(--p1)}
.fxlist button[aria-pressed="true"]{border-color:var(--p1);background:color-mix(in oklab,var(--p1) 10%,var(--surface));color:var(--ink)}
.skin .rng{display:flex;align-items:center;gap:8px}
.skin .rng input{flex:1;accent-color:var(--p1)}
.skin .rng span{font-family:var(--mono);font-size:.74rem;color:var(--muted);width:44px;text-align:right}
.skin .rng button{font-size:.72rem;color:var(--muted);padding:.2em .5em;border:1px solid var(--line);border-radius:6px}
.skin .up{display:block;padding:9px 10px;border-radius:9px;border:1px dashed var(--line-2);text-align:center;font-size:.78rem;color:var(--ink-2);cursor:pointer}
.skin .up input{display:none}
.skin .tiny{font-size:.74rem;line-height:1.6}

/* ---------- 隐藏编辑面板（与八大产品页同一套） ---------- */
.editor{position:fixed;inset:0;background:rgba(10,14,24,.55);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
.editor.open{display:flex}
.editor-card{background:#fff;color:#14203a;border-radius:16px;max-width:480px;width:100%;padding:26px 26px 22px;max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);font-weight:400}
.editor-card h3{font-size:17px;font-weight:800;margin-bottom:4px}
.editor-card .ed-sub{font-size:12px;color:#6b7590;margin-bottom:18px}
.editor-card label{display:block;font-size:13px;color:#33405e;margin-bottom:12px;font-weight:600}
.editor-card input{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid #d8dde8;border-radius:8px;font-size:14px;font-family:var(--sans);color:#14203a;font-weight:400;background:#fff}
.editor-card input:focus{outline:2px solid #2F5BFF;outline-offset:0;border-color:transparent}
.editor-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.eb{padding:10px 16px;border-radius:8px;border:1px solid #d8dde8;background:#fff;font-size:13.5px;cursor:pointer;font-family:var(--sans);font-weight:600;color:#14203a}
.eb:hover{border-color:#8a94ad}
.eb-dark{background:#14203a;color:#fff;border-color:#14203a}
.eb-red{background:#E60012;color:#fff;border-color:#E60012}
.eb-red:hover,.eb-dark:hover{opacity:.88}
.eb-textedit{display:block;width:100%;margin:0 0 16px;text-align:center;background:#fff1f1;color:#b3000e;border:1px solid #ffc9cc!important;font-weight:700!important;font-size:14px!important;padding:12px!important}
.eb-export{display:block;width:100%;margin-top:10px;background:#1E7A46;color:#fff;border-color:#1E7A46;font-weight:700;text-align:center}
.eb-export:hover{opacity:.9}
.editor-tip{font-size:12px;color:#6b7590;margin-top:14px;line-height:1.7}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:#14203a;color:#fff;padding:11px 24px;border-radius:999px;font-size:14px;z-index:110;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap;max-width:calc(100vw - 24px);text-overflow:ellipsis;overflow:hidden}
.toast.show{opacity:1}
body.editing [contenteditable="true"]{outline:1.5px dashed rgba(224,56,43,.8);outline-offset:2px;border-radius:4px;cursor:text;background:rgba(255,224,130,.35);color:#14203a}
body.editing [contenteditable="true"]:hover{background:rgba(255,205,70,.6)}
body.editing [contenteditable="true"]:focus{outline:2px solid #e0382b;background:#fff8e0}
body.editing .cs-dock,body.editing .to-top,body.editing .skin{pointer-events:none;opacity:.25}
body.editing .stage h1 .l2,body.editing .stage h1 .l2 .ch,body.editing .h2 .grad{-webkit-text-fill-color:initial;color:#14203a;background:none}
body.editing .final{color:#14203a;background:#fff}
.te-flash{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:130;background:#e0382b;color:#fff;padding:14px 28px;border-radius:999px;font-size:16px;font-weight:800;box-shadow:0 16px 40px -12px rgba(224,56,43,.6);white-space:nowrap;max-width:calc(100vw - 24px);text-align:center;animation:teFlash 3.2s ease forwards}
@keyframes teFlash{0%{opacity:0;transform:translate(-50%,-12px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px)}}
.te-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:rgba(14,20,36,.97);color:#fff;padding:14px 18px 14px 22px;border-radius:16px;box-shadow:0 20px 50px -14px rgba(0,0,0,.7);font-size:15px;max-width:calc(100vw - 24px)}
.te-bar b{font-weight:800}
.te-bar .te-tip{color:#FBB16B;font-size:13px}
.te-bar button{border:none;cursor:pointer;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:10px}
.te-save{background:#e0382b;color:#fff}
.te-cancel{background:rgba(255,255,255,.16);color:#fff}

/* ---------- 入场动画 + 出图模式 ---------- */
:root.still [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
:root.still .steps::after{transition:none!important}
:root.still .stage{min-height:880px}
:root.still .skin{display:none}
html.js [data-anim]{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease2) var(--d,0s),transform .95s var(--ease2) var(--d,0s)}
html.js [data-anim].in{opacity:1;transform:none}
html.js [data-anim="fade"]{transform:none}
html:not(.js) .steps::after{width:84%}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .menu{display:none}.burger{display:grid}.by{display:none}
  .stage-in{grid-template-columns:1fr;gap:34px}
  .stage-veil{background:radial-gradient(60% 46% at 50% 36%,var(--bg) 30%,color-mix(in oklab,var(--bg) 72%,transparent) 60%,transparent 84%)}
  .mascot{min-height:300px}
  .mascot .tag.t1{left:0}.mascot .tag.t2{right:0}.mascot .tag.t3{left:4%}
  .cmp,.bento,.plans,.inst,.oem{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo,.extras,.req,.dl-card{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
}
@media (max-width:720px){
  .stage{padding-top:104px;padding-bottom:140px}
  .stage h1{font-size:clamp(1.9rem,9vw,2.8rem)}
  .facts{gap:12px}
  .facts li{padding-inline:0;flex:0 0 calc(50% - 6px)}
  .facts li+li{border-left:0}
  .facts li:nth-child(even){border-left:1px solid var(--line);padding-left:12px}
  .head .tiny{text-align:left;max-width:none}
  .versus{grid-template-columns:1fr}
  .vs-mid{padding:2px 0}
  .clock-rows{grid-template-columns:1fr}
  .clock .lab span:nth-child(even){display:none}
  .cmp,.bento,.plans,.inst,.oem{grid-template-columns:1fr}
  .plat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before,.steps::after{display:none}
  .ex ul{grid-template-columns:1fr}
  .cue{display:none}
  .mascot .tag{display:none}
  .final .final-m{display:none}
  .skin{width:calc(100vw - 36px)}
  .cs-dock{right:12px}
  .cs-main{padding:9px 13px 9px 21px;font-size:12.5px}
  .to-top{right:14px;bottom:18px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js [data-anim]{opacity:1;transform:none}
  .stage h1 .ch{opacity:1;transform:none}
}

:root{--mascot:url("/static/mascot-hero.webp")}
/* ============================================================
   站点补充样式（只给 智星播站点 用，拼在 app.css 末尾）
   1) 三栏报价表  2) 首页下载入口  3) 下载页  4) 页头
   ============================================================ */
.pagehead{padding-top:clamp(112px,14vh,150px)}

/* ---------- 报价表：一栏 = 表头 → 积分 → 四种模式 → 其他功能 → 价格 ---------- */
.psheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,3.4vw,44px);align-items:start}
.ps{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--r) + 8px);border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-2);transition:transform .5s var(--ease2),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.ps:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--p1) 45%,var(--line))}
.ps.hot{border-color:color-mix(in oklab,var(--p1) 60%,var(--line));box-shadow:0 34px 70px -36px color-mix(in oklab,var(--p1) 75%,transparent),var(--shadow-2)}
.ps>*{padding-inline:clamp(18px,1.8vw,24px)}

.ps-h{position:relative;display:grid;gap:2px;padding-block:18px 16px;text-align:center;color:var(--on-p);background:linear-gradient(118deg,var(--btn-b),var(--btn-a));overflow:hidden}
.ps-h::before{content:"";position:absolute;right:-12%;top:-70%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,hsl(0 0% 100% / .32),transparent 68%);pointer-events:none}
.ps-h::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(0 0% 100% / .14),transparent 60%);pointer-events:none}
.ps-h b{position:relative;font-size:clamp(1.25rem,1.7vw,1.45rem);font-weight:800;letter-spacing:.06em;line-height:1.2}
.ps-h small{position:relative;font-size:.78rem;letter-spacing:.08em;opacity:.88;margin-top:2px}
.ps-rib{position:absolute;right:12px;top:12px;padding:.28em .75em;border-radius:999px;font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--acc);background:var(--surface);box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}

.ps-pts{display:flex;align-items:baseline;gap:.35em;padding-block:20px 16px}
.ps-pts b{font-size:clamp(2rem,2.6vw,2.4rem);font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acc)}
.ps-pts span{font-size:1rem;font-weight:700;color:var(--ink)}
.ps-pts em{margin-left:auto;font-style:normal;font-size:.74rem;letter-spacing:.08em;padding:.3em .75em;border-radius:999px;color:var(--acc);background:color-mix(in oklab,var(--p1) 11%,transparent)}

.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:18px}
.ps-tile{display:grid;gap:4px;padding:12px 13px 11px;border-radius:12px;background:color-mix(in oklab,var(--p1) 5%,var(--surface));border:1px solid var(--line);transition:border-color .3s,background .3s}
.ps:hover .ps-tile{border-color:color-mix(in oklab,var(--p1) 20%,transparent)}
.ps-tile small{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-tile b{display:flex;align-items:baseline;gap:.12em;font-size:1.36rem;font-weight:900;line-height:1.1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ps-tile b .num{font-size:1.36rem}
.ps-tile b i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink-2);margin-left:.15em}
.ps-tile span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ps-sub{display:flex;align-items:center;gap:.7em;padding-block:12px 4px;font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--acc);border-top:1px solid var(--line)}
.ps-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.ps-ck{display:grid;padding-bottom:14px}
.ps-ck li{display:flex;align-items:center;gap:.6em;padding:.44em 0;font-size:.86rem;color:var(--ink-2)}
.ps-ck i{flex:none;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;color:var(--on-p);background:linear-gradient(135deg,var(--btn-b),var(--btn-a))}
.ps-ck i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ps-ck span{flex:1;min-width:0}
.ps-ck b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

.ps-pay{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-block:16px 4px;border-top:1px solid var(--line);background:linear-gradient(180deg,color-mix(in oklab,var(--p1) 6%,var(--surface)),var(--surface))}
.ps-unit{align-self:center;font-size:.78rem;letter-spacing:.14em;font-weight:700;color:var(--acc);padding:.35em .8em;border-radius:999px;border:1px solid color-mix(in oklab,var(--p1) 40%,transparent)}
.ps-amt{display:grid;justify-items:end;gap:2px}
.ps-amt s{font-size:.9rem;color:var(--faint);font-variant-numeric:tabular-nums;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in oklab,var(--p1) 60%,transparent)}
.ps-amt b{font-size:clamp(2rem,2.8vw,2.5rem);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ps-amt b i{font-style:normal;font-size:.52em;font-weight:700;color:var(--muted);margin-right:.08em;vertical-align:.1em}
.ps.hot .ps-amt b{background-image:linear-gradient(96deg,var(--acc),var(--p1));-webkit-background-clip:text;background-clip:text;color:transparent}
.ps.hot .ps-amt b i{-webkit-text-fill-color:var(--muted)}
.ps .btn{margin:16px clamp(18px,1.8vw,24px) 20px;justify-content:center}
.ps-foot{margin-top:clamp(16px,2vw,24px)}
.ps-foot .ex p{margin-top:.5rem}

/* ---------- 首页下载入口：一张横卡，详情在 /download ---------- */
.dl-teaser{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2.6vw,36px);align-items:center;padding:clamp(22px,2.8vw,36px) clamp(22px,3vw,44px);border-radius:calc(var(--r) + 10px);overflow:hidden}
.dl-teaser::before{content:"";position:absolute;left:-10%;top:-60%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--p2) 28%,transparent),transparent 70%);pointer-events:none}
.dl-m{width:clamp(84px,9vw,120px);aspect-ratio:1;filter:drop-shadow(0 16px 24px color-mix(in oklab,var(--p1) 35%,transparent));animation:floaty 6s var(--ease) infinite alternate}
.dl-teaser-txt h3{margin-top:.8rem;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:900;line-height:1.25}
.dl-teaser-txt h3 .thin{display:block;font-weight:300;font-size:.62em;color:var(--ink-2);letter-spacing:.04em;margin-top:.3rem}
.dl-teaser-txt .dl-meta{margin-top:.9rem}
.dl-teaser-act{display:grid;justify-items:center;gap:8px;text-align:center}
.dl-teaser-act small{font-size:.76rem;color:var(--faint)}

/* ---------- 下载页：左下载卡 + 右配置要求 ---------- */
.dlx{margin-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(12px,1.6vw,20px);align-items:start}
.dl-box{padding:clamp(22px,2.6vw,32px)}
.dl-box .dl-meta{margin-top:1.1rem}
.dl-box .dl-actions{margin-top:1.2rem}
.dl-box .tiny{margin-top:14px}
.dl-links{margin-top:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dl-links a{display:grid;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);font-size:.92rem;font-weight:700;color:var(--ink);transition:border-color .3s}
.dl-links a:hover{border-color:var(--p1);color:var(--acc)}
.dl-links a small{font-size:.76rem;font-weight:400;color:var(--muted)}
.dl-req{padding:clamp(18px,2vw,24px)}
.dl-req h3{font-size:1.05rem;font-weight:800;margin-bottom:12px}
.dl-req table.tbl{min-width:0}
.dl-req .tbl td:first-child{width:5.5em;color:var(--muted);white-space:nowrap}
.dl-req .note{margin-top:12px;padding:12px 14px}

@media (max-width:1080px){
  .psheet{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .dlx,.dl-links{grid-template-columns:1fr}
  .dl-teaser{grid-template-columns:auto minmax(0,1fr)}
  .dl-teaser-act{grid-column:1/-1;justify-items:start}
}
@media (max-width:720px){
  .pagehead{padding-top:100px}
  .dl-teaser{grid-template-columns:1fr}
  .dl-m{display:none}
  .ps-amt b{font-size:2rem}
}