/* ============================================================
   VMOS+ Official Site — 浅色 · 纯蓝主色（= App 主色 #3D6BFF）
   纯 CSS · 零 JS · 无外部资源
   ============================================================ */

:root{
  --bg:#F4F6FB;
  --bg-2:#EEF1F9;
  --card:#FFFFFF;
  --muted:#F7F8FC;
  --ink:#10182B;
  --ink-2:#5A6478;
  --ink-3:#9AA3B8;
  --line:#E9EDF5;
  --brand:#3D6BFF;
  --brand-deep:#2A55E0;
  --brand-lt:#54A8E3;
  --mint:#0FBE7C;
  --amber:#E8960C;
  --coral:#F04A5E;
  --wx:#07C160;
  --r-btn:10px; --r-card:16px; --r-chip:12px; --r-icon:12px; --r-band:18px;
  --shadow-card:0 1px 3px rgba(32,42,68,.05),0 16px 40px -18px rgba(32,42,68,.15);
  --shadow-pop:0 3px 8px rgba(32,42,68,.07),0 30px 64px -22px rgba(32,42,68,.25);
  --shadow-btn:0 8px 22px -8px rgba(61,107,255,.5);
  --font:"SF Pro Display","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
b,strong{font-weight:700}
::selection{background:rgba(61,107,255,.2)}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}

/* ---------- 背景：极淡蓝色极光 ---------- */
.bg{
  position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(61,107,255,.055) 0%,rgba(84,168,227,.03) 34%,rgba(61,107,255,0) 62%),
    var(--bg);
}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)}
.bg::before{width:44vw;height:44vw;left:-14vw;top:-16vw;background:radial-gradient(circle at 40% 40%,rgba(61,107,255,.14),rgba(61,107,255,0) 70%);animation:drift1 26s ease-in-out infinite alternate}
.bg::after{width:38vw;height:38vw;right:-12vw;top:22vh;background:radial-gradient(circle at 60% 40%,rgba(84,168,227,.13),rgba(84,168,227,0) 70%);animation:drift2 32s ease-in-out infinite alternate}
/* 细网格：浅色下的科技质感，靠遮罩淡出，不抢内容 */
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,107,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,107,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,rgba(0,0,0,.5) 42%,transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,rgba(0,0,0,.5) 42%,transparent 72%);
}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vh) scale(1.1)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-5vw,-5vh) scale(.95)}}

/* 顶部滚动进度条：纯 CSS，不支持的浏览器自动不显示 */
.progress{position:fixed;left:0;top:0;height:2.5px;width:100%;z-index:90;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#2A55E0,#3D6BFF 45%,#54A8E3);box-shadow:0 0 12px rgba(61,107,255,.5)}
@supports (animation-timeline: scroll()){
  .progress{animation:progress linear;animation-timeline:scroll(root)}
}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:15px;line-height:1;
  padding:14px 24px;border-radius:var(--r-btn);
  transition:transform .25s cubic-bezier(.2,.7,.3,1.4),box-shadow .25s,background .25s,color .25s,border-color .25s;
  white-space:nowrap;cursor:pointer;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{
  background:var(--brand);color:#fff;
  box-shadow:var(--shadow-btn),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{transform:translateY(-2px);background:var(--brand-deep);box-shadow:0 14px 30px -8px rgba(42,85,224,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 3px rgba(32,42,68,.06)}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(61,107,255,.45);color:var(--brand)}
.btn-lg{padding:18px 34px;font-size:16px;border-radius:12px}
.btn-lg svg{width:19px;height:19px}
.btn-sm{padding:10px 18px;font-size:13.5px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h)}
.nav::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(244,246,251,.74));
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  border-bottom:1px solid rgba(61,107,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 22px -18px rgba(32,42,68,.5);
}
.nav-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;font-size:17.5px;letter-spacing:-.01em}
.brand{position:relative}
.brand .logo{width:33px;height:33px;flex:none;filter:drop-shadow(0 4px 10px rgba(61,107,255,.38));transition:transform .35s cubic-bezier(.2,.7,.3,1.5)}
.brand:hover .logo{transform:scale(1.07) rotate(-4deg)}
.brand b{letter-spacing:-.02em}
.brand b{font-weight:800}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links>a{
  position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);
  padding:8px 14px;border-radius:8px;transition:color .22s;
}
.nav-links>a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#3D6BFF,#54A8E3);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .28s cubic-bezier(.2,.7,.3,1.2);
}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);padding:3px}
.lang-switch a{font-size:12.5px;font-weight:600;color:var(--ink-3);padding:5px 13px;border-radius:7px;transition:.2s}
.lang-switch a.on{background:var(--ink);color:#fff}
.nav-burger{display:none}
.nav-close{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 52px;overflow:visible}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:30px;align-items:center;max-width:1180px;margin:0 auto;padding:0 28px}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-btn);padding:6px 14px 6px 7px;
  box-shadow:0 1px 4px rgba(32,42,68,.07);
}
.hero-tag .pill{background:var(--brand);color:#fff;font-weight:700;font-size:12px;border-radius:7px;padding:5px 10px;letter-spacing:.02em}
.hero-title{
  position:relative;font-size:clamp(46px,6.1vw,74px);font-weight:800;
  letter-spacing:-.042em;line-height:1.1;margin:24px 0 24px;
}
.hero-title .grad{position:relative;display:inline-block}
/* 标题下的渐变短线，收住视觉重心 */
.hero-title .grad::after{
  content:"";position:absolute;left:3px;right:8px;bottom:0;height:3.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(61,107,255,.3),rgba(84,168,227,.04));
}
.grad{
  background:linear-gradient(115deg,#2A55E0 0%,#3D6BFF 55%,#54A8E3 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{font-size:17px;color:var(--ink-2);max-width:31em;line-height:1.85}
.hero-sub b{color:var(--ink)}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--ink-3);font-weight:500}
.hero-note svg{width:15px;height:15px;color:var(--mint);flex:none}

/* ============================================================
   手机样机 —— 机身 / 状态栏
   ============================================================ */
.phone{
  position:relative;width:300px;border-radius:44px;padding:10px;
  background:linear-gradient(146deg,#454C66 0%,#1E2439 26%,#141930 60%,#2E344B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 2px rgba(10,14,36,.35),
    0 44px 84px -26px rgba(24,32,72,.48);
}
.phone::before{ /* 电源键 */
  content:"";position:absolute;right:-2px;top:132px;width:2.5px;height:52px;border-radius:2px;
  background:linear-gradient(180deg,#3C425C,#232840);
}
.phone::after{ /* 音量键 */
  content:"";position:absolute;left:-2px;top:104px;width:2.5px;height:34px;border-radius:2px;
  background:linear-gradient(180deg,#3C425C,#232840);
  box-shadow:0 46px 0 #2B3149,0 46px 0 2px rgba(0,0,0,0);
}
.phone-screen{
  position:relative;border-radius:35px;overflow:hidden;background:var(--muted);
  aspect-ratio:9/19.3;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(10,14,36,.5);
}
.phone-notch{
  position:absolute;top:8px;left:50%;translate:-50% 0;z-index:6;
  width:78px;height:21px;border-radius:11px;background:#0B0F1E;
}
.phone-notch::after{ /* 前摄 */
  content:"";position:absolute;right:9px;top:50%;translate:0 -50%;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#2C3B66,#080B16 70%);
  box-shadow:inset 0 0 0 .5px rgba(120,160,255,.35);
}

/* 状态栏（真实信号 / WiFi / 电池） */
.ph-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 20px 5px;flex:none;position:relative;z-index:5;
  font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.01em;
}
.ph-status .sic{display:inline-flex;gap:4.5px;align-items:flex-end;height:11px}
.st-sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px}
.st-sig i{width:2.5px;border-radius:1px;background:currentColor;display:block}
.st-sig i:nth-child(1){height:3.5px}
.st-sig i:nth-child(2){height:5.5px}
.st-sig i:nth-child(3){height:7.5px}
.st-sig i:nth-child(4){height:9.5px;opacity:.32}
.st-wifi{position:relative;width:12px;height:9px}
.st-wifi i{
  position:absolute;left:50%;translate:-50% 0;border:1.4px solid currentColor;
  border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;
  border-radius:50%;
}
.st-wifi i:nth-child(1){width:12px;height:12px;top:0}
.st-wifi i:nth-child(2){width:7.5px;height:7.5px;top:2.4px}
.st-wifi i:nth-child(3){
  width:3px;height:3px;top:6px;border:none;border-radius:50%;background:currentColor;
}
.st-bat{
  position:relative;width:19px;height:10px;border-radius:3px;
  border:1.3px solid currentColor;opacity:.9;
}
.st-bat::after{content:"";position:absolute;right:-3px;top:50%;translate:0 -50%;width:1.8px;height:4px;border-radius:0 1.5px 1.5px 0;background:currentColor}
.st-bat i{position:absolute;inset:1.4px;width:auto;border-radius:1.5px;background:currentColor;right:5.5px}
.st-bat.full i{right:1.4px}
.ph-status.on-dark{color:#fff}

/* ---------- Hero visual ---------- */
.hero-visual{position:relative;height:650px;user-select:none}
.halo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.halo::before{content:"";width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(61,107,255,.13),rgba(61,107,255,0) 65%)}
.orbit{position:absolute;left:50%;top:50%;border:1px dashed rgba(61,107,255,.2);border-radius:50%;translate:-50% -50%;pointer-events:none}
.orbit.o1{width:470px;height:470px;animation:spin 46s linear infinite}
.orbit.o2{width:600px;height:600px;animation:spin 70s linear infinite reverse;border-color:rgba(84,168,227,.16)}
.orbit .sat{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:linear-gradient(120deg,#3D6BFF,#54A8E3);box-shadow:0 0 0 4px rgba(61,107,255,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-visual .p-main{position:absolute;right:26px;top:6px;--w:308;width:calc(var(--w) * 1px);z-index:3;animation:floaty 7s ease-in-out infinite}
.hero-visual .p-guest{position:absolute;left:0;top:150px;width:224px;z-index:2;transform:rotate(-8deg);animation:floaty 8.5s ease-in-out .8s infinite}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* ============================================================
   VMOS+ App 首页（拟真）
   ============================================================ */
.ui{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--muted)}
.ui-top{display:flex;align-items:center;gap:10px;padding:8px 15px 10px}
.ui-top .tt{flex:1;min-width:0}
.ui-top b{font-size:19.5px;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.15}
.ui-top .sub{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.ui-top .sub i{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2.5px rgba(15,190,124,.16);flex:none}
.ui-ico{width:27px;height:27px;border-radius:9px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex:none;box-shadow:0 1px 3px rgba(32,42,68,.06)}
.ui-ico svg{width:13px;height:13px}

.ui-res{
  display:flex;margin:0 13px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 4px;box-shadow:0 2px 8px -2px rgba(32,42,68,.07);
}
.ui-res div{flex:1;text-align:center;position:relative}
.ui-res div+div::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--line)}
.ui-res b{font-size:14.5px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ui-res b small{font-size:8.5px;font-weight:700;color:var(--ink-3);margin-left:1.5px}
.ui-res span{display:block;font-size:8.4px;color:var(--ink-3);font-weight:600;margin-top:2px}

.ui-sec{display:flex;align-items:center;justify-content:space-between;padding:14px 15px 8px}
.ui-sec b{font-size:11.5px;font-weight:800;letter-spacing:-.01em}
.ui-sec span{font-size:9px;color:var(--ink-3);font-weight:600}

/* 主虚拟机卡（带真实缩略图） */
.vm-hero{
  margin:0 13px;border-radius:16px;padding:11px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(142deg,#4471FF 0%,#2A55E0 62%,#2246C4 100%);
  box-shadow:0 14px 28px -12px rgba(42,85,224,.62);
  display:flex;gap:11px;
}
.vm-hero::before{content:"";position:absolute;right:-40px;top:-52px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),transparent 68%)}
.vm-hero::after{content:"";position:absolute;right:14px;bottom:-64px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(84,168,227,.5),transparent 70%)}
.vm-thumb{
  width:44px;flex:none;aspect-ratio:9/17;border-radius:8px;position:relative;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,#BFDCFF,#E6F0FF 52%,#DDEAFF);
  box-shadow:0 4px 10px -2px rgba(10,20,60,.4),inset 0 0 0 1px rgba(255,255,255,.5);
}
.vm-thumb i{position:absolute;border-radius:26%;display:block}
.vm-thumb .r1{left:5px;top:9px;width:9px;height:9px;background:linear-gradient(135deg,#3D6BFF,#54A8E3)}
.vm-thumb .r2{left:17px;top:9px;width:9px;height:9px;background:linear-gradient(135deg,#0FBE7C,#4FD9A8)}
.vm-thumb .r3{left:29px;top:9px;width:9px;height:9px;background:linear-gradient(135deg,#FF9F43,#FFC06B)}
.vm-thumb .r4{left:5px;top:21px;width:9px;height:9px;background:linear-gradient(135deg,#F2638D,#FF9BB8)}
.vm-thumb .r5{left:17px;top:21px;width:9px;height:9px;background:linear-gradient(135deg,#2AC3E0,#7FE3F7)}
.vm-thumb .r6{left:29px;top:21px;width:9px;height:9px;background:linear-gradient(135deg,#5B8CFF,#8FB2FF)}
.vm-thumb .bar{left:6px;right:6px;bottom:5px;top:auto;height:7px;border-radius:3px;background:rgba(255,255,255,.75)}
.vm-body{flex:1;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column}
.vm-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.vm-top b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.vm-run{
  font-size:8.5px;font-weight:800;background:rgba(255,255,255,.2);border-radius:5px;padding:3px 7px;
  display:inline-flex;align-items:center;gap:4px;letter-spacing:.02em;flex:none;
  border:1px solid rgba(255,255,255,.2);
}
.vm-run::before{content:"";width:4.5px;height:4.5px;border-radius:50%;background:#5CFFB1;box-shadow:0 0 5px #5CFFB1}
.vm-meta{font-size:9px;opacity:.8;margin-top:3px;font-weight:500}
.vm-mini{display:flex;gap:10px;margin-top:7px}
.vm-mini span{font-size:8.5px;opacity:.82;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.vm-mini span::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.6)}
.vm-btns{display:flex;gap:6px;margin-top:auto;padding-top:9px}
.vm-btns span{flex:1;text-align:center;font-size:9.5px;font-weight:700;border-radius:8px;padding:6px 0;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2)}
.vm-btns .enter{background:#fff;color:#2A55E0;border-color:#fff}

/* 列表项 */
.vm-row{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:9px 11px;margin:8px 13px 0;box-shadow:0 2px 6px -2px rgba(32,42,68,.06);
}
.vm-rt{
  width:28px;flex:none;aspect-ratio:9/15;border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#CFE2FF,#EAF2FF);box-shadow:inset 0 0 0 1px rgba(32,42,68,.07);
}
.vm-rt i{position:absolute;border-radius:26%;width:6px;height:6px;display:block}
.vm-rt .a{left:3.5px;top:6px;background:#5B8CFF}
.vm-rt .b{left:12px;top:6px;background:#4FD9A8}
.vm-rt .c{left:3.5px;top:15px;background:#FFB84D}
.vm-rt .d{left:12px;top:15px;background:#8FB2FF}
.vm-rt.off{background:linear-gradient(180deg,#E4E8F2,#EFF2F8)}
.vm-rt.off i{background:#C9D0E0}
.vm-row .tt{flex:1;min-width:0}
.vm-row .nm{display:flex;align-items:center;gap:5px}
.vm-row .nm b{font-size:11.5px;font-weight:700;letter-spacing:-.01em}
.vm-row .dot{width:5.5px;height:5.5px;border-radius:50%;background:var(--mint);flex:none}
.vm-row .dot.off{background:#C3CAD9}
.vm-row .tt span{font-size:8.8px;color:var(--ink-3);display:block;margin-top:1.5px;font-weight:500}
.vm-row .chev{width:13px;height:13px;color:#C3CAD9;flex:none}
.vm-row.off .nm b{color:var(--ink-2)}

.ui-cta{
  margin:auto 13px 13px;text-align:center;color:#fff;font-weight:700;font-size:12.5px;
  background:var(--brand);border-radius:13px;padding:12px 0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 10px 20px -8px rgba(61,107,255,.55),inset 0 1px 0 rgba(255,255,255,.2);
}
.ui-cta svg{width:14px;height:14px}

/* ============================================================
   虚拟机桌面（拟真 Android 桌面）
   ============================================================ */
.phone-screen.guest{
  background:
    radial-gradient(70% 34% at 84% 2%,rgba(138,190,255,.34),transparent 64%),
    radial-gradient(66% 32% at -6% 24%,rgba(150,160,255,.2),transparent 62%),
    linear-gradient(170deg,#F4F8FF 0%,#EAF0FC 46%,#F1F4FB 100%);
}
/* 天气 / 时钟组件 */
.g-wid{
  margin:13px 7.6% 0;padding:11px 13px;border-radius:17px;position:relative;z-index:1;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 6px 16px -8px rgba(32,42,68,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:10px;
}
.g-wid .wl{flex:1;min-width:0}
.g-wid .wt{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.g-wid .wd{font-size:8.8px;font-weight:600;color:var(--ink-2);margin-top:3px}
.g-wid .wr{text-align:right;flex:none;min-width:34px}
.g-wid .wsun{
  width:20px;height:20px;border-radius:50%;margin:0 0 3px auto;
  background:radial-gradient(circle at 34% 30%,#FFE9A8,#FFB800);
  box-shadow:0 0 12px rgba(255,184,0,.5);
}
.g-wid .wtemp{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.g-wid .wcity{font-size:7.6px;color:var(--ink-3);font-weight:600;line-height:1.3;white-space:nowrap}

/* 应用图标网格（带名字） */
.g-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px 7.8%;padding:18px 8.3% 0;position:relative;z-index:1}
.ga{display:flex;flex-direction:column;align-items:center;gap:5px}
.ga i{
  width:100%;aspect-ratio:1;border-radius:22.5%;position:relative;
  display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(28,38,64,.15);
}
/* 现代桌面图标是平的：不做顶部高光、不做凸起，只留极轻的落影 */
.ga i svg,.g-dock i svg,.sv-drawer .dg .da i svg,.ap-row .ai svg,.dt-hero .di svg{position:relative;z-index:1}
.ga i svg{width:47%;height:47%;display:block}
.ga span{font-size:7.4px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.25;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(255,255,255,.85)}
.ga.badge i::before{
  content:"";position:absolute;top:-1.5px;right:-1.5px;width:9px;height:9px;border-radius:50%;
  background:#FA5151;border:1.6px solid #fff;z-index:3;
}
/* —— 应用图标配色：贴近真实 App，而不是一堆同色方块 —— */
/* ——— 应用图标配色 ———
   真实桌面上的图标来自不同厂商：大多是纯色平面，另有一批是白底彩符号（浏览器/地图/日历/相册）。
   全套统一渐变 + 高光 = 廉价主题包，所以这里一律用纯色，并让白底与深色图标穿插打断单调。 */
:where(.ga i,.g-dock i,.sv-drawer .dg .da i,.ap-row .ai,.dt-hero .di,.pv-apps i,.pv-dock i){color:#fff}
/* 白底 + 彩色符号 */
.ic-browser,.ic-maps,.ic-calendar,.ic-photos{
  background:#fff;box-shadow:0 1px 3px rgba(28,38,64,.15),inset 0 0 0 1px rgba(28,38,64,.05);
}
.ic-browser{color:#1B7BF0}
.ic-maps{color:#12A96F}
.ic-calendar{color:#F03B45}
.ic-photos{color:#FF8A2B}
/* 纯色 + 白符号 */
.ic-message{background:#25C35B}
.ic-music{background:#F0416B}
.ic-store{background:#3E5CE0}
.ic-settings{background:#93A1B5}
.ic-notes{background:#F5A81C}
.ic-camera{background:#2F3B4E}
.ic-files{background:#2B7FE8}
.ic-clock{background:#1B2333}
.ic-weather{background:#2D9CF0}
.ic-calc{background:#3A4356}
.ic-cloud{background:#2589DE}
.ic-wallet{background:#1FA968}
.ic-game{background:#6349EA}
.ic-video{background:#E4402C}
.ic-mail{background:#3590E6}
.gi1{background:linear-gradient(135deg,#3D6BFF,#54A8E3)}
.gi2{background:linear-gradient(135deg,#0FBE7C,#4FD9A8)}
.gi3{background:linear-gradient(135deg,#FF9F43,#FFC06B)}
.gi4{background:linear-gradient(135deg,#5B8CFF,#93B4FF)}
.gi5{background:linear-gradient(135deg,#F2638D,#FF9BB8)}
.gi6{background:linear-gradient(135deg,#2AC3E0,#7FE3F7)}
.gi7{background:linear-gradient(135deg,#2A55E0,#5B8CFF)}
.gi8{background:linear-gradient(135deg,#FFB84D,#FF8A5C)}
.gi9{background:linear-gradient(135deg,#8C7BFF,#B2A6FF)}
.gi10{background:linear-gradient(135deg,#38C7A0,#7FE3C4)}
.gi11{background:linear-gradient(135deg,#FF7E6B,#FFA48F)}
.gi12{background:linear-gradient(135deg,#4C9BFF,#8AC2FF)}

/* 页面指示器 */
.g-dots{display:flex;gap:4px;justify-content:center;margin:14px 0 0;position:relative;z-index:1}
.g-dots i{width:4.5px;height:4.5px;border-radius:50%;background:rgba(16,24,43,.18)}
.g-dots i.on{background:rgba(16,24,43,.42);width:12px;border-radius:3px}

/* Dock */
.g-dock{
  position:absolute;left:5.4%;right:5.4%;bottom:17px;z-index:2;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.78);
  border-radius:21px;padding:9px 3.2%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:7.8%;
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 8px 20px -8px rgba(32,42,68,.2);
}
.g-dock i{
  aspect-ratio:1;border-radius:22.5%;position:relative;display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(28,38,64,.15);
}
.g-dock i svg{width:47%;height:47%;display:block}
/* 手势条 */
.g-bar{position:absolute;left:50%;translate:-50% 0;bottom:7px;width:88px;height:3.5px;border-radius:2px;background:rgba(16,24,43,.26);z-index:3}

/* ---------- Hero 悬浮场景卡 ---------- */
.chip-float{
  position:absolute;z-index:6;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:var(--r-chip);
  padding:10px 15px;box-shadow:var(--shadow-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-weight:700;font-size:13.5px;letter-spacing:-.01em;line-height:1.2;
}
.chip-float small{display:block;font-size:10px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-top:1px}
.chip-float .ic{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none;background:var(--brand);box-shadow:0 5px 12px -3px rgba(61,107,255,.5)}
.chip-float .ic svg{width:16px;height:16px}
.chip-float.c1{left:-14px;top:52px;animation:floaty 6s ease-in-out .3s infinite}
.chip-float.c2{right:-110px;top:288px;animation:floaty 7.4s ease-in-out 1.1s infinite}
.chip-float.c3{left:6px;bottom:56px;animation:floaty 6.8s ease-in-out .6s infinite}
.chip-float.c3 .ic{background:linear-gradient(120deg,#3D6BFF,#54A8E3)}

/* ---------- Marquee ---------- */
.marquee{
  margin:44px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:17px 0;overflow:hidden;background:rgba(255,255,255,.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.marquee-track span i{font-style:normal;color:var(--brand);font-size:11px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:92px 0;position:relative}
.section-head{max-width:680px;margin-bottom:20px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.kicker::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.section-head.center .kicker::after{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.section-head h2{font-size:clamp(30px,3.7vw,45px);font-weight:800;letter-spacing:-.032em;line-height:1.16}
.section-sub{margin-top:14px;font-size:16px;color:var(--ink-2);line-height:1.75}

/* ============================================================
   SCENES —— 六段独立场景
   ============================================================ */
.scene-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:88px 0}
.scene-row+.scene-row{border-top:1px solid var(--line)}
.scene-copy{position:relative}
.scene-copy::before{
  content:attr(data-n);position:absolute;left:-10px;top:-96px;z-index:-1;
  font-size:128px;font-weight:800;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(61,107,255,.115);
  pointer-events:none;user-select:none;
}
.scene-row.flip .scene-copy{order:2}
.scene-row.flip .scene-visual{order:1}
.scene-copy .s-num{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--brand)}
.scene-copy .s-num::after{content:"";width:34px;height:2px;background:var(--brand);border-radius:2px}
.scene-copy h3{font-size:clamp(27px,2.9vw,37px);font-weight:800;letter-spacing:-.028em;line-height:1.22;margin:18px 0 14px}
.scene-copy>p{font-size:15.5px;color:var(--ink-2);line-height:1.85;max-width:32em}
.s-points{margin-top:24px;display:flex;flex-direction:column;gap:11px}
.s-points li{display:flex;gap:10px;align-items:flex-start;font-size:14.2px;color:var(--ink-2);font-weight:500}
.s-points svg{width:18px;height:18px;color:var(--mint);flex:none;margin-top:2px}

.scene-visual{position:relative;height:636px;user-select:none}
.sv-glow{position:absolute;inset:0;pointer-events:none}
.sv-glow::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;left:50%;top:50%;translate:-50% -50%;background:radial-gradient(circle,rgba(61,107,255,.13),rgba(61,107,255,0) 65%)}
.scene-visual .phone{position:absolute}
.sv-main{--w:302;width:calc(var(--w) * 1px);left:50%;top:8px;margin-left:-151px;z-index:3;animation:floaty 7.5s ease-in-out infinite}
.sv-left{width:228px;left:0;top:26px;z-index:2;transform:rotate(-5deg);animation:floaty 8.4s ease-in-out .6s infinite}
.sv-right{width:228px;right:0;top:88px;z-index:3;transform:rotate(4deg);animation:floaty 7.2s ease-in-out .3s infinite}

.fv{
  position:absolute;z-index:6;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.95);border:1px solid #fff;border-radius:var(--r-chip);
  padding:10px 14px;box-shadow:var(--shadow-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  animation:floaty 6.4s ease-in-out infinite;
}
.fv small{display:block;font-size:9.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.fv .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--brand);flex:none}
.fv .ic svg{width:14px;height:14px}
.fv.mint .ic{background:var(--mint)}
.fv.amber .ic{background:var(--amber)}

/* ============================================================
   S1 —— 游戏挂机（浅色白日 RPG）
   ============================================================ */
.scr-game{
  flex:1;position:relative;color:var(--ink);overflow:hidden;
  background:
    radial-gradient(46% 20% at 80% 4%,rgba(255,214,110,.7),transparent 62%),
    linear-gradient(180deg,#9FD0FF 0%,#C4E3FF 26%,#D8EEDD 33%,#A9DC93 46%,#8ACD72 100%);
}
.scr-game::before{ /* 云层 */
  content:"";position:absolute;left:0;right:0;top:0;height:46%;opacity:.9;
  background-image:
    radial-gradient(30px 11px at 20% 22%,#fff,transparent 70%),
    radial-gradient(42px 14px at 60% 14%,#fff,transparent 70%),
    radial-gradient(26px 10px at 86% 30%,#fff,transparent 70%),
    radial-gradient(36px 12px at 40% 34%,rgba(255,255,255,.9),transparent 70%);
  filter:blur(.6px);
}
.scr-game::after{ /* 远山 */
  content:"";position:absolute;left:0;right:0;top:16%;height:78px;
  background:
    radial-gradient(112% 100% at 12% 100%,#8FCB86 46%,transparent 47%),
    radial-gradient(122% 104% at 80% 100%,#7CC076 50%,transparent 51%);
  opacity:.85;
}
/* 草地纹理 + 草丛 */
.scr-game .gm-turf{
  position:absolute;left:0;right:0;top:33%;bottom:0;z-index:1;
  background:
    radial-gradient(46px 16px at 18% 22%,rgba(255,255,255,.12),transparent 70%),
    radial-gradient(54px 18px at 76% 44%,rgba(255,255,255,.1),transparent 70%),
    radial-gradient(40px 14px at 42% 74%,rgba(40,90,30,.07),transparent 70%);
}
.scr-game .gm-bush{
  position:absolute;z-index:1;width:15px;height:9px;border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg,#7FC46D,#5FA854);opacity:.75;
}
.scr-game .gm-bush::after{
  content:"";position:absolute;left:-5px;bottom:0;width:11px;height:7px;border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg,#8ACB78,#66AE5B);
}
.scr-game .gm-rock{
  position:absolute;z-index:1;width:11px;height:7px;border-radius:50% 50% 42% 42%;
  background:linear-gradient(180deg,#C3CBD6,#9AA5B4);opacity:.7;
}
/* 远处的小怪 */
.scr-game .gm-far{position:absolute;z-index:1;width:11px;height:13px;opacity:.55}
.scr-game .gm-far::before{content:"";position:absolute;inset:4px 0 0;border-radius:3px;background:#7E8B9C}
.scr-game .gm-far::after{content:"";position:absolute;top:0;left:2px;width:7px;height:7px;border-radius:2.5px;background:#909CAC}
.gm-top{display:flex;gap:8px;align-items:center;padding:9px 11px 0;position:relative;z-index:4}
.gm-av{
  width:29px;height:29px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 36% 30%,#FFE6A8,#F0A02F);
  border:2px solid #fff;box-shadow:0 3px 8px rgba(200,130,0,.35);
}
.gm-av::after{
  content:"47";position:absolute;right:-5px;bottom:-4px;font-size:6.5px;font-weight:800;
  background:#2A55E0;color:#fff;border-radius:5px;padding:1px 3.5px;border:1.2px solid #fff;line-height:1.2;
}
.gm-bars{flex:1;min-width:0}
.gm-bars i{
  display:block;height:5.5px;border-radius:3px;background:rgba(255,255,255,.82);margin:3px 0;
  position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(32,42,68,.12);
}
.gm-bars i::after{content:"";position:absolute;inset:0;border-radius:3px}
.gm-bars .b1::after{right:30%;background:linear-gradient(90deg,#F04A5E,#FF8A6B)}
.gm-bars .b2::after{right:12%;background:linear-gradient(90deg,#3D6BFF,#6FC4FF)}
.gm-gold{
  display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;color:#8A5A00;
  white-space:nowrap;background:rgba(255,255,255,.85);border-radius:7px;padding:4px 8px;
  box-shadow:0 2px 6px rgba(32,42,68,.12);flex:none;
}
.gm-gold::before{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#F0A202)}
.gm-boss{position:absolute;top:46px;left:34px;right:34px;z-index:4}
.gm-boss span{display:block;font-size:7px;font-weight:800;color:#7A4A00;margin-bottom:2.5px;text-align:center;letter-spacing:.05em;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.gm-boss i{display:block;height:6.5px;border-radius:4px;background:rgba(255,255,255,.85);overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(32,42,68,.14)}
.gm-boss i::after{content:"";position:absolute;inset:0 38% 0 0;border-radius:4px;background:linear-gradient(90deg,#F04A5E,#FF9F43)}
.gm-quest{
  position:absolute;left:9px;top:78px;z-index:4;width:104px;
  background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.95);border-radius:9px;
  padding:7px 8px;font-size:7px;color:var(--ink-2);line-height:1.75;
  box-shadow:0 5px 14px -5px rgba(32,42,68,.24);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.gm-quest b{color:#9A6200;font-size:7.8px;display:block;margin-bottom:3px;letter-spacing:.02em}
.gm-quest em{font-style:normal;display:flex;gap:4px;align-items:flex-start}
.gm-quest i{display:inline-block;width:6px;height:6px;border-radius:2px;border:1.2px solid #0FBE7C;flex:none;margin-top:3px}
.gm-quest i.done{background:#0FBE7C;position:relative}
.gm-arena{position:absolute;left:0;right:0;top:36%;bottom:84px;z-index:2}
.gm-arena::before{content:"";position:absolute;left:50%;top:56%;translate:-50% -50%;width:190px;height:58px;border-radius:50%;background:radial-gradient(ellipse,rgba(52,140,66,.34),transparent 70%)}
/* 角色 */
.gm-hero2{position:absolute;left:23%;top:38%;width:32px;height:38px;z-index:3}
.gm-hero2::before{content:"";position:absolute;left:3px;bottom:4px;width:24px;height:21px;border-radius:9px 9px 7px 7px;background:linear-gradient(180deg,#FFD76E,#EF9E27);box-shadow:0 7px 14px -4px rgba(200,130,0,.5)}
.gm-hero2::after{content:"";position:absolute;left:7.5px;top:0;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFF6E0,#F3C271);box-shadow:inset 0 -1px 2px rgba(180,120,20,.3)}
.gm-shadow{position:absolute;left:23%;top:38%;margin:34px 0 0 3px;width:33px;height:8px;border-radius:50%;background:rgba(30,70,25,.24);filter:blur(1.4px);z-index:2}
.gm-slash{
  position:absolute;left:40%;top:32%;width:46px;height:46px;border-radius:50%;z-index:3;
  border:3.5px solid transparent;border-top-color:rgba(255,236,170,.95);border-right-color:rgba(255,200,80,.6);
  transform:rotate(26deg);filter:drop-shadow(0 0 5px rgba(255,200,80,.7));
}
.gm-foe{position:absolute;right:17%;top:26%;width:29px;height:34px;z-index:3}
.gm-foe::before{content:"";position:absolute;left:0;right:0;bottom:2px;top:9px;border-radius:8px;background:linear-gradient(180deg,#F2638D,#C2325C);box-shadow:0 7px 14px -4px rgba(180,40,80,.45)}
.gm-foe::after{content:"";position:absolute;left:4px;top:0;width:19px;height:12px;border-radius:7px 7px 2px 2px;background:#A32C55}

.gm-dmg{position:absolute;right:13%;top:12%;font-size:13px;font-weight:800;color:#E03149;text-shadow:0 1px 0 #fff,0 2px 4px rgba(255,255,255,.9);z-index:4}
.gm-dmg2{position:absolute;right:33%;top:27%;font-size:9px;font-weight:800;color:#B07200;text-shadow:0 1px 0 #fff,0 2px 4px rgba(255,255,255,.9);z-index:4}
.gm-drop{
  position:absolute;left:9px;bottom:92px;z-index:4;
  background:rgba(255,250,235,.92);border:1px solid #F3DFAE;border-radius:7px;
  font-size:7px;color:#8A5A00;padding:4px 8px;font-weight:700;
  box-shadow:0 4px 10px -3px rgba(154,98,0,.25);
}
.gm-chat{
  position:absolute;left:9px;right:9px;bottom:48px;z-index:4;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:8px;padding:5px 8px;
  font-size:7px;color:var(--ink-2);line-height:1.7;
  box-shadow:0 4px 10px -3px rgba(32,42,68,.16);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.gm-chat b{color:var(--brand);font-weight:800}
.gm-skills{position:absolute;right:8px;bottom:8px;width:78px;height:74px;z-index:4}
.gm-skills i{
  position:absolute;width:23px;height:23px;border-radius:50%;display:block;
  background:rgba(255,255,255,.88);border:1.5px solid #fff;
  box-shadow:0 3px 8px -2px rgba(32,42,68,.26);
}
.gm-skills i::after{content:"";position:absolute;inset:6.5px;border-radius:50%;background:#CFDAEC}
.gm-skills i.k0{right:52px;bottom:8px}
.gm-skills i.k1{right:32px;bottom:36px;background:linear-gradient(135deg,#FFB84D,#F0702F)}
.gm-skills i.k1::after{background:rgba(255,255,255,.88)}
.gm-skills i.k3{right:4px;bottom:52px;background:linear-gradient(135deg,#8C7BFF,#5F4BD8)}
.gm-skills i.k3::after{background:rgba(255,255,255,.88)}
.gm-skills i.k2{
  right:2px;bottom:2px;width:36px;height:36px;
  background:linear-gradient(135deg,#4C86FF,#2A55E0);border-color:#fff;
  box-shadow:0 6px 14px -3px rgba(42,85,224,.6);
}
.gm-skills i.k2::after{inset:10px;background:rgba(255,255,255,.92)}
.gm-joy{
  position:absolute;left:11px;bottom:12px;width:44px;height:44px;border-radius:50%;z-index:4;
  background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 5px 14px -4px rgba(32,42,68,.2);
}
.gm-joy::after{content:"";position:absolute;inset:13px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 5px rgba(32,42,68,.2)}

/* ============================================================
   S2 —— 聊天应用（通用聊天软件，非特定品牌）
   ============================================================ */
.scr-chat{flex:1;display:flex;flex-direction:column;background:#fff;min-height:0}
.ct-bar{
  display:flex;align-items:center;gap:8px;padding:6px 14px 9px;flex:none;
  border-bottom:1px solid #F1F3F8;
}
.ct-bar .tl{flex:1;min-width:0}
.ct-bar b{font-size:14px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.2}
.ct-bar .acc{
  display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;
  color:var(--ink-3);margin-top:1.5px;
}
.ct-bar .acc i{width:4.5px;height:4.5px;border-radius:50%;background:var(--mint);flex:none}
.ct-bar .acts{display:flex;gap:9px;color:var(--ink-2);flex:none}
.ct-bar .acts svg{width:14px;height:14px}
.ct-search{
  margin:8px 12px 4px;background:#F3F4F8;border-radius:9px;padding:6px 10px;
  font-size:8.6px;color:var(--ink-3);display:flex;align-items:center;gap:6px;font-weight:500;flex:none;
}
.ct-search svg{width:10px;height:10px}
.ct-list{flex:1;overflow:hidden;min-height:0}
.ct-item{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;position:relative}
.ct-item+.ct-item::before{content:"";position:absolute;left:51px;right:0;top:0;height:1px;background:#F3F4F8}
.ct-item.pin{background:#F8FAFF}
.ct-av{
  width:32px;height:32px;border-radius:9px;flex:none;position:relative;
  display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;
  box-shadow:0 2px 6px -2px rgba(32,42,68,.28);letter-spacing:-.02em;
}
.ct-badge{
  position:absolute;top:-5px;right:-5px;min-width:14px;height:14px;border-radius:7px;
  background:#FA5151;color:#fff;font-size:7.6px;font-weight:800;font-style:normal;
  display:grid;place-items:center;padding:0 4px;border:1.6px solid #fff;z-index:2;line-height:1;
}
.ct-badge.dot{min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}
.ct-tt{flex:1;min-width:0;padding-top:1px}
.ct-hd{display:flex;align-items:baseline;gap:6px}
.ct-hd b{font-size:10.5px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-hd .t{font-size:7.8px;color:var(--ink-3);flex:none;font-weight:500}
.ct-msg{font-size:8.6px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-weight:500}
.ct-msg em{font-style:normal;color:#E8960C}
.ct-tabs{margin-top:auto;display:flex;border-top:1px solid #F1F3F8;padding:7px 0 10px;background:#FBFCFE;flex:none}
.ct-tabs div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7.2px;color:#AEB5C6;font-weight:600;position:relative}
.ct-tabs svg{width:16px;height:16px}
.ct-tabs .on{color:var(--brand)}
.ct-tabs .on i{position:absolute;top:-2px;right:26%;width:6px;height:6px;border-radius:50%;background:#FA5151;border:1.3px solid #FBFCFE}
.av1{background:linear-gradient(135deg,#3D6BFF,#54A8E3)}
.av2{background:linear-gradient(135deg,#5B8CFF,#93B4FF)}
.av3{background:linear-gradient(135deg,#2AC3E0,#7FE3F7)}
.av4{background:linear-gradient(135deg,#2A55E0,#4C86FF)}
.av5{background:linear-gradient(135deg,#0FBE7C,#4FD9A8)}
.av6{background:linear-gradient(135deg,#FF9F43,#FFC06B)}
.av7{background:linear-gradient(135deg,#F2638D,#FF9BB8)}
.av8{background:linear-gradient(135deg,#8C7BFF,#B2A6FF)}

/* 对话详情（气泡） */
.scr-conv{flex:1;display:flex;flex-direction:column;background:#F2F4F9;min-height:0}
.cv-bar{
  display:flex;align-items:center;gap:8px;padding:6px 12px 8px;flex:none;
  background:#fff;border-bottom:1px solid #EDEFF5;
}
.cv-bar .bk{width:14px;height:14px;color:var(--ink-2);flex:none}
.cv-bar .ti{flex:1;min-width:0;text-align:center}
.cv-bar .ti b{font-size:11px;font-weight:700;display:block;line-height:1.2}
.cv-bar .ti span{font-size:7.5px;color:var(--ink-3);font-weight:500}
.cv-bar .mo{width:14px;height:14px;color:var(--ink-2);flex:none}
.cv-body{flex:1;padding:10px 11px 0;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.cv-day{align-self:center;font-size:7.2px;color:#A9B0C2;background:rgba(16,24,43,.055);border-radius:5px;padding:2.5px 8px;font-weight:600}
.cv-msg{display:flex;gap:7px;align-items:flex-start;max-width:84%}
.cv-msg .av{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:800}
.cv-bub{
  border-radius:11px;padding:7px 9px;font-size:8.8px;line-height:1.55;font-weight:500;
  box-shadow:0 1px 3px rgba(32,42,68,.07);position:relative;
}
.cv-msg.in .cv-bub{background:#fff;color:var(--ink);border-top-left-radius:4px}
.cv-msg.out{align-self:flex-end;flex-direction:row-reverse}
.cv-msg.out .cv-bub{background:var(--brand);color:#fff;border-top-right-radius:4px;box-shadow:0 3px 8px -2px rgba(61,107,255,.4)}
.cv-img{
  width:96px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#BFE0FF,#8FC5F5 55%,#79D4B0);
  box-shadow:0 3px 9px -3px rgba(32,42,68,.3);
}
.cv-img::before{content:"";position:absolute;left:12px;top:11px;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#FFF0BE,#FFC83D);box-shadow:0 0 10px rgba(255,200,60,.6)}
.cv-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:radial-gradient(110% 100% at 22% 100%,#5FA86E 48%,transparent 49%),radial-gradient(120% 100% at 82% 100%,#4E9760 52%,transparent 53%)}
.cv-input{
  margin-top:auto;flex:none;display:flex;align-items:center;gap:7px;padding:8px 11px 11px;
  background:#fff;border-top:1px solid #EDEFF5;
}
.cv-input .vo{width:16px;height:16px;color:var(--ink-3);flex:none}
.cv-input .fld{flex:1;height:24px;border-radius:12px;background:#F3F4F8;display:flex;align-items:center;padding:0 10px;font-size:8.2px;color:#B4BAC9;font-weight:500}
.cv-input .se{width:16px;height:16px;color:var(--ink-3);flex:none}

/* ============================================================
   S3 —— 隐私空间（应用抽屉）
   ============================================================ */
.sv-drawer{
  position:absolute;right:0;top:150px;z-index:5;width:190px;
  border-radius:20px;padding:4px 13px 15px;color:var(--ink);
  background:rgba(255,255,255,.97);border:1px solid #fff;
  box-shadow:0 30px 58px -18px rgba(32,42,68,.32);
  animation:floaty 7s ease-in-out 1s infinite;
}
.sv-drawer .dh{display:flex;align-items:center;gap:7px;padding:11px 2px 9px;font-size:11.5px;font-weight:800;letter-spacing:-.02em}
.sv-drawer .dh svg{width:14px;height:14px;color:var(--brand);flex:none}
.sv-drawer .dh small{margin-left:auto;font-size:7.5px;color:#0A7A52;font-weight:800;background:#E2F8EF;border-radius:5px;padding:2.5px 7px;letter-spacing:0}
.sv-drawer .ds{
  margin:0 2px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;font-size:8px;color:var(--ink-3);display:flex;gap:6px;align-items:center;font-weight:500;
}
.sv-drawer .ds svg{width:10px;height:10px;flex:none}
.sv-drawer .dg{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 9px;padding:0 2px}
.sv-drawer .dg .da{display:flex;flex-direction:column;align-items:center;gap:4px}
.sv-drawer .dg .da i{
  width:100%;aspect-ratio:1;border-radius:22.5%;position:relative;
  display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(28,38,64,.15);
}
.sv-drawer .dg .da i svg{width:47%;height:47%;display:block}
.sv-drawer .dg .da i::before{
  content:"";position:absolute;right:-2.5px;bottom:-2.5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:1.6px solid #0FBE7C;z-index:2;
}
.sv-drawer .dg .da span{font-size:6.6px;font-weight:600;color:var(--ink-3);text-align:center;line-height:1.15}
.sv-drawer .dg .add i{background:var(--bg-2);border:1px dashed #C3CAD9;box-shadow:none;display:grid;place-items:center}
.sv-drawer .dg .add i::before{display:none}
.sv-drawer .dg .add i em{font-style:normal;color:#B4BAC9;font-size:13px;font-weight:400;line-height:1}

/* ============================================================
   S4 —— 安装弹窗（拟真系统安装器）
   ============================================================ */
.scr-isheet{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}
.is-dim{
  flex:1;position:relative;min-height:0;
  background:linear-gradient(180deg,#EDF1F9,#E6EBF6);
}
.is-dim .fmgr{position:absolute;inset:0;padding:8px 12px 0;display:flex;flex-direction:column;gap:7px;opacity:.55}
.is-dim .fmgr .fh{font-size:9.5px;font-weight:800;color:var(--ink-2);padding:2px 2px 4px}
.is-dim .fmgr .fr{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.is-dim .fmgr .fr i{width:20px;height:20px;border-radius:6px;background:var(--bg-2);flex:none}
.is-dim .fmgr .fr i.apk{background:linear-gradient(135deg,#3D6BFF,#54A8E3)}
.is-dim .fmgr .fr .fl{flex:1}
.is-dim .fmgr .fr .fl b{display:block;height:5px;width:56%;border-radius:3px;background:#DDE3EF}
.is-dim .fmgr .fr .fl span{display:block;height:4px;width:32%;border-radius:2px;background:#E8ECF5;margin-top:4px}
.is-sheet{
  margin:0 8px 10px;background:#fff;border-radius:20px;padding:15px 14px 12px;
  box-shadow:0 -14px 40px -12px rgba(16,24,43,.22),0 2px 6px rgba(16,24,43,.06);
  position:relative;z-index:2;flex:none;
}
.is-sheet::before{content:"";position:absolute;left:50%;top:7px;translate:-50% 0;width:32px;height:3.5px;border-radius:2px;background:#E2E7F0}
.is-h{display:flex;gap:10px;align-items:center;margin-top:5px}
.is-ic{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,#3D6BFF,#54A8E3);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 5px 12px -3px rgba(61,107,255,.45);
}
.is-ic svg{width:18px;height:18px}
.is-h b{font-size:11.5px;display:block;font-weight:800;letter-spacing:-.02em}
.is-h span{font-size:8.4px;color:var(--ink-3);display:block;margin-top:1.5px;font-weight:500}
.is-perms{margin:11px 0 0;display:flex;flex-direction:column;gap:7px}
.is-perms div{display:flex;align-items:center;gap:7px;font-size:8.6px;color:var(--ink-2);font-weight:600}
.is-perms svg{width:12px;height:12px;color:var(--ink-3);flex:none}
.is-perms .tagx{margin-left:auto;font-size:7.2px;color:var(--brand);background:rgba(61,107,255,.08);border:1px solid rgba(61,107,255,.16);border-radius:4px;padding:1.5px 6px;font-weight:700}
.is-bar{margin-top:12px;height:6px;border-radius:4px;background:var(--bg-2);overflow:hidden}
.is-bar i{display:block;height:100%;width:62%;border-radius:4px;background:linear-gradient(90deg,#3D6BFF,#54A8E3);animation:install 3.2s ease-in-out infinite}
@keyframes install{0%{width:8%}55%{width:78%}80%{width:92%}100%{width:8%}}
.is-pct{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:7.8px;color:var(--ink-3);font-weight:600}
.is-pct b{color:var(--brand);font-weight:800}
.is-warn{
  margin-top:10px;display:flex;gap:7px;align-items:flex-start;
  background:#FFF8EC;border:1px solid #F5E3BC;border-radius:10px;padding:8px 10px;
  font-size:8.2px;font-weight:600;color:#9A6200;line-height:1.5;
}
.is-warn svg{width:12px;height:12px;flex:none;margin-top:.5px}
.is-actions{display:flex;gap:8px;margin-top:12px}
.is-actions span{flex:1;text-align:center;font-size:10.5px;font-weight:700;border-radius:11px;padding:9px 0}
.is-actions .no{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.is-actions .ok{background:var(--brand);color:#fff;box-shadow:0 6px 14px -5px rgba(61,107,255,.5)}

/* ============================================================
   S5 —— 经典塔防草坪
   ============================================================ */
.scr-td{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,#BFE4FF 0%,#DCF0FF 26%,#C6E6BE 27%,#A6D694 100%)}
.td-hud{position:absolute;top:8px;left:9px;right:9px;display:flex;gap:6px;align-items:flex-start;z-index:4}
.td-sun{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  background:rgba(255,255,255,.9);border-radius:9px;padding:6px 9px;font-size:9.5px;font-weight:800;color:#8A5A00;
  box-shadow:0 3px 9px -2px rgba(60,90,40,.25);
}
.td-sun::before{content:"";width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFEFB0,#FFB800);box-shadow:0 0 8px rgba(255,184,0,.6)}
.td-cards{display:flex;gap:5px;flex:1;justify-content:flex-end}
.td-cards i{
  width:25px;height:32px;border-radius:6px;background:rgba(255,255,255,.9);
  box-shadow:0 3px 9px -2px rgba(60,90,40,.25);position:relative;
  border:1px solid rgba(255,255,255,.9);
}
.td-cards i::after{content:"";position:absolute;left:7px;right:7px;top:5px;height:10px;border-radius:50% 50% 40% 40%;box-shadow:0 1px 2px rgba(60,90,40,.25)}
.td-cards i::before{content:"";position:absolute;left:4.5px;right:4.5px;bottom:4px;height:8px;border-radius:2px;background:#F0F4FA;box-shadow:inset 0 0 0 1px rgba(32,42,68,.07)}
.td-cards .c1::after{background:radial-gradient(circle at 38% 32%,#FFE9A8,#F5A623)}
.td-cards .c2::after{background:radial-gradient(circle at 38% 32%,#9BE15D,#3E9E57)}
.td-cards .c3::after{background:radial-gradient(circle at 38% 32%,#FFB3C9,#E2547E)}
.td-cards .c4::after{background:radial-gradient(circle at 38% 32%,#BFE3FF,#5B9BE0)}
.td-lawn{
  position:absolute;left:8px;right:8px;top:48px;bottom:44px;border-radius:10px;overflow:hidden;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%),
    linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%);
  background-size:28px 28px;background-position:0 0,14px 14px;
  background-color:#86C775;
  box-shadow:inset 0 2px 10px rgba(40,80,30,.28),inset 0 0 0 1px rgba(255,255,255,.18);
}
.td-lawn::after{ /* 行分隔 */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 24.5%,rgba(40,80,30,.07) 24.5%,rgba(40,80,30,.07) 25%);
}
/* 植物 */
.td-plant{position:absolute;width:17px;height:23px;z-index:2}
.td-plant::before{content:"";position:absolute;left:6px;bottom:0;width:5px;height:12px;border-radius:3px;background:linear-gradient(180deg,#4FAE63,#33804A)}
.td-plant::after{content:"";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFEFB0,#F5A623);box-shadow:0 2px 6px rgba(120,80,0,.3)}
.td-shroom::after{background:radial-gradient(circle at 34% 30%,#B6EE86,#3E9E57);box-shadow:0 2px 6px rgba(30,90,40,.3)}
.td-shooter::after{background:radial-gradient(circle at 34% 30%,#8FE07A,#3E9E57);border-radius:52% 52% 46% 46%}
/* 僵尸 */
.td-zed{position:absolute;width:16px;height:26px;z-index:2}
.td-zed::before{content:"";position:absolute;left:1px;right:1px;bottom:1px;top:9px;border-radius:4px 4px 5px 5px;background:linear-gradient(180deg,#7C8B9D,#44505F);box-shadow:0 3px 6px rgba(20,30,40,.35)}
.td-zed::after{content:"";position:absolute;top:0;left:2.5px;width:11px;height:11px;border-radius:4px;background:linear-gradient(180deg,#94A3B4,#5C6A7A);box-shadow:inset -1px -1px 2px rgba(0,0,0,.15)}
.td-pea{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#E8FFC4,#4CAF50);box-shadow:0 0 8px rgba(120,220,80,.95),0 1px 2px rgba(20,60,10,.3);z-index:3}
.td-mower{
  position:absolute;left:2px;width:11px;height:13px;border-radius:3px;z-index:2;
  background:linear-gradient(180deg,#F58DAB,#C93A66);box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.td-mower::after{content:"";position:absolute;left:1.5px;right:1.5px;top:3px;height:3px;border-radius:1px;background:rgba(255,255,255,.5)}
.td-wave{
  position:absolute;left:50%;translate:-50% 0;top:52px;z-index:4;
  background:rgba(255,255,255,.85);border-radius:6px;padding:3px 9px;
  font-size:7px;font-weight:800;color:#B03A3A;letter-spacing:.06em;
  box-shadow:0 3px 8px -2px rgba(60,90,40,.2);
}
.td-bar{position:absolute;left:8px;right:8px;bottom:10px;display:flex;gap:6px;align-items:center;z-index:4}
.td-bar i{flex:1;height:26px;border-radius:8px;background:rgba(255,255,255,.82);box-shadow:0 3px 8px -2px rgba(60,90,40,.18)}
.td-bar .prog{flex:2;position:relative;overflow:hidden}
.td-bar .prog::after{content:"";position:absolute;left:3px;top:9px;height:8px;width:38%;border-radius:4px;background:linear-gradient(90deg,#5CB85C,#9BE15D)}
.td-lvl{position:absolute;right:9px;bottom:42px;z-index:4;font-size:7px;font-weight:800;color:rgba(30,70,25,.62);letter-spacing:.08em}

/* ============================================================
   S6 —— 小窗 / 悬浮球
   ============================================================ */
.pip-screen{flex:1;position:relative;display:flex;flex-direction:column;min-height:0;background:#fff}
.pip-app{flex:1;display:flex;flex-direction:column;min-height:0}
.pip-nav{display:flex;align-items:center;gap:8px;padding:6px 13px 9px;border-bottom:1px solid #F1F3F8;flex:none}
.pip-nav b{font-size:13px;font-weight:800;letter-spacing:-.02em;flex:1}
.pip-nav svg{width:14px;height:14px;color:var(--ink-2)}
.pip-feed{flex:1;padding:10px 12px 12px;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.pip-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;box-shadow:0 2px 6px -2px rgba(32,42,68,.06)}
.pip-card .ch{display:flex;gap:7px;align-items:center}
.pip-card .ch i{width:22px;height:22px;border-radius:50%;flex:none;background:linear-gradient(135deg,#5B8CFF,#93B4FF)}
.pip-card .ch .cl{flex:1}
.pip-card .ch .cl b{display:block;height:5px;width:44%;border-radius:3px;background:#DDE3EF}
.pip-card .ch .cl span{display:block;height:4px;width:26%;border-radius:2px;background:#E8ECF5;margin-top:4px}
.pip-card .cb{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.pip-card .cb i{display:block;height:5px;border-radius:3px;background:#EDF0F7}
.pip-card .cb i:nth-child(2){width:82%}
.pip-card .cb i:nth-child(3){width:54%}
.pip-card .cimg{margin-top:8px;height:54px;border-radius:9px;background:linear-gradient(140deg,#DCEBFF,#C3DCFA 60%,#CFEEDF)}
.pip-win{
  position:absolute;right:13px;top:62px;width:108px;border-radius:14px;overflow:hidden;z-index:5;
  border:2px solid #fff;box-shadow:0 18px 34px -10px rgba(32,42,68,.38);
}
.pip-win .pip-v{
  aspect-ratio:9/15;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#9FD0FF 0%,#C4E3FF 26%,#A9DC93 40%,#8ACD72 100%);
}
.pip-win .pip-v::before{
  content:"";position:absolute;left:0;right:0;top:24%;height:26px;
  background:radial-gradient(112% 100% at 16% 100%,#8FCB86 46%,transparent 47%),radial-gradient(120% 104% at 82% 100%,#7CC076 50%,transparent 51%);
  opacity:.85;
}
.pip-win .pip-v::after{
  content:"";position:absolute;left:26%;top:56%;width:22px;height:7px;border-radius:50%;
  background:rgba(30,70,25,.22);filter:blur(1px);
}
.pip-win .pip-v .vh{position:absolute;left:6px;right:6px;top:6px;display:flex;gap:4px;align-items:center}
.pip-win .pip-v .vh i{height:3.5px;border-radius:2px;background:rgba(255,255,255,.85);flex:1;position:relative;overflow:hidden}
.pip-win .pip-v .vh i::after{content:"";position:absolute;inset:0 34% 0 0;border-radius:2px;background:#F04A5E}
.pip-win .pip-v .vr{
  position:absolute;left:28%;top:46%;width:19px;height:22px;
}
.pip-win .pip-v .vr::before{content:"";position:absolute;left:2px;bottom:2px;width:15px;height:13px;border-radius:6px;background:linear-gradient(180deg,#FFD76E,#EF9E27);box-shadow:0 4px 9px -2px rgba(200,130,0,.45)}
.pip-win .pip-v .vr::after{content:"";position:absolute;left:4.5px;top:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFF6E0,#F3C271)}
.pip-win .pip-v .ve{position:absolute;right:24%;top:38%;width:14px;height:16px;border-radius:5px;background:linear-gradient(180deg,#F2638D,#C2325C)}
.pip-win .pip-v .vt{
  position:absolute;left:5px;right:5px;bottom:5px;border-radius:5px;
  background:rgba(255,255,255,.8);font-size:5.6px;font-weight:800;color:#8A5A00;
  padding:2.5px 5px;text-align:center;letter-spacing:.02em;
}
.pip-win .pip-x{
  position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;
  background:rgba(15,18,38,.5);color:#fff;font-size:9px;display:grid;place-items:center;font-style:normal;z-index:3;
}
.float-ball{
  position:absolute;left:14px;top:178px;width:40px;height:40px;border-radius:50%;z-index:6;
  background:rgba(16,24,43,.86);display:grid;place-items:center;
  box-shadow:0 10px 22px -6px rgba(15,18,44,.5);border:1.5px solid rgba(255,255,255,.35);
  animation:floaty 5s ease-in-out infinite;
}
.float-ball svg{width:18px;height:18px;color:#fff}
.pip-panel{
  position:absolute;left:14px;top:228px;z-index:6;width:152px;
  background:rgba(255,255,255,.97);border:1px solid #fff;border-radius:14px;padding:10px;
  box-shadow:0 18px 36px -12px rgba(32,42,68,.3);
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.pip-panel .pp{display:flex;flex-direction:column;align-items:center;gap:4px}
.pip-panel .pp i{
  width:100%;aspect-ratio:1;border-radius:10px;background:rgba(61,107,255,.07);
  border:1px solid rgba(61,107,255,.14);display:grid;place-items:center;color:var(--brand);font-style:normal;
}
.pip-panel .pp i svg{width:14px;height:14px}
.pip-panel .pp span{font-size:6.4px;font-weight:600;color:var(--ink-3);letter-spacing:-.01em}

/* ============================================================
   双机对比版式：真机 ✕  /  虚拟机 ✓
   ============================================================ */
.cmp-tag{
  position:absolute;z-index:7;left:50%;translate:-50% 0;bottom:-14px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:11px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 6px 16px -6px rgba(32,42,68,.26);
}
.cmp-tag i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex:none}
.cmp-tag i svg{width:9px;height:9px;color:#fff}
.cmp-tag.no{color:#B3283C}
.cmp-tag.no i{background:#F04A5E}
.cmp-tag.yes{color:#0A7A52}
.cmp-tag.yes i{background:var(--mint)}
.sv-left .cmp-tag,.sv-right .cmp-tag{bottom:-13px}

/* ============================================================
   S1 —— 真机锁屏 + VMOS+ 常驻通知
   ============================================================ */
.scr-lock{
  flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(84% 40% at 78% 2%,rgba(122,166,255,.5),transparent 62%),
    radial-gradient(70% 34% at 8% 30%,rgba(84,168,227,.34),transparent 60%),
    linear-gradient(180deg,#E8F0FF 0%,#DCE8FC 44%,#E9EEF9 100%);
}
.lk-time{margin:26px 0 0;text-align:center;font-size:52px;font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.lk-date{text-align:center;font-size:10.5px;font-weight:600;color:var(--ink-2);margin-top:5px}
.lk-notis{margin:18px 11px 0;display:flex;flex-direction:column;gap:7px}
.lk-noti{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:15px;
  padding:9px 11px;box-shadow:0 6px 16px -8px rgba(32,42,68,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lk-noti.now{background:rgba(255,255,255,.94);box-shadow:0 10px 22px -8px rgba(61,107,255,.3)}
.lk-nh{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.lk-nh .lk-ico{
  width:15px;height:15px;border-radius:5px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#5A9BFF,#2A55E0);
}
.lk-nh .lk-ico svg{width:9px;height:9px;color:#fff}
.lk-nh span{font-size:8px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.lk-nh em{margin-left:auto;font-size:7.5px;color:var(--ink-3);font-style:normal;font-weight:600}
.lk-noti b{display:block;font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.lk-noti p{font-size:8.4px;color:var(--ink-2);margin-top:2px;font-weight:500}
.lk-run{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  background:#E2F8EF;border-radius:5px;padding:2.5px 7px;
  font-size:7.4px;font-weight:800;color:#0A7A52;
}
.lk-run::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--mint);box-shadow:0 0 4px var(--mint)}
.lk-noti.dim{background:rgba(255,255,255,.6);box-shadow:none}
.lk-noti.dim b,.lk-noti.dim p{color:var(--ink-3)}
.lk-foot{
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  padding:0 26px 16px;
}
.lk-foot i{
  width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.62);
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lk-foot i svg{width:13px;height:13px}
.lk-bar{width:86px;height:3.5px;border-radius:2px;background:rgba(16,24,43,.24);margin:0 auto 7px}

/* ============================================================
   S3 —— 应用管理列表（真机干净 / 虚拟机满载）
   ============================================================ */
.scr-apps{flex:1;display:flex;flex-direction:column;background:var(--muted);min-height:0}
.ap-bar{
  display:flex;align-items:center;gap:8px;padding:7px 13px 9px;flex:none;background:#fff;
  border-bottom:1px solid #EFF1F7;
}
.ap-bar .tl{flex:1;min-width:0}
.ap-bar b{font-size:13px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.2}
.ap-bar span{font-size:8px;color:var(--ink-3);font-weight:600}
.ap-bar .sv{width:14px;height:14px;color:var(--ink-2);flex:none}
.ap-seg{display:flex;gap:6px;padding:9px 12px 4px;flex:none}
.ap-seg span{
  font-size:8.4px;font-weight:700;color:var(--ink-3);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}
.ap-seg span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ap-list{flex:1;padding:5px 12px 0;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
.ap-row{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:8px 10px;box-shadow:0 2px 5px -2px rgba(32,42,68,.06);
}
.ap-row .ai{
  width:29px;height:29px;border-radius:22.5%;flex:none;display:grid;place-items:center;
  box-shadow:0 3px 7px -2px rgba(32,42,68,.26);
}
.ap-row .ai svg{width:50%;height:50%}
.ap-row .at{flex:1;min-width:0}
.ap-row .at b{display:block;font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.ap-row .at span{display:block;font-size:8px;color:var(--ink-3);font-weight:500;margin-top:1px}
.ap-lock{
  flex:none;display:inline-flex;align-items:center;gap:3px;
  font-size:7.2px;font-weight:800;color:#0A7A52;background:#E2F8EF;border-radius:5px;padding:2.5px 6px;
}
.ap-lock svg{width:8px;height:8px}
.ap-sys{flex:none;font-size:7.2px;font-weight:700;color:var(--ink-3);background:var(--bg-2);border-radius:5px;padding:2.5px 6px}
.ap-empty{
  margin:14px 12px 0;border:1px dashed #D3DAE8;border-radius:13px;padding:18px 12px;
  text-align:center;color:var(--ink-3);
}
.ap-empty svg{width:20px;height:20px;color:#C3CAD9;margin-bottom:6px}
.ap-empty b{display:block;font-size:9.5px;font-weight:700;color:var(--ink-2)}
.ap-empty span{font-size:8px;font-weight:500}

/* ============================================================
   S5 —— 安装失败对话框 / 应用详情运行中
   ============================================================ */
.scr-err{flex:1;position:relative;display:flex;flex-direction:column;min-height:0;background:var(--muted)}
.er-dim{flex:1;position:relative;min-height:0;padding:10px 12px;display:flex;flex-direction:column;gap:8px;opacity:.45}
.er-dim .eh{display:flex;gap:9px;align-items:center}
.er-dim .eh i{width:34px;height:34px;border-radius:23%;background:linear-gradient(140deg,#C9D3E5,#9FADC4);flex:none}
.er-dim .eh .el{flex:1}
.er-dim .eh .el b{display:block;height:7px;width:52%;border-radius:4px;background:#D7DEEB}
.er-dim .eh .el span{display:block;height:5px;width:32%;border-radius:3px;background:#E4E9F3;margin-top:5px}
.er-dim .eb{height:9px;border-radius:5px;background:#E4E9F3}
.er-dim .eb.s{width:70%}
.er-dialog{
  position:absolute;left:14px;right:14px;top:50%;translate:0 -50%;z-index:3;
  background:#fff;border-radius:18px;padding:18px 16px 14px;text-align:center;
  box-shadow:0 22px 48px -14px rgba(16,24,43,.34),0 2px 6px rgba(16,24,43,.06);
}
.er-ico{
  width:38px;height:38px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;
  background:#FDE8EB;color:#E03149;
}
.er-ico svg{width:19px;height:19px}
.er-dialog b{display:block;font-size:12px;font-weight:800;letter-spacing:-.02em}
.er-dialog p{font-size:8.8px;color:var(--ink-2);line-height:1.6;margin-top:6px;font-weight:500}
.er-dialog .er-btn{
  margin-top:13px;background:var(--bg-2);border-radius:10px;padding:8px 0;
  font-size:10px;font-weight:700;color:var(--ink-2);
}
/* 右机：应用详情页 · 运行中 */
.scr-detail{flex:1;display:flex;flex-direction:column;background:var(--muted);min-height:0}
.dt-bar{display:flex;align-items:center;gap:8px;padding:7px 13px 9px;flex:none;background:#fff;border-bottom:1px solid #EFF1F7}
.dt-bar .bk{width:14px;height:14px;color:var(--ink-2);flex:none}
.dt-bar b{flex:1;font-size:11.5px;font-weight:800;letter-spacing:-.02em;text-align:center}
.dt-bar .sp{width:14px;flex:none}
.dt-hero{display:flex;flex-direction:column;align-items:center;padding:16px 14px 12px;background:#fff}
.dt-hero .di{
  width:52px;height:52px;border-radius:22.5%;display:grid;place-items:center;
  box-shadow:0 8px 18px -5px rgba(32,42,68,.3);
}
.dt-hero .di svg{width:50%;height:50%}
.dt-hero b{font-size:12.5px;font-weight:800;margin-top:9px;letter-spacing:-.02em}
.dt-hero span{font-size:8.4px;color:var(--ink-3);font-weight:500;margin-top:2px}
.dt-run{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  background:#E2F8EF;border-radius:999px;padding:4px 11px;
  font-size:8.4px;font-weight:800;color:#0A7A52;
}
.dt-run::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 5px var(--mint)}
.dt-info{margin:9px 12px 0;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.dt-info div{display:flex;align-items:center;padding:8px 11px;font-size:8.8px;font-weight:600;color:var(--ink-2)}
.dt-info div+div{border-top:1px solid #F2F4F9}
.dt-info div b{margin-left:auto;font-weight:700;color:var(--ink)}
.dt-info div b.ok{color:#0A7A52}
.dt-acts{display:flex;gap:8px;margin:10px 12px 0}
.dt-acts span{flex:1;text-align:center;font-size:10px;font-weight:700;border-radius:10px;padding:8px 0}
.dt-acts .main{background:var(--brand);color:#fff;box-shadow:0 6px 14px -5px rgba(61,107,255,.5)}
.dt-acts .sub{background:#fff;border:1px solid var(--line);color:var(--ink-2)}

/* ============================================================
   S6 —— 真机浏览器 + 小窗（虚拟机桌面）
   ============================================================ */
.scr-web{flex:1;display:flex;flex-direction:column;background:#fff;min-height:0}
.wb-bar{display:flex;align-items:center;gap:7px;padding:6px 11px 8px;flex:none;background:#F4F5F9;border-bottom:1px solid #E8EBF2}
.wb-bar svg{width:13px;height:13px;color:var(--ink-2);flex:none}
.wb-url{
  flex:1;min-width:0;background:#fff;border-radius:999px;padding:5px 11px;
  font-size:8.4px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:5px;
  box-shadow:inset 0 0 0 1px rgba(32,42,68,.06);
}
.wb-url em{font-style:normal;color:var(--ink-3);font-weight:500}
.wb-body{flex:1;padding:11px 12px 0;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.wb-h1{height:13px;width:66%;border-radius:5px;background:#DCE3EF}
.wb-p{display:flex;flex-direction:column;gap:5px}
.wb-p i{height:6px;border-radius:3px;background:#EDF0F7;display:block}
.wb-p i:nth-child(2){width:88%}
.wb-p i:nth-child(3){width:62%}
.wb-img{height:64px;border-radius:10px;background:linear-gradient(140deg,#DCEBFF,#C3DCFA 58%,#CFEEDF)}
.wb-tabs{
  margin-top:auto;flex:none;display:flex;align-items:center;justify-content:space-around;
  padding:8px 0 11px;background:#F4F5F9;border-top:1px solid #E8EBF2;
}
.wb-tabs svg{width:15px;height:15px;color:var(--ink-3)}
.wb-tabs .on svg{color:var(--brand)}
/* 小窗里放虚拟机桌面缩略图（真实 UI，不是插画） */
.pip-win .pip-vm{
  aspect-ratio:9/15;position:relative;overflow:hidden;
  background:
    radial-gradient(88% 42% at 84% -6%,rgba(84,168,227,.42),transparent 62%),
    linear-gradient(180deg,#F3F7FF 0%,#E8F0FF 50%,#F0F4FF 100%);
}
.pip-vm .pv-time{margin:20px 0 0;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.pip-vm .pv-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px 9px 0}
.pip-vm .pv-apps i{aspect-ratio:1;border-radius:24%;display:grid;place-items:center;box-shadow:0 2px 5px -1px rgba(32,42,68,.24)}
.pip-vm .pv-apps i svg{width:56%;height:56%}
.pip-vm .pv-dock{
  position:absolute;left:6px;right:6px;bottom:15px;border-radius:9px;padding:4px 5px;
  background:rgba(255,255,255,.7);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
}
.pip-vm .pv-dock i{aspect-ratio:1;border-radius:24%;display:grid;place-items:center}
.pip-vm .pv-dock i svg{width:54%;height:54%}
.pip-vm .pv-bar{position:absolute;left:50%;translate:-50% 0;bottom:5px;width:34px;height:2.5px;border-radius:2px;background:rgba(16,24,43,.22)}
.pip-badge{
  position:absolute;left:5px;top:5px;z-index:3;
  background:rgba(16,24,43,.72);border-radius:5px;padding:2px 6px;
  font-size:5.8px;font-weight:800;color:#fff;letter-spacing:.03em;
}

/* ---------- Screens showcase ---------- */
.screens{overflow:hidden;padding-top:40px}
.phones-row{display:flex;justify-content:center;align-items:flex-end;gap:44px;perspective:1400px}
.shot{display:flex;flex-direction:column;align-items:center;gap:20px}
.shot .phone{--w:258;width:calc(var(--w) * 1px);transition:transform .5s cubic-bezier(.2,.7,.3,1.2),box-shadow .5s;position:relative}
.shot:nth-child(1) .phone{transform:rotateY(10deg) rotateZ(2deg)}
.shot:nth-child(3) .phone{transform:rotateY(-10deg) rotateZ(-2deg)}
.shot:nth-child(2){z-index:2}
.shot:nth-child(2) .phone{--w:282;width:calc(var(--w) * 1px)}
.shot:hover .phone{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 3px rgba(10,14,36,.32),0 52px 100px -26px rgba(24,32,72,.52)}
.shot-cap{text-align:center}
.shot-cap b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.shot-cap span{font-size:13px;color:var(--ink-3)}

/* 宫格视图 */
.ui-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 13px 10px;align-content:start;min-height:0}
.gcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:7px;box-shadow:0 2px 6px -2px rgba(32,42,68,.07)}
.gcard .thumb{
  border-radius:9px;aspect-ratio:9/14;position:relative;overflow:hidden;
  background:
    radial-gradient(88% 42% at 84% -6%,rgba(84,168,227,.5),transparent 62%),
    linear-gradient(180deg,#EDF4FF,#DCE9FF);
  box-shadow:inset 0 0 0 1px rgba(32,42,68,.06);
}
.gcard .thumb .tw{position:absolute;left:7px;right:7px;top:7px;height:17px;border-radius:5px;background:rgba(255,255,255,.72)}
.gcard .thumb .tw::after{content:"";position:absolute;left:5px;top:5px;width:22px;height:6px;border-radius:3px;background:rgba(16,24,43,.22)}
.gcard .thumb .mini-apps{position:absolute;left:8px;right:8px;top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.gcard .thumb .mini-apps i{aspect-ratio:1;border-radius:26%;display:block}
.gcard .thumb .mini-apps i:nth-child(4n+1){background:linear-gradient(135deg,#3D6BFF,#54A8E3)}
.gcard .thumb .mini-apps i:nth-child(4n+2){background:linear-gradient(135deg,#0FBE7C,#4FD9A8)}
.gcard .thumb .mini-apps i:nth-child(4n+3){background:linear-gradient(135deg,#FF9F43,#FFC06B)}
.gcard .thumb .mini-apps i:nth-child(4n+4){background:linear-gradient(135deg,#8C7BFF,#B2A6FF)}
.gcard .thumb .tdock{position:absolute;left:7px;right:7px;bottom:6px;height:13px;border-radius:6px;background:rgba(255,255,255,.7);display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:2.5px 4px}
.gcard .thumb .tdock i{border-radius:26%;background:rgba(61,107,255,.45)}
.gcard .thumb.off{background:linear-gradient(180deg,#E7EBF4,#DFE4EF)}
.gcard .thumb.off .tw,.gcard .thumb.off .tdock{background:rgba(255,255,255,.5)}
.gcard .thumb.off .mini-apps i,.gcard .thumb.off .tdock i{background:#CDD4E2}
.gcard .thumb.off .tw::after{background:rgba(16,24,43,.12)}
.gcard .gmeta{display:flex;align-items:center;gap:6px;padding:8px 2px 2px}
.gcard .gmeta>i{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;box-shadow:0 0 0 2.5px rgba(15,190,124,.15)}
.gcard .gmeta>i.off{background:#C3CAD9;box-shadow:none}
.gcard .gmeta b{font-size:10px;font-weight:700;letter-spacing:-.01em}
.gcard .gmeta span{display:block;font-size:8px;color:var(--ink-3);font-weight:500;margin-top:1px}
.ui-toggle{display:flex;background:var(--bg-2);border-radius:9px;padding:3px;margin:2px 13px 0;width:max-content}
.ui-toggle span{font-size:9.5px;font-weight:700;color:var(--ink-3);padding:4.5px 14px;border-radius:6px}
.ui-toggle span.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(32,42,68,.16)}
/* ---------- Trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trio-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;transition:.3s}
.trio-item:hover{transform:translateY(-5px);box-shadow:0 3px 8px rgba(32,42,68,.07),0 24px 48px -20px rgba(61,107,255,.3);border-color:rgba(61,107,255,.22)}
.trio-item .ic{width:44px;height:44px;border-radius:var(--r-icon);flex:none;display:grid;place-items:center;color:#fff;background:var(--brand);box-shadow:0 8px 18px -6px rgba(61,107,255,.5);transition:transform .35s cubic-bezier(.2,.7,.3,1.4)}
.trio-item:hover .ic{transform:scale(1.08) rotate(-5deg)}
.trio-item:nth-child(2) .ic{background:linear-gradient(120deg,#54A8E3,#3D6BFF)}
.trio-item:nth-child(3) .ic{background:linear-gradient(120deg,#10182B,#3D6BFF)}
.trio-item .ic svg{width:20px;height:20px}
.trio-item b{font-size:15.5px;font-weight:700;display:block;margin-bottom:4px;letter-spacing:-.01em}
.trio-item p{font-size:13.2px;color:var(--ink-2);line-height:1.65}

/* ---------- Download ---------- */
.download-card{position:relative;border-radius:calc(var(--r-band) + 2px);padding:2px;background:linear-gradient(120deg,#3D6BFF,#54A8E3);box-shadow:0 40px 84px -30px rgba(61,107,255,.45)}
.download-inner{border-radius:var(--r-band);background:rgba(252,253,255,.97);padding:72px 48px 58px;text-align:center;position:relative;overflow:hidden}
.download-inner::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;left:50%;top:-330px;translate:-50% 0;background:radial-gradient(circle,rgba(61,107,255,.13),transparent 66%)}
.download-inner .kicker{position:relative}
.download-inner h2{position:relative;font-size:clamp(30px,3.8vw,46px);font-weight:800;letter-spacing:-.03em}
.d-sub{position:relative;margin:16px auto 0;max-width:34em;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.d-btns{position:relative;margin-top:36px;display:flex;justify-content:center}
.d-btns .btn-lg{padding:20px 52px;font-size:18px}
.d-note{position:relative;margin-top:22px;font-size:13.5px;color:var(--ink-3);font-weight:500;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.d-note svg{width:15px;height:15px;color:var(--mint)}
.d-limits{position:relative;margin:26px auto 0;font-size:12.2px;color:var(--ink-3);line-height:1.8;max-width:40em}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.footer-inner{max-width:1180px;margin:0 auto;padding:56px 28px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.f-brand .brand{margin-bottom:14px}
.f-brand p{font-size:13.5px;color:var(--ink-2);max-width:26em;line-height:1.75}
.f-col h4{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.f-col a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:.2s}
.f-col a:hover{color:var(--brand);transform:translateX(3px)}
.f-bottom{max-width:1180px;margin:0 auto;padding:20px 28px 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}

/* ---------- Scroll reveal ---------- */
@supports (animation-timeline: view()){
  .rv{animation:rise .9s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 38%}
}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .hero{padding-top:44px}
  .hero-copy{max-width:640px}
  .hero-visual{height:600px;max-width:560px;margin:0 auto;width:100%}
  .hero-visual .p-main{right:36px}
  .chip-float.c2{right:-10px}
  .scene-row{grid-template-columns:1fr;gap:44px;padding:70px 0}
  .scene-row.flip .scene-copy{order:1}
  .scene-row.flip .scene-visual{order:2}
  .scene-visual{max-width:560px;margin:0 auto;width:100%}
  .phones-row{gap:22px}
  .shot .phone{--w:216;width:calc(var(--w) * 1px)}
  .shot:nth-child(2) .phone{--w:238;width:calc(var(--w) * 1px)}
}
@media (max-width:840px){
  .nav-links{
    position:fixed;inset:0;z-index:70;background:rgba(244,246,251,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;gap:14px;
    opacity:0;pointer-events:none;transition:opacity .28s;margin-left:0;
  }
  .nav-links:target{opacity:1;pointer-events:auto}
  .nav-links>a{font-size:21px;font-weight:700;padding:13px 30px}
  .nav-close{display:block;position:absolute;top:20px;right:24px;font-size:30px;color:var(--ink-2);width:44px;height:44px;text-align:center;line-height:40px;border-radius:10px}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;align-items:center;border-radius:var(--r-btn);border:1px solid var(--line);background:#fff;margin-left:0}
  .nav-burger i,.nav-burger i::before,.nav-burger i::after{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;content:""}
  .nav-burger i{position:relative}
  .nav-burger i::before{position:absolute;top:-5.5px;left:0}
  .nav-burger i::after{position:absolute;top:5.5px;left:0}
  .nav-cta .btn{display:none}
  .trio{grid-template-columns:1fr}
  .phones-row{flex-direction:column;align-items:center;gap:52px}
  .shot .phone,.shot:nth-child(2) .phone{--w:262;width:calc(var(--w) * 1px);transform:none}
  .footer-inner{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:640px){
  /* 装饰性光环/轨道在窄屏必须收进视口，否则撑出横向滚动 */
  .orbit.o1{width:248px;height:248px}
  .orbit.o2{width:296px;height:296px}
  .halo::before{width:288px !important;height:288px !important}
  .sv-glow::before{width:288px;height:288px}
  .hero-visual .p-guest{left:0}
  .section{padding:70px 0}
  .hero-visual{height:560px}
  .hero-visual .p-main{right:50%;margin-right:-150px}
  .hero-visual .p-guest{width:186px;left:-6px;top:200px}
  .chip-float.c1{left:-4px;top:20px}
  .chip-float.c2{right:-4px;top:auto;bottom:150px}
  .chip-float.c3{left:0;bottom:20px}
  .scene-visual{height:560px}
  .sv-main{--w:262;width:calc(var(--w) * 1px);margin-left:-131px}
  .sv-left{width:212px;left:0}
  .sv-right{width:212px;right:0}
  .sv-drawer{width:162px;top:176px}
  .download-inner{padding:56px 24px 44px}
  .footer-inner{grid-template-columns:1fr;gap:26px;padding-top:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .rv{animation:none !important}
  html{scroll-behavior:auto}
}
@media print{
  .rv{animation:none !important}
  .nav{position:static}
}

/* ============================================================
   质感升级：让浅色页面有光、有层次、有反馈
   原则是克制——只在少数几处用力，其余保持安静，否则浅色很容易显廉价。
   ============================================================ */

/* —— 1. 会呼吸的极光：静态光斑看久了是死的，缓慢旋转才有"活着"的感觉 —— */
.bg::before{
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(61,107,255,.20), rgba(124,92,255,.10) 28%,
      rgba(84,168,227,.18) 55%, rgba(61,107,255,.08) 78%, rgba(61,107,255,.20));
  animation:drift1 26s ease-in-out infinite alternate, aurora 44s linear infinite;
}
.bg::after{
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(84,168,227,.16), rgba(61,107,255,.08) 34%,
      rgba(124,92,255,.14) 62%, rgba(84,168,227,.16));
  animation:drift2 32s ease-in-out infinite alternate, aurora 58s linear infinite reverse;
}
@keyframes aurora{to{rotate:360deg}}

/* —— 2. 首屏标题：浅底上给深色字一点点白色底光，字会"浮"起来 —— */
/* 白色底光只给实心深色字；渐变字是透明填充，投影会从字缝里透出来把颜色冲淡 */
.hero-title{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hero-title .grad,.grad{text-shadow:none}
.hero-title .grad::after{
  background:linear-gradient(90deg,rgba(61,107,255,.34),rgba(84,168,227,.05));
  box-shadow:0 0 18px -4px rgba(61,107,255,.45);
}

/* —— 3. 主按钮扫光：低频、极淡，只在首屏那颗上跑，不做成满屏闪 —— */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.34) 48%,transparent 74%);
  transform:translateX(-130%);
}
.hero-cta .btn-primary::after,.d-btns .btn-primary::after{animation:sheen 5.5s ease-in-out 1.2s infinite}
.btn-primary:hover::after{animation:none;transform:translateX(130%);transition:transform .62s cubic-bezier(.3,.7,.4,1)}
@keyframes sheen{0%{transform:translateX(-130%)}22%,100%{transform:translateX(130%)}}

/* —— 4. 样机景深：单层大投影是"贴纸感"的来源，补中景 + 边缘环境光 —— */
.phone{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 1px 1px rgba(255,255,255,.26),
    0 1px 2px rgba(10,14,36,.32),
    0 14px 26px -12px rgba(24,32,72,.34),
    0 48px 92px -28px rgba(24,32,72,.5);
}

/* —— 5. 滚动视差：样机随滚动缓慢反向位移，页面立刻有纵深 —— */
@supports (animation-timeline: view()){
  .hero-visual,.scene-visual{
    animation:parallax linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  .bg-grid{
    animation:gridDrift linear both;
    animation-timeline:scroll(root);
  }
}
@keyframes parallax{from{translate:0 26px}to{translate:0 -26px}}
@keyframes gridDrift{to{background-position:0 -120px,0 -120px}}

/* —— 6. 区块分隔：硬线切断视线，渐变线只是"轻轻提示" —— */
.scene-row+.scene-row{border-top:none}
/* 删除：这里原有一条 .scene-row+.scene-row::before 的 1px 渐变分隔线。
   它的特异性(0,2,1)高于后面的色带规则(0,1,1)，会把第 2~6 屏的通栏色带
   压成 1px 高的透明条——只有第一屏有背景，其余五屏什么都没有。
   这条规则今天坑了三次，彻底删掉，分隔线改由色带自己的 inset 阴影画。 */
.scene-row{position:relative}

/* —— 7. kicker 加一颗脉冲点，替代干巴巴的短线 —— */
.kicker::before{
  width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(61,107,255,.5);animation:pulse 2.6s ease-out infinite;
}
.section-head.center .kicker::after{
  width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.35;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,107,255,.45)}
  70%{box-shadow:0 0 0 7px rgba(61,107,255,0)}
  100%{box-shadow:0 0 0 0 rgba(61,107,255,0)}
}

/* —— 8. 卡片微 3D：hover 时轻抬 + 极小仰角，像被托起来 —— */
.trio-item{transition:transform .4s cubic-bezier(.2,.7,.3,1.2),box-shadow .4s,border-color .4s}
.trio-item:hover{transform:perspective(900px) rotateX(2.4deg) translateY(-6px) scale(1.012)}

/* —— 9. 下载卡：一圈缓慢流转的光边，整页唯一的"高光时刻" —— */
/* 不用 mask-composite 抠边框——浏览器间行为不一致，实测直接渲染不出来。
   改成：卡片裁剪出圆角，里面塞一个超大的旋转 conic，靠 2px padding 露出一圈流动的光。 */
.download-card{background:#E6ECF8;overflow:hidden}
.download-card::before{
  content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;
  translate:-50% -50%;z-index:0;
  background:conic-gradient(#3D6BFF,#54A8E3 25%,#7C5CFF 50%,#54A8E3 75%,#3D6BFF);
  animation:aurora 9s linear infinite;
}
.download-inner{position:relative;z-index:1;background:#FCFDFF}

/* —— 10. 导航滚动后收拢：首屏通透，往下走才浮起来 —— */
@supports (animation-timeline: scroll()){
  .nav::before{
    animation:navSolid linear both;
    animation-timeline:scroll(root);
    animation-range:0 120px;
  }
}
@keyframes navSolid{
  from{background:rgba(255,255,255,.4);box-shadow:none;border-bottom-color:transparent}
  to{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,246,251,.78));
     box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 26px -18px rgba(32,42,68,.6);
     border-bottom-color:rgba(61,107,255,.1)}
}

/* —— 11. 场景要点：勾选项逐条微移，读起来有节奏 —— */
.s-points li{transition:transform .3s cubic-bezier(.2,.7,.3,1.2)}
.s-points li:hover{transform:translateX(4px)}
.s-points svg{filter:drop-shadow(0 2px 4px rgba(15,190,124,.3))}

/* —— 12. 浮动信息卡：加一层内高光，玻璃感才立得住 —— */
.fv,.chip-float{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 3px rgba(32,42,68,.06),
    0 14px 34px -16px rgba(32,42,68,.26);
}

/* 动效敏感用户：以上全部关掉，版面不变 */
@media (prefers-reduced-motion:reduce){
  .bg::before,.bg::after,.kicker::before,.download-card::before,
  .hero-cta .btn-primary::after,.d-btns .btn-primary::after{animation:none !important}
  .hero-visual,.scene-visual,.bg-grid,.nav::before{animation:none !important}
}

/* ============================================================
   场景区 · 参照 VMOS 官方站（www.vmos.cn）的做法重做
   市面上同类产品站的通行结构：柔和的浅蓝渐变背景 + 每个区块一张大圆角白卡把内容框住。
   之前的所有版本都是「通栏背景 + 内容散在上面」——没有容器、没有边界，
   所以背景无论浅深浓淡都像一盘散沙。问题不在背景颜色，在缺少容器。
   ============================================================ */
#scenes{
  /* 必须是 clip 不能是 hidden：hidden 会创建滚动容器，
     滚动驱动动画(view timeline)会锚定到这个不滚动的容器上，进度永远卡死。 */
  position:relative;overflow:clip;
  border-top:1px solid rgba(61,107,255,.08);
  border-bottom:1px solid rgba(61,107,255,.08);
}
#scenes .section-head{margin-bottom:34px;padding-bottom:20px}

/* 每个场景 = 一条通栏色带，铺满屏幕宽度。
   颜色照 VMOS 官网那种：很浅、很干净、明度高的单色渐变，不是色块也不是白板。
   六条色相各异，滚动时是一段柔和的色彩推移。 */
.scene-row{
  background:none;border:none;border-radius:0;box-shadow:none;
  padding:92px 0;margin:0;position:relative;isolation:isolate;
}
.scene-row+.scene-row{margin-top:0;border-top:none}
/* 通栏底：::before 破出版心到 100vw */
.scene-row::before{
  content:"";position:absolute;z-index:-2;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;
  background:var(--band);
}
/* 一团柔光压在产品那侧，色带不平、样机有环境光 */
.scene-row::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:62%;height:130%;top:-15%;right:-6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent);
  filter:blur(72px);
}
.scene-row.flip::after{right:auto;left:-6%}
.scene-visual{background:none}

/* 六条色带：蓝 → 青绿 → 紫 → 粉 → 靛 → 青 */
.scene-row{--band:linear-gradient(162deg,#E8F1FE,#F8FBFF 68%,#F1F6FE);--glow:rgba(90,140,255,.17)}
.scene-row:has(.scene-copy[data-n="01"]){--band:linear-gradient(162deg,#E8F1FE,#F8FBFF 68%,#F1F6FE);--glow:rgba(90,140,255,.17)}
.scene-row:has(.scene-copy[data-n="02"]){--band:linear-gradient(162deg,#E3F7F2,#F7FDFC 68%,#EEFAF7);--glow:rgba(26,190,162,.16)}
.scene-row:has(.scene-copy[data-n="03"]){--band:linear-gradient(162deg,#EFEBFE,#FAF9FF 68%,#F4F1FE);--glow:rgba(130,100,250,.17)}
.scene-row:has(.scene-copy[data-n="04"]){--band:linear-gradient(162deg,#FDEBF1,#FEF9FB 68%,#FDF2F6);--glow:rgba(240,118,158,.15)}
.scene-row:has(.scene-copy[data-n="05"]){--band:linear-gradient(162deg,#E6ECFC,#F7F9FF 68%,#EFF3FE);--glow:rgba(66,108,230,.17)}
.scene-row:has(.scene-copy[data-n="06"]){--band:linear-gradient(162deg,#E2F5F9,#F6FCFD 68%,#ECF8FB);--glow:rgba(28,175,200,.16)}

@media (max-width:1080px){
  .scene-row{padding:72px 0}
  .scene-row::after{width:96%;height:70%;top:auto;bottom:2%;right:-10%}
  .scene-row.flip::after{right:auto;left:-10%}
}
@media (max-width:640px){
  .scene-row{padding:56px 0}
}

/* —— 色带补第二层光：两个色相叠在一起，带子才有厚度，不是一张平铺的色纸 —— */
.scene-visual::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:86%;height:86%;left:-16%;top:6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow2),transparent);
  filter:blur(64px);
}
.scene-row.flip .scene-visual::before{left:auto;right:-16%}
.scene-row{--glow2:rgba(124,92,255,.13)}
.scene-row:has(.scene-copy[data-n="01"]){--glow2:rgba(124,92,255,.13)}
.scene-row:has(.scene-copy[data-n="02"]){--glow2:rgba(70,150,255,.13)}
.scene-row:has(.scene-copy[data-n="03"]){--glow2:rgba(225,120,200,.12)}
.scene-row:has(.scene-copy[data-n="04"]){--glow2:rgba(150,110,250,.13)}
.scene-row:has(.scene-copy[data-n="05"]){--glow2:rgba(40,185,215,.13)}
.scene-row:has(.scene-copy[data-n="06"]){--glow2:rgba(45,205,160,.13)}

/* —— 样机改 3D 透视：从「贴在背景上的图」变成「立在空间里的机器」 ——
   只改观看角度和光影，手机里的界面一个像素没动。
   floaty 动画用的是 translate 属性，和这里的 transform 互不冲突。 */
.scene-visual .phone{transform-style:preserve-3d}
.scene-visual .sv-main{transform:perspective(1500px) rotateY(-5deg) rotateX(1.5deg)}
.scene-visual .sv-left{transform:perspective(1300px) rotateY(10deg) rotateZ(-5deg)}
.scene-visual .sv-right{transform:perspective(1300px) rotateY(-9deg) rotateZ(4deg)}
/* 立体了，投影也要跟着变深、变斜，否则还是贴纸 */
.scene-visual .phone{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 2px 6px rgba(30,40,80,.06),
    0 22px 40px -16px rgba(30,40,80,.24),
    0 60px 100px -40px rgba(40,50,96,.34);
}
@media (max-width:1080px){
  .scene-visual::before{width:100%;height:60%;left:-10%;top:26%}
  .scene-row.flip .scene-visual::before{left:auto;right:-10%}
}

/* 下载卡不要纯白：给一层浅色渐变底，和场景区色带同一套调子 */
.download-inner{
  background:linear-gradient(152deg,#F8FAFF 0%,#EDF2FC 54%,#F4F8FF 100%);
}

/* —— 场景数据卡：用信息密度撑画面，不靠背景花样 ——
   放在文案下方那片空白里，每屏两张，内容是这个场景的真实状态/数据。 */
.s-stats{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.st{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  border-radius:13px;padding:11px 15px 11px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(30,40,80,.04),
    0 10px 24px -14px rgba(30,40,80,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.st i{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  color:#fff;background:var(--brand);
  box-shadow:0 6px 14px -6px rgba(61,107,255,.55);
}
.st i svg{width:17px;height:17px}
.st b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.st span{display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:2px}
/* 图标底色跟着本场景的色带走 */
.scene-row:has(.scene-copy[data-n="01"]) .st i{background:linear-gradient(135deg,#3D6BFF,#5B8CFF)}
.scene-row:has(.scene-copy[data-n="02"]) .st i{background:linear-gradient(135deg,#0FA97E,#2BC8A0)}
.scene-row:has(.scene-copy[data-n="03"]) .st i{background:linear-gradient(135deg,#7C5CFF,#9B7CFF)}
.scene-row:has(.scene-copy[data-n="04"]) .st i{background:linear-gradient(135deg,#E0517A,#F07AA0)}
.scene-row:has(.scene-copy[data-n="05"]) .st i{background:linear-gradient(135deg,#3A55D8,#5B78F0)}
.scene-row:has(.scene-copy[data-n="06"]) .st i{background:linear-gradient(135deg,#0E9CB8,#2BBBD4)}
@media (max-width:640px){
  .s-stats{gap:9px;margin-top:22px}
  .st{padding:9px 12px 9px 10px;border-radius:11px}
  .st b{font-size:13.5px}
}

/* ============================================================
   场景区 · 进入动画（IntersectionObserver 驱动）
   不用 animation-timeline: view() —— 那个 Safari 26 才支持、Firefox 至今没有，
   只有 Chrome 用户看得到动画。改用 .in 类 + transition，所有浏览器表现一致。
   起始态不做位移，只做角度和透明度：位移会把样机顶出 .scene-visual 容器（验收会拦）。
   ============================================================ */
/* 必须同时限定 scripting:enabled —— 这里的初始态是 opacity:0，靠 JS 加 .in 才显形。
   禁用 JS 时 .in 永远加不上，整个场景区的文案会彻底隐身（实测 h3 opacity=0）。
   浏览器不支持 scripting 特性时整块规则被忽略，失败方向是「照常显示」，安全。 */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .scene-visual .phone{
    opacity:.42;
    transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1);
  }
  .scene-visual .sv-main{transform:perspective(1500px) rotateY(-13deg) rotateX(2.5deg)}
  .scene-visual .sv-left{transform:perspective(1300px) rotateY(20deg) rotateZ(-5deg)}
  .scene-visual .sv-right{transform:perspective(1300px) rotateY(-19deg) rotateZ(4deg)}
  .scene-row.in .scene-visual .sv-main{transform:perspective(1500px) rotateY(-5deg) rotateX(1.5deg);opacity:1}
  .scene-row.in .scene-visual .sv-left{transform:perspective(1300px) rotateY(10deg) rotateZ(-5deg);opacity:1;transition-delay:.1s}
  .scene-row.in .scene-visual .sv-right{transform:perspective(1300px) rotateY(-9deg) rotateZ(4deg);opacity:1;transition-delay:.16s}

  /* 文案与数据卡依次浮现 */
  .scene-copy>*,.s-stats .st{
    opacity:0;transform:translateY(18px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
  }
  .scene-row.in .scene-copy>*,.scene-row.in .s-stats .st{opacity:1;transform:none}
  .scene-row.in .scene-copy>*:nth-child(2){transition-delay:.07s}
  .scene-row.in .scene-copy>*:nth-child(3){transition-delay:.14s}
  .scene-row.in .scene-copy>*:nth-child(4){transition-delay:.21s}
  .scene-row.in .scene-copy>*:nth-child(5){transition-delay:.28s}
  .scene-row.in .s-stats .st:nth-child(1){transition-delay:.3s}
  .scene-row.in .s-stats .st:nth-child(2){transition-delay:.38s}
}

/* ============================================================
   场景区 V7 —— 光学层次 + 线框结构（取代「涂色」）
   ------------------------------------------------------------
   前六版全部失败在同一件事上：背景在「填色」。淡彩、浓彩、通栏、圆角卡，
   只要那块面上没有结构，眼睛读到的就是一块纯色。
   这一版不再往面上刷颜色，改成两件事叠加：
     1) 光：三团不同色相的柔光打在近白底上，边缘完全化开、互相交叠 —— 有颜色但不成块；
     2) 线：雷达环 + 细网格 + 样机脚下的透视地面 —— 画面有骨架，不是一张平铺的纸。
   浅色主题不变，文字仍是深色。
   ============================================================ */

/* —— 通栏底：近白 + 三色柔光 + 一道斜向玻璃高光 —— */
/* 光斑尺寸必须用百分比：写死 px 在 1440 宽的通栏上会缩成一小团，颜色全被白底吃掉 */
.scene-row::before{
  background:
    linear-gradient(100deg,transparent 33%,rgba(255,255,255,.34) 46%,transparent 59%),
    radial-gradient(74% 88% at 82% -2%,var(--l1),transparent 62%),
    radial-gradient(66% 80% at 48% 104%,var(--l2),transparent 60%),
    radial-gradient(62% 82% at 0% 72%,var(--l3),transparent 62%),
    linear-gradient(180deg,#FBFCFF 0%,#EFF4FC 100%);
}

/* —— 结构层：雷达环 + 细网格，通栏铺满，不模糊 ——
   环心跟着样机走：正常行在右，flip 行在左，只换 --rx 一个值。 */
.scene-row{--rx:76%}
.scene-row.flip{--rx:24%}
.scene-row::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;right:auto;top:0;bottom:0;width:100vw;height:auto;
  transform:translateX(-50%);border-radius:0;filter:none;
  background:
    radial-gradient(circle 172px at var(--rx) 50%,transparent 170px,var(--ring) 171px,transparent 173px),
    radial-gradient(circle 262px at var(--rx) 50%,transparent 260px,var(--ring) 261px,transparent 263px),
    radial-gradient(circle 362px at var(--rx) 50%,transparent 360px,var(--ring2) 361px,transparent 363px),
    radial-gradient(circle 472px at var(--rx) 50%,transparent 470px,var(--ring2) 471px,transparent 473px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,54px 54px,54px 54px;
  -webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.55) 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.55) 62%,transparent 100%);
}

/* —— 样机脚下的透视地面：有地面才有空间，样机才是「立着」不是「贴着」 —— */
.sv-glow::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-45%;right:-45%;bottom:-4%;height:54%;
  background-image:
    repeating-linear-gradient(90deg,var(--floor) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(0deg,var(--floor) 0 1px,transparent 1px 40px);
  transform:perspective(470px) rotateX(66deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 76%);
  mask-image:linear-gradient(0deg,#000,transparent 76%);
}

/* —— 六屏各一组光色：三种色相同时在场，所以不会读成一块色 —— */
.scene-row{
  --l1:rgba(97,146,255,0.403);--l2:rgba(38,206,178,0.31);--l3:rgba(168,124,255,0.279);
  --ring:rgba(61,107,255,0.24);--ring2:rgba(61,107,255,0.15);
  --grid:rgba(61,107,255,0.085);--floor:rgba(61,107,255,0.232);
}
.scene-row:has(.scene-copy[data-n="01"]){
  --l1:rgba(255,169,64,0.403);--l2:rgba(255,110,96,0.295);--l3:rgba(120,150,255,0.279);
  --ring:rgba(226,142,28,0.255);--ring2:rgba(226,142,28,0.15);
  --grid:rgba(200,130,40,0.085);--floor:rgba(214,138,36,0.248);
}
.scene-row:has(.scene-copy[data-n="02"]){
  --l1:rgba(38,206,178,0.372);--l2:rgba(97,146,255,0.326);--l3:rgba(150,225,110,0.264);
  --ring:rgba(16,170,140,0.24);--ring2:rgba(16,170,140,0.15);
  --grid:rgba(20,160,135,0.085);--floor:rgba(18,175,145,0.232);
}
.scene-row:has(.scene-copy[data-n="03"]){
  --l1:rgba(158,116,255,0.388);--l2:rgba(97,146,255,0.31);--l3:rgba(232,128,208,0.264);
  --ring:rgba(124,92,255,0.24);--ring2:rgba(124,92,255,0.15);
  --grid:rgba(124,92,255,0.085);--floor:rgba(124,92,255,0.232);
}
.scene-row:has(.scene-copy[data-n="04"]){
  --l1:rgba(255,124,150,0.372);--l2:rgba(158,116,255,0.31);--l3:rgba(255,174,94,0.279);
  --ring:rgba(226,86,116,0.225);--ring2:rgba(226,86,116,0.135);
  --grid:rgba(215,95,120,0.085);--floor:rgba(224,92,120,0.232);
}
.scene-row:has(.scene-copy[data-n="05"]){
  --l1:rgba(86,124,246,0.388);--l2:rgba(52,198,228,0.31);--l3:rgba(148,120,255,0.264);
  --ring:rgba(48,82,214,0.24);--ring2:rgba(48,82,214,0.15);
  --grid:rgba(48,82,214,0.085);--floor:rgba(48,82,214,0.232);
}
.scene-row:has(.scene-copy[data-n="06"]){
  --l1:rgba(40,196,226,0.388);--l2:rgba(44,214,170,0.31);--l3:rgba(104,152,255,0.279);
  --ring:rgba(14,156,184,0.24);--ring2:rgba(14,156,184,0.15);
  --grid:rgba(14,156,184,0.085);--floor:rgba(14,156,184,0.232);
}

/* —— 窄屏：环缩小并跟着内容居中，地面收窄 —— */
@media (max-width:1080px){
  .scene-row,.scene-row.flip{--rx:50%}
  .scene-row::after{
    background-size:auto,auto,auto,auto,44px 44px,44px 44px;
    -webkit-mask-image:linear-gradient(180deg,#000 6%,rgba(0,0,0,.4) 58%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 6%,rgba(0,0,0,.4) 58%,transparent 100%);
  }
  .sv-glow::after{left:-20%;right:-20%;height:42%}
}
@media (max-width:640px){
  .scene-row::after{
    background:
      radial-gradient(circle 150px at 50% 46%,transparent 148px,var(--ring) 149px,transparent 151px),
      radial-gradient(circle 230px at 50% 46%,transparent 228px,var(--ring2) 229px,transparent 231px),
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:auto,auto,38px 38px,38px 38px;
  }
  .sv-glow::after{left:-8%;right:-8%;height:34%}
}

/* ============================================================
   场景区 V9 —— 背景动效
   ------------------------------------------------------------
   静态背景已经试过十几版，都被判「丑」。这版让背景动起来，三种叠加：
     1) 光斑漂移 + 慢扫光：底色的三团光缓慢游动，一道斜光每 30s 扫过一次
     2) 网格流动 + 微粒上浮：网格斜向缓慢推移，细微粒持续向上飘
     3) 样机光晕呼吸：机身背后的光晕一涨一缩
   曾经还有一层「声呐脉冲环」（从样机向外扩散），被判丑，已整层移除，不要再加回来。
   全部纯 CSS（站点红线：只允许一个内联脚本），并且整体尊重 prefers-reduced-motion。
   ============================================================ */

/* —— 结构层：网格 + 微粒（原先这里画的同心环已随脉冲环一起去掉） —— */
.scene-row::after{
  background:
    radial-gradient(var(--ring) 1.4px,transparent 1.9px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:94px 94px,54px 54px,54px 54px;
  background-position:0 0,0 0,0 0;
}

/* —— 底色分层：给各层独立尺寸，才能让光斑与扫光各自游动 —— */
.scene-row::before{
  background-repeat:no-repeat;
  background-size:260% 100%,150% 150%,150% 150%,150% 150%,100% 100%;
  background-position:-80% 0,80% 0,50% 100%,0 70%,0 0;
}

@media (prefers-reduced-motion:no-preference){
  .scene-row::before{animation:lightDrift 30s ease-in-out infinite}
  .scene-row::after{animation:bgFlow 46s linear infinite}
  .sv-glow::before{animation:haloBreathe 9s ease-in-out infinite}
}

@keyframes lightDrift{
  0%   {background-position:-80% 0,  80% 0,   50% 100%, 0 70%,   0 0}
  50%  {background-position:180% 0,  66% 14%, 62% 86%,  12% 56%, 0 0}
  100% {background-position:-80% 0,  80% 0,   50% 100%, 0 70%,   0 0}
}
/* 微粒上浮 10 格、网格斜推 1 格 —— 都是整格位移，循环处无缝 */
@keyframes bgFlow{
  to{background-position:0 -940px,54px -54px,54px -54px}
}
@keyframes haloBreathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%    {transform:scale(1.16);opacity:1}
}

/* 窄屏：微粒稀疏一些，网格收密 */
@media (max-width:1080px){
  .scene-row::after{
    background:
      radial-gradient(var(--ring) 1.3px,transparent 1.8px),
      linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:104px 104px,44px 44px,44px 44px;
  }
}
/* —— 样机容器余量：floaty 上浮 14px + .rv 入场 scale(.985) 会一起吃掉边距，
   top:8px / height:636px 正好卡在验收容差边缘，会随动画相位随机红。一次留够。 —— */
.scene-visual{height:664px}
.sv-main{top:22px}
@media (max-width:640px){
  .scene-visual{height:592px}
}

/* —— 脉冲环专用色：复用网格线的 --ring 太淡（alpha .25，峰值只剩 .23），
   给它一组更亮的同色系变量，环线也加粗到 2.5px —— */

/* —— 脉冲环只保留上半圈 ——
   完整的圆在样机下方会被容器截出一条横贯底部的孤弧，那截最难看。
   自上而下渐隐后，剩下的是样机背后一道弧形的光晕，扩散感还在，底部干净。 */

/* ============================================================
   场景区 V10 —— 收敛配色（治「花里胡哨」）
   ------------------------------------------------------------
   之前整页算下来将近二十种颜色：六屏背景各三团不同色相的光（琥珀/珊瑚/翡翠/
   紫/品红/青），加上数据卡六种图标底色、浮动卡三种行内色。
   色相一多，再淡也显乱。这一版全部收进品牌蓝一个色系：
     · 六屏只保留极轻微的冷暖偏移（蓝 → 青蓝 → 靛 → 蓝紫 → 钢蓝 → 天青），不跨色系
     · 光的浓度从 .37~.40 砍到 .17 上下，线条与网格改中性蓝灰
     · 数据卡、浮动卡的图标统一品牌蓝
   彩色只留在手机界面里 —— 那是产品本身，不是装饰。
   ============================================================ */

/* 六屏共用的中性线条：网格、微粒、透视地面 */
.scene-row,
.scene-row:has(.scene-copy[data-n="01"]),
.scene-row:has(.scene-copy[data-n="02"]),
.scene-row:has(.scene-copy[data-n="03"]),
.scene-row:has(.scene-copy[data-n="04"]),
.scene-row:has(.scene-copy[data-n="05"]),
.scene-row:has(.scene-copy[data-n="06"]){
  --ring:rgba(72,104,170,.15);--ring2:rgba(72,104,170,.09);
  --grid:rgba(72,104,170,.05);--floor:rgba(72,104,170,.13);
}

/* 六屏的光：同一个蓝色系，只做轻微冷暖偏移 */
.scene-row{--l1:rgba(100,142,226,.17);--l2:rgba(126,170,214,.12);--l3:rgba(138,148,214,.10)}
.scene-row:has(.scene-copy[data-n="01"]){--l1:rgba(106,144,228,.17);--l2:rgba(134,172,214,.12);--l3:rgba(140,150,216,.10)}
.scene-row:has(.scene-copy[data-n="02"]){--l1:rgba(92,160,216,.17);--l2:rgba(120,180,206,.12);--l3:rgba(122,156,220,.10)}
.scene-row:has(.scene-copy[data-n="03"]){--l1:rgba(122,138,228,.17);--l2:rgba(142,150,220,.12);--l3:rgba(150,146,214,.10)}
.scene-row:has(.scene-copy[data-n="04"]){--l1:rgba(112,140,226,.17);--l2:rgba(146,156,216,.12);--l3:rgba(130,166,214,.10)}
.scene-row:has(.scene-copy[data-n="05"]){--l1:rgba(96,138,230,.17);--l2:rgba(116,166,220,.12);--l3:rgba(136,148,222,.10)}
.scene-row:has(.scene-copy[data-n="06"]){--l1:rgba(88,158,220,.17);--l2:rgba(118,178,210,.12);--l3:rgba(126,160,218,.10)}

/* 数据卡图标：六种底色统一成品牌蓝 */
.scene-row:has(.scene-copy[data-n="01"]) .st i,
.scene-row:has(.scene-copy[data-n="02"]) .st i,
.scene-row:has(.scene-copy[data-n="03"]) .st i,
.scene-row:has(.scene-copy[data-n="04"]) .st i,
.scene-row:has(.scene-copy[data-n="05"]) .st i,
.scene-row:has(.scene-copy[data-n="06"]) .st i{
  background:linear-gradient(135deg,#3D6BFF,#5B8CFF);
  box-shadow:0 6px 14px -6px rgba(61,107,255,.5);
}
/* 浮动卡图标同样回到品牌蓝（行内杂色已从 HTML 清掉，这里兜底 amber/mint 修饰类） */
.fv.amber .ic,.fv.mint .ic{background:var(--brand)}


/* ============================================================
   场景区 V11 —— 配色回到「一族之内有变化」
   ------------------------------------------------------------
   上一版把六屏压成同一个蓝（色相只剩 45° 跨度），矫枉过正、显得死板。
   这一版在冷色系里走一段渐进：青 175° → 蓝 214° → 靛 252° → 紫 272°，
   每屏间隔约 20°，相邻两屏看得出差别，整页仍是同一家人。
   与被判「花里胡哨」那版的区别在三点，缺一不可：
     · 不跨色系 —— 没有琥珀 / 珊瑚 / 品红那些暖色，全部落在 175°~272°
     · 不提饱和 —— 光的 alpha 只有 .21（老版 .40），饱和度压在 62% 以下
     · 饱和的小元素不跟着变 —— 数据卡、浮动卡图标一律品牌蓝
   规则：大面积的柔光负责变化，小面积的实色负责统一。
   ============================================================ */

.scene-row:has(.scene-copy[data-n="01"]){
  --l1:rgba(106,220,211,0.21);--l2:rgba(133,197,214,0.14);--l3:rgba(144,213,184,0.11);
  --ring:rgba(65,170,161,0.16);--ring2:rgba(65,170,161,0.1);
  --grid:rgba(70,164,156,0.05);--floor:rgba(65,170,161,0.14);
}
.scene-row:has(.scene-copy[data-n="02"]){
  --l1:rgba(106,190,220,0.21);--l2:rgba(133,168,214,0.14);--l3:rgba(144,213,208,0.11);
  --ring:rgba(65,142,170,0.16);--ring2:rgba(65,142,170,0.1);
  --grid:rgba(70,139,164,0.05);--floor:rgba(65,142,170,0.14);
}
.scene-row:has(.scene-copy[data-n="03"]){
  --l1:rgba(106,156,220,0.21);--l2:rgba(133,143,214,0.14);--l3:rgba(144,197,213,0.11);
  --ring:rgba(65,110,170,0.16);--ring2:rgba(65,110,170,0.1);
  --grid:rgba(70,111,164,0.05);--floor:rgba(65,110,170,0.14);
}
.scene-row:has(.scene-copy[data-n="04"]){
  --l1:rgba(106,121,220,0.21);--l2:rgba(146,133,214,0.14);--l3:rgba(144,176,213,0.11);
  --ring:rgba(65,79,170,0.16);--ring2:rgba(65,79,170,0.1);
  --grid:rgba(70,83,164,0.05);--floor:rgba(65,79,170,0.14);
}
.scene-row:has(.scene-copy[data-n="05"]){
  --l1:rgba(129,106,220,0.21);--l2:rgba(173,133,214,0.14);--l3:rgba(144,153,213,0.11);
  --ring:rgba(86,65,170,0.16);--ring2:rgba(86,65,170,0.1);
  --grid:rgba(89,70,164,0.05);--floor:rgba(86,65,170,0.14);
}
.scene-row:has(.scene-copy[data-n="06"]){
  --l1:rgba(167,106,220,0.21);--l2:rgba(201,133,214,0.14);--l3:rgba(158,144,213,0.11);
  --ring:rgba(121,65,170,0.16);--ring2:rgba(121,65,170,0.1);
  --grid:rgba(120,70,164,0.05);--floor:rgba(121,65,170,0.14);
}

/* appui:css —— 由 scripts/appui/extract.mjs 从 App 设计定稿生成，勿手改 */
.au{--a-aink4:#9aa5ba;--a-e-standard:cubic-bezier(.2,0,0,1);--a-t-base:200ms;--a-ared-bd:#f0c3cb;--a-ared:#c02339;--a-aok-bg:#e2f8ef;--a-aontop2:rgba(255,255,255,.78);--a-aink2:#5a6478;--a-achev:#c3c9d4;--a-ablue-bd:#c4d2ff;--a-ablue:#3d6bff;--a-aglass:#3a4560;--a-abd3:#d9dee8;--a-adot-b:#3d6bff;--a-adot-gy:#9aa5ba;--a-adot-g:#0a9a63;--a-ashot:#0a0e18;--a-abd:#e3e6ed;--a-abd2:#eef0f4;--a-acard:#fff;--a-aontop:#fff;--a-atop:var(--a-ablue);--a-aink3:#768297;--a-aphone-bd:#cfd3dc;--a-aink:#10182b;--a-acv:#eef1fa}
.au *{box-sizing: border-box; margin: 0px; padding: 0px;}
.au .a-num{font-variant-numeric: tabular-nums;}
.au .a-amono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.au .a-icx{width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;}
.au .a-phone{--a-pw: 360px; width: var(--a-pw); max-width: 100%; min-height: calc(var(--a-pw) * 844 / 390); display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; position: relative; background: var(--a-acv); color: var(--a-aink); font-size: 14px; line-height: 1.5; border: 1px solid var(--a-aphone-bd);}
.au .a-stb{display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0px; font-size: 12.5px; font-weight: 600; position: relative; z-index: 3;}
.au .a-stb .a-g2{display: flex; gap: 6px; align-items: center;}
.au .a-sig{display: flex; gap: 1.5px; align-items: flex-end;}
.au .a-sig i{width: 3px; background: currentcolor; border-radius: 1px;}
.au .a-sig i:nth-child(1){height: 4px;}
.au .a-sig i:nth-child(2){height: 6px;}
.au .a-sig i:nth-child(3){height: 8px;}
.au .a-sig i:nth-child(4){height: 10px;}
.au .a-bat{width: 21px; height: 11px; border: 1.2px solid; border-radius: 3px; position: relative; padding: 1.5px; opacity: 0.95;}
.au .a-bat::before{content: ""; display: block; height: 100%; width: 70%; background: currentcolor; border-radius: 1px;}
.au .a-bat::after{content: ""; position: absolute; right: -3.5px; top: 2.5px; width: 2px; height: 4px; background: currentcolor; border-radius: 1px;}
.au .a-gst{height: 24px; display: flex; align-items: center; justify-content: center; color: var(--a-aink3);}
.au .a-gst::before{content: ""; width: 110px; height: 4px; border-radius: 2px; background: currentcolor; opacity: 0.32;}
.au .a-gst.a-lite{color: rgb(255, 255, 255);}
.au .a-offs{position: relative;}
.au .a-offs::after{content: ""; position: absolute; inset: 0px; z-index: 1;}
.au .a-offs::after{background: rgb(43, 49, 66); opacity: 0.62;}
.au .a-bhd{background: var(--a-atop); color: var(--a-aontop); padding-bottom: 14px;}
.au .a-bhd .a-stb{color: rgb(255, 255, 255);}
.au .a-brandrow{display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 0px;}
.au .a-brandrow b{font-size: 25px; font-weight: 800; letter-spacing: 0.3px;}
.au .a-hact{display: flex; align-items: center; gap: 6px;}
.au .a-hb{width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14);}
.au .a-hb .a-icx{width: 19px; height: 19px;}
.au .a-tgl{display: flex; height: 32px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08);}
.au .a-tgl span{width: 30px; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6);}
.au .a-tgl .a-on{background: rgba(255, 255, 255, 0.24); color: rgb(255, 255, 255);}
.au .a-tgl .a-icx{width: 17px; height: 17px;}
.au .a-abody{padding-top: 14px; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0px;}
.au .a-phone > .a-pb:not(.a-pb ~ .a-pb){margin-top: auto;}
.au .a-phone:not(:has(> .a-abody)):not(:has(> .a-pb)):not(:has(> .a-grr)) > .a-gst{margin-top: auto;}
.au .a-gst{flex: 0 0 auto;}
.au .a-tb{display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; background: var(--a-acard); border-bottom: 1px solid var(--a-abd2);}
.au .a-tb .a-bk{color: rgba(255, 255, 255, 0.92); display: flex; align-items: center;}
.au .a-tb .a-bk .a-icx{width: 21px; height: 21px;}
.au .a-tb b{font-size: 16.5px;}
.au .a-tb .a-sp{flex: 1 1 0%;}
.au .a-tb .a-mr{color: rgba(255, 255, 255, 0.92); display: flex; align-items: center;}
.au .a-tb .a-mr .a-icx{width: 20px; height: 20px;}
.au .a-tb .a-ro{font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--a-aink3);}
.au .a-tb .a-dt{width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;}
.au .a-p-grid{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 8px; padding: 0px 10px;}
.au .a-mc{background: var(--a-acard); border-radius: 8px; overflow: hidden; border: 1px solid var(--a-abd); box-shadow: rgba(8, 22, 80, 0.06) 0px 1px 2px, rgba(8, 22, 80, 0.26) 0px 6px 16px -8px;}
.au .a-thumb{position: relative; aspect-ratio: 9 / 16; overflow: hidden; background-color: var(--a-ashot);}
.au .a-mc .a-chin{padding: 8px 10px 9px; display: flex; align-items: center; gap: 8px;}
.au .a-mc .a-bd{flex: 1 1 0%; min-width: 0px;}
.au .a-nml{font-size: 13px; font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 6px; color: var(--a-aink);}
.au .a-nml i{width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;}
.au .a-nml i.a-g{background: var(--a-adot-g);}
.au .a-nml i.a-gy{background: var(--a-adot-gy);}
.au .a-nml i.a-b{background: var(--a-adot-b);}
.au .a-mtl{font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--a-aink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.au .a-abtn{width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--a-abd3); color: var(--a-aglass); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--a-acard);}
.au .a-abtn.a-blue{color: var(--a-ablue); border-color: var(--a-ablue-bd);}
.au .a-dlbar{position: absolute; left: 12px; right: 12px; bottom: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden;}
.au .a-dlbar i{display: block; height: 100%; width: 45%; background: var(--a-ablue);}
.au .a-band{background: var(--a-acard); border-top: 1px solid var(--a-abd2); border-bottom: 1px solid var(--a-abd2); margin-bottom: 2px;}
.au .a-lr{display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--a-abd2); min-height: 48px; background: var(--a-acard); color: var(--a-aink); position: relative; overflow: hidden;}
.au .a-lr > *{position: relative; z-index: 1;}
.au .a-lr:last-child{border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
.au .a-lr .a-bd{flex: 1 1 0%; min-width: 0px;}
.au .a-lr .a-t{font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px;}
.au .a-lr .a-lbl{width: 56px; flex: 0 0 auto; font-size: 12.5px; color: var(--a-aink3);}
.au .a-lr .a-val{flex: 1 1 0%; font-size: 13.5px;}
.au .a-lr .a-chev{color: var(--a-achev); flex: 0 0 auto; display: flex; align-items: center;}
.au .a-lr .a-chev .a-icx{width: 17px; height: 17px;}
.au .a-olab{font-size: 11px; letter-spacing: 1.2px; color: var(--a-aink3); padding: 13px 16px 6px; font-weight: 600;}
.au .a-mrow{display: flex; margin: 10px 14px 2px; background: var(--a-acard); border: 1px solid var(--a-abd); border-radius: 8px;}
.au .a-mrow > div{flex: 1 1 0%; text-align: center; padding: 10px 4px;}
.au .a-mrow > div + div{border-left: 1px solid var(--a-abd2);}
.au .a-mrow b{font-size: 15.5px; display: block; line-height: 1.4; font-family: ui-monospace, Menlo, monospace; font-weight: 700;}
.au .a-mrow span{font-size: 12px; color: var(--a-aink3);}
.au .a-tb .a-tshot{width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; overflow: hidden; background-color: rgb(13, 17, 25); border: 1px solid rgba(255, 255, 255, 0.35); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.au .a-pb{margin: 14px 14px 6px; background: var(--a-ablue); color: rgb(255, 255, 255); border-radius: 8px; text-align: center; padding: 12px 0px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px;}
.au .a-grr{display: flex; gap: 10px; margin: 0px 14px 12px;}
.au .a-gb{flex: 1 1 0%; border: 1px solid var(--a-abd3); border-radius: 8px; text-align: center; padding: 10px 0px; font-size: 13.5px; color: var(--a-aink2); font-weight: 500; background: var(--a-acard);}
.au .a-phone.a-darkfull{background: rgb(4, 6, 11);}
.au .a-fullg{position: relative; height: 800px; overflow: hidden;}
.au .a-fball{position: absolute; right: 10px; top: 300px; width: 46px; height: 46px; border-radius: 50%; z-index: 5; background: rgba(16, 24, 43, 0.66); border: 1.5px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;}
.au .a-fball .a-vlogo{width: 31px; height: 31px; fill: rgb(255, 255, 255); stroke: none; display: block;}
.au .a-fball{backdrop-filter: blur(10px); box-shadow: rgba(4, 8, 20, 0.45) 0px 4px 16px;}
.au .a-pipwrap{position: relative; height: 800px; overflow: hidden;}
.au .a-pipwin{position: absolute; right: 12px; bottom: 96px; width: 150px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; z-index: 5; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: rgba(10, 16, 30, 0.5) 0px 14px 36px;}
.au .a-pipwin .a-pipbar{position: absolute; top: 0px; left: 0px; right: 0px; display: flex; justify-content: space-between; padding: 5px 7px; z-index: 3;}
.au .a-pipwin .a-pipbar span{width: 20px; height: 20px; border-radius: 50%; background: rgba(16, 24, 43, 0.55); color: rgb(255, 255, 255); font-size: 11px; line-height: 20px; text-align: center;}
.au .a-phone.a-bluefield{background: var(--a-atop); color: var(--a-aontop);}
.au .a-bluefield .a-gst{color: var(--a-aontop2);}
.au .a-bluefield .a-mc{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: rgba(8, 22, 80, 0.45) 0px 10px 26px -10px;}
.au .a-stbb{background: var(--a-atop); color: var(--a-aontop);}
.au .a-tb{background: var(--a-atop); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor;}
.au .a-tb b{color: rgb(255, 255, 255);}
.au .a-tb .a-bk,.au .a-tb .a-mr{color: rgba(255, 255, 255, 0.9);}
.au .a-tb .a-ro{color: rgba(255, 255, 255, 0.78);}
.au .a-dlbar i{position: relative; overflow: hidden;}
.au .a-dlbar i::after{content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 34%; background: rgba(255, 255, 255, 0.5); animation: 1.5s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running a-vm-sheen;}
.au .a-nml i.a-b{animation: 1.4s ease-in-out 0s infinite normal none running a-vm-pulse;}
.au .a-nml i.a-g{animation: 2.6s ease-in-out 0s infinite normal none running a-vm-breathe;}
@media (prefers-reduced-motion: reduce){.au .a-dlbar i::after,.au .a-nml i{animation: auto ease 0s 1 normal none running none;}}
.au .a-lr .a-li{width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--a-acv); color: var(--a-aink2);}
.au .a-lr .a-li .a-icx{width: 16px; height: 16px;}
.au .a-mrow .a-mi{display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--a-aink3);}
.au .a-mrow .a-mi .a-icx{width: 12px; height: 12px;}
.au .a-veil{position: absolute; inset: 0px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; --a-vl: var(--a-ablue); background: color-mix(in srgb, var(--a-vl) 9%, var(--a-acard));}
.au .a-veil .a-vi{width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--a-vl); background: color-mix(in srgb, var(--a-vl) 17%, var(--a-acard));}
.au .a-veil .a-vi .a-icx{width: 19px; height: 19px;}
.au .a-veil .a-vt{font-size: 13px; font-weight: 650; color: var(--a-aink); letter-spacing: 0.2px;}
.au .a-veil + .a-dlbar{z-index: 4;}
.au .a-veil .a-vs{font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--a-aink3); max-width: 88%; text-align: center; line-height: 1.5;}
.au .a-veil.a-dimv{background: none; z-index: 2;}
.au .a-veil.a-dimv .a-vi{background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255);}
.au .a-veil.a-dimv .a-vt{color: rgb(255, 255, 255);}
@container (max-width: 139px){.au .a-auto .a-veil.a-dimv{display: none;}}
.au .a-veil.a-t-ready{--a-vl: #3d6bff; background: color-mix(in srgb, #3d6bff 16%, var(--a-acard));}
@container (max-width: 139px){.au .a-veil{gap: 5px;}}
@container (max-width: 139px){.au .a-veil .a-vi{width: 30px; height: 30px; border-radius: 8px;}}
@container (max-width: 139px){.au .a-veil .a-vi .a-icx{width: 15px; height: 15px;}}
@container (max-width: 139px){.au .a-veil .a-vt{font-size: 11px;}}
@container (max-width: 139px){.au .a-veil .a-vs{display: none;}}
.au .a-stst{flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; background: var(--a-aok-bg); color: var(--a-adot-g); white-space: nowrap;}
.au .a-qlrow{display: flex; align-items: center; gap: 13px; padding: 10px 16px; background: var(--a-acard); border-top: 1px solid var(--a-abd2); border-bottom: 1px solid var(--a-abd2);}
.au .a-qlrow .a-qi{width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;}
.au .a-qlrow .a-qi.a-add{border: 1.5px dashed var(--a-abd3); display: flex; align-items: center; justify-content: center; color: var(--a-aink3); background: var(--a-acard);}
.au .a-phone.a-bluefield{background: var(--a-acv); color: var(--a-aink);}
.au .a-bluefield .a-gst{color: var(--a-aink3);}
.au .a-bluefield .a-mc{border: 1px solid var(--a-abd); box-shadow: rgba(8, 22, 80, 0.06) 0px 1px 2px, rgba(8, 22, 80, 0.26) 0px 6px 16px -8px;}
.au .a-p-grid.a-auto{grid-template-columns: repeat(auto-fill,minmax(min(var(--a-card,150px),100%),1fr)); gap: 10px; padding: 0px 12px;}
.au .a-p-grid.a-auto .a-mc{position: relative; container-type: inline-size;}
.au .a-auto .a-dov,.au .a-auto .a-dchip{display: none;}
.au .a-auto .a-thumb{border-radius: 0px;}
@container (max-width: 139px){.au .a-auto .a-mtl{display: none;}}
@container (max-width: 139px){.au .a-auto .a-abtn{display: none;}}
@container (max-width: 139px){.au .a-auto .a-dov{display: flex;}}
@container (max-width: 139px){.au .a-auto .a-dchip{display: flex;}}
@container (max-width: 139px){.au .a-auto .a-chin{padding: 6px 7px 7px; gap: 0px;}}
@container (max-width: 139px){.au .a-auto .a-nml{font-size: 11.5px; gap: 5px;}}
@container (max-width: 139px){.au .a-auto .a-nml i{width: 5px; height: 5px;}}
@container (max-width: 139px){.au .a-auto .a-dlbar{left: 6px; right: 6px; bottom: 6px; height: 2.5px;}}
@container (max-width: 104px){.au .a-auto .a-nml{font-size: 10.5px; letter-spacing: -0.2px;}}
@container (max-width: 104px){.au .a-auto .a-dchip{display: none;}}
@container (max-width: 104px){.au .a-auto .a-chin{padding: 5px 6px 6px;}}
@container (max-width: 104px){.au .a-auto .a-dov{width: 21px; height: 21px; right: 4px; bottom: 4px;}}
@container (max-width: 104px){.au .a-auto .a-dov .a-icx{width: 11px; height: 11px;}}
@container (min-width: 220px){.au .a-auto .a-chin{position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 3; background: rgba(18, 24, 40, 0.55); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 9px 9px 9px 13px;}}
@container (min-width: 220px){.au .a-auto .a-nml{color: rgb(255, 255, 255); font-size: 15px;}}
@container (min-width: 220px){.au .a-auto .a-mtl{color: rgba(255, 255, 255, 0.78); font-size: 12px;}}
@container (min-width: 220px){.au .a-auto .a-abtn{width: 34px; height: 34px; border-radius: 50%; background: var(--a-acard); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(51, 58, 70);}}
@container (min-width: 220px){.au .a-auto .a-abtn.a-blue{color: var(--a-ablue);}}
@container (min-width: 220px){.au .a-auto .a-abtn .a-icx{width: 16px; height: 16px;}}
.au .a-dchip{position: absolute; left: 5px; top: 5px; z-index: 2; align-items: center; gap: 4px; background: rgba(16, 24, 43, 0.52); backdrop-filter: blur(7px); border: 1px solid rgba(255, 255, 255, 0.22); color: rgb(255, 255, 255); font-size: 9px; padding: 2px 6px 2px 5px; border-radius: 999px;}
.au .a-dchip i{width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;}
.au .a-dov{position: absolute; right: 5px; bottom: 5px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.93); color: rgb(51, 58, 70); align-items: center; justify-content: center; box-shadow: rgba(10, 16, 30, 0.35) 0px 2px 7px;}
.au .a-dov .a-icx{width: 12px; height: 12px;}
.au .a-dov.a-blue{color: var(--a-ablue);}
.au .a-bootz{position: relative; height: 800px; overflow: hidden; background: rgb(5, 7, 15); color: rgb(201, 216, 240); display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate;}
.au .a-bootz .a-zsky{position: absolute; inset: 0px; z-index: 0; overflow: hidden; pointer-events: none;}
.au .a-bootz .a-zstage{position: relative; width: 260px; height: 260px; display: grid; place-items: center; z-index: 3;}
.au .a-bootz svg.a-lg0{width: 124px; height: 124px; display: block; overflow: visible;}
.au .a-bootz .a-core{fill: rgb(68, 94, 207);}
.au .a-bootz .a-face{fill: rgb(84, 168, 227);}
.au .a-bootz .a-zwm{margin-top: 2px; font-size: 18px; font-weight: 600; color: rgb(232, 240, 255); position: relative; z-index: 3; display: inline-flex; align-items: baseline; white-space: nowrap; letter-spacing: 4.6px; padding-left: 4.6px; text-shadow: rgba(120, 190, 255, 0.55) 0px 0px 14px;}
.au .a-bootz .a-zwm u{text-decoration: none; color: rgb(127, 208, 255); font-weight: 800; letter-spacing: 0px; margin-left: -1px;}
.au .a-bootz .a-nm{font-size: 18px; font-weight: 700; margin-top: 72px; color: rgb(234, 241, 255); position: relative; z-index: 3;}
.au .a-bootz .a-tm{font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: rgb(143, 167, 204); margin-top: 7px; position: relative; z-index: 3;}
.au .a-bootz .a-backp{position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 17px; padding: 7px 18px; font-size: 12.5px; color: rgb(255, 255, 255); background: rgba(16, 24, 43, 0.5);}
@media (prefers-reduced-motion: reduce){.au .a-bootz *{animation: auto ease 0s 1 normal none running none !important;}}
@media (prefers-reduced-motion: reduce){.au .a-bootz svg.a-lg0,.au .a-bootz .a-zwm{opacity: 1 !important; transform: none !important; filter: none !important;}}
.au .a-bz1 .a-stl{position: absolute; left: 50%; top: var(--a-zy,37.6%); width: 2px; height: 2px; margin-left: -1px; transform: rotate(var(--a-a)); transform-origin: 50% 50%;}
.au .a-bz1 .a-stl::after{content: ""; position: absolute; left: 0px; bottom: 0px; width: 2px; height: var(--a-l,54px); border-radius: 2px; background: linear-gradient(to top,transparent,var(--a-zline) 58%,var(--a-zline2)); transform-origin: 50% 100%; opacity: 0; animation-duration: 1.7s; animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.32); animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: a-z1-streak; animation-timeline: auto; animation-range: normal; animation-delay: var(--a-d,0s);}
.au .a-bz1 .a-zflash{position: absolute; left: 50%; top: var(--a-zy,37.6%); width: 520px; height: 520px; margin: -260px 0px 0px -260px; border-radius: 50%; z-index: 2; opacity: 0; background: radial-gradient(circle,var(--a-zflash1) 0%,var(--a-zflash2) 20%,transparent 64%); animation: 3.4s ease-out 0s infinite normal none running a-z1-flash;}
.au .a-bz1 .a-zflash{animation-name: a-z1-flash-l;}
.au .a-bz1 .a-zring{position: absolute; left: 50%; top: var(--a-zy,37.6%); width: 130px; height: 130px; margin: -65px 0px 0px -65px; border-radius: 50%; border: 2px solid var(--a-zring); opacity: 0; z-index: 2; animation: 3.4s cubic-bezier(0.1, 0.72, 0.2, 1) 0s infinite normal none running a-z1-ring;}
.au .a-bz1 .a-zring.a-r2{animation-delay: 0.14s;}
.au .a-bz1 .a-zring.a-r3{animation-delay: 0.28s;}
.au .a-bz1 svg.a-lg0{opacity: 0; filter: drop-shadow(transparent 0px 0px 0px); animation: 3.4s cubic-bezier(0.05, 0.7, 0.1, 1) 0s infinite normal none running a-z1-logo;}
.au .a-bz1 svg.a-lg0 path{fill-opacity: 0; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: 3.4s ease-in-out 0s infinite normal none running a-z1-draw;}
.au .a-bz1 svg.a-lg0 .a-f1{animation-delay: 0.05s;}
.au .a-bz1 svg.a-lg0 .a-f2{animation-delay: 0.1s;}
.au .a-bz1 svg.a-lg0 .a-f3{animation-delay: 0.15s;}
.au .a-bz1 svg.a-lg0 .a-f4{animation-delay: 0.2s;}
.au .a-bz1 .a-zwm{opacity: 0; color: var(--a-zwm); animation: 3.4s cubic-bezier(0.05, 0.7, 0.1, 1) 0s infinite normal none running a-z1-wm;}
.au .a-bz1 .a-zwm u{color: var(--a-zwmp);}
.au .a-bootz.a-bz1{background: var(--a-zbg); color: var(--a-zink);}
.au .a-bz1{--a-zrun: 470px; --a-zbg: #05070F; --a-zink: #c9d8f0; --a-zline: #a9dcff; --a-zline2: #ffffff; --a-zflash1: #ffffff; --a-zflash2: #c8e8ff; --a-zring: rgba(175,224,255,.95); --a-zglow: #3F7DFF; --a-zdust: rgba(190,220,255,.92); --a-zwm: #e8f0ff; --a-zwmp: #7fd0ff; --a-zlogo-glow: rgba(120,190,255,.62); --a-zdraw1: #5c7aa8; --a-zdraw2: #9fe4ff;}
.au .a-bz1{--a-zrun: 240px; --a-zbg: #E9F0FB; --a-zink: #44546f; --a-zline: #3D6BFF; --a-zline2: #1B44C8; --a-zflash1: #3D6BFF; --a-zflash2: #9FC0FF; --a-zring: rgba(61,107,255,.7); --a-zglow: #6E9CF0; --a-zdust: rgba(61,107,255,.75); --a-zwm: #123a63; --a-zwmp: #2f6bd8; --a-zlogo-glow: rgba(61,107,255,.30); --a-zdraw1: #5E769E; --a-zdraw2: #2F6BD8;}
.au .a-bz1 .a-nm{color: var(--a-zink);}
.au .a-bz1 .a-nm{color: var(--a-zwm);}
.au .a-bz1 .a-halo2{position: absolute; left: 50%; top: var(--a-zy,37.6%); width: 118%; aspect-ratio: 1 / 1; z-index: 0; transform: translate(-50%, -50%); border-radius: 50%; background: var(--a-zglow); filter: blur(52px); opacity: 0; animation: 3.4s ease-in-out 0s infinite normal none running a-z1-halo;}
.au .a-bz1 .a-halo2{animation-name: a-z1-halo-l; filter: blur(62px);}
.au .a-bz1 .a-wv{border-width: 1px;}
.au .a-bz1 .a-wv.a-w3{display: none;}
.au .a-bz1 .a-wv{position: absolute; left: 50%; top: var(--a-zy,37.6%); width: 32%; aspect-ratio: 1 / 1; z-index: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--a-zglow); opacity: 0; animation: 3.4s cubic-bezier(0.1, 0.6, 0.2, 1) 0s infinite normal none running a-z1-wv;}
.au .a-bz1 .a-wv.a-w2{animation-delay: 0.3s;}
.au .a-bz1 .a-wv.a-w3{animation-delay: 0.6s;}
.au .a-bz1 .a-dst{position: absolute; inset: 0px; z-index: 1; pointer-events: none;}
.au .a-bz1 .a-dst i{position: absolute; width: var(--a-sz,2px); height: var(--a-sz,2px); border-radius: 50%; background: var(--a-zdust); opacity: 0; box-shadow: 0 0 5px var(--a-zdust); animation: 3.4s ease-in-out 0s infinite normal none running a-z1-dust;}
.au .a-fball{background: rgba(255, 255, 255, 0.9); border-color: rgba(20, 30, 55, 0.14); box-shadow: rgba(12, 20, 42, 0.22) 0px 4px 18px;}
.au .a-fball{--a-lgc: #445ECF; --a-lgf: #54A8E3;}
.au .a-fball{color: rgb(255, 255, 255);}
.au .a-fcwrap{position: absolute; right: 10px; top: 150px; z-index: 6; display: flex; flex-direction: row; align-items: center; gap: 8px;}
.au .a-fcwrap .a-fball{position: static;}
.au .a-fcard{width: 240px; border-radius: 16px; overflow: hidden; background: rgba(18, 26, 46, 0.82); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: rgba(4, 8, 20, 0.5) 0px 14px 40px; color: rgb(255, 255, 255);}
.au .a-fcard{background: rgba(252, 253, 255, 0.92); border-color: rgba(20, 30, 55, 0.12); box-shadow: rgba(12, 20, 42, 0.26) 0px 14px 40px; color: var(--a-aink);}
.au .a-fcard .a-fch{display: flex; align-items: center; gap: 7px; padding: 11px 13px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);}
.au .a-fcard .a-fch{border-bottom-color: var(--a-abd2);}
.au .a-fcard .a-fch .a-fcs{margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 10px; opacity: 0.66;}
.au .a-fcard .a-fcg{display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 4px;}
.au .a-fcard .a-fcg button{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 10px;}
.au .a-fcard .a-fcg button .a-icx{width: 20px; height: 20px;}
.au .a-fcard .a-fcg button b{font-size: 12px; font-weight: 600; opacity: 0.9;}
.au .a-fcard .a-fcg button:hover{background: rgba(255, 255, 255, 0.1);}
.au .a-fcard .a-fcg button:hover{background: var(--a-acv);}
.au .a-fcard .a-fcf{display: flex; gap: 7px; padding: 6px 10px 11px;}
.au .a-fcard .a-fcf button{flex: 1 1 0%; border: 1px solid rgba(255, 255, 255, 0.22); background: none; color: inherit; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 600; padding: 8px 0px; border-radius: 9px; cursor: pointer;}
.au .a-fcard .a-fcf button{background: var(--a-acard); border: 1px solid var(--a-ablue-bd); color: var(--a-ablue);}
.au .a-fcard .a-fcf button.a-danger{color: rgb(255, 151, 163); border-color: rgba(255, 151, 163, 0.4);}
.au .a-fcard .a-fcf button.a-danger{color: var(--a-ared); border-color: var(--a-ared-bd);}
.au .a-soloind{display: flex; align-items: center; gap: 10px; padding: 11px 16px 9px; flex: 0 0 auto;}
.au .a-soloind .a-dots{flex: 1 1 0%; display: flex; justify-content: center; gap: 6px;}
.au .a-soloind .a-dots i{width: 6px; height: 6px; border-radius: 3px; background: var(--a-abd3); transition: width var(--a-t-base) var(--a-e-standard);}
.au .a-soloind .a-dots i.a-on{width: 18px; background: var(--a-aink);}
.au .a-soloind .a-lockb{width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--a-aink3); border: 1px solid var(--a-abd3); background: var(--a-acard);}
.au .a-soloind .a-lockb .a-icx{width: 15px; height: 15px;}
.au .a-phone:has(.a-tabbar){height: calc(var(--a-pw) * 844 / 390);}
.au .a-phone:has(.a-tabbar) .a-abody > .a-p-grid{flex: 1 1 0px; min-height: 0px; overflow: clip; overflow-clip-margin: 14px; align-content: start;}
.au .a-tabbar{display: flex; border-top: 1px solid var(--a-abd2); background: var(--a-acard); flex: 0 0 auto; margin-top: auto;}
.au .a-phone.a-bluefield .a-tabbar{margin-top: auto;}
.au .a-tabbar .a-tb1{flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0px 7px; font-size: 12px; font-weight: 600; color: var(--a-aink4);}
.au .a-tabbar .a-tb1 .a-icx{width: 21px; height: 21px;}
.au .a-tabbar .a-tb1.a-on{color: var(--a-ablue);}
@keyframes a-vm-sheen { 
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes a-vm-pulse { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
@keyframes a-vm-breathe { 
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes a-z1-streak { 
  0% { transform: translateY(-6px) scaleY(0.1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(calc(-1 * var(--a-zrun,470px))) scaleY(2.6); opacity: 0; }
}
@keyframes a-z1-flash { 
  0%, 25% { opacity: 0; transform: scale(0.18); }
  30% { opacity: 1; transform: scale(1); }
  46% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes a-z1-flash-l { 
  0%, 25% { opacity: 0; transform: scale(0.18); }
  30% { opacity: 0.58; transform: scale(1); }
  46% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes a-z1-ring { 
  0%, 28% { opacity: 0; transform: scale(0.22); }
  33% { opacity: 0.95; }
  64%, 100% { opacity: 0; transform: scale(4.4); }
}
@keyframes a-z1-logo { 
  0%, 27% { opacity: 0; transform: scale(1.32); filter: drop-shadow(transparent 0px 0px 0px); }
  31% { opacity: 1; transform: scale(1.02); filter: drop-shadow(0 0 26px var(--a-zlogo-glow)); }
  40%, 70% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 9px var(--a-zlogo-glow)); }
  77% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 24px var(--a-zlogo-glow)); }
  86% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 14px var(--a-zlogo-glow)); }
  100% { opacity: 0; transform: scale(0.72); filter: drop-shadow(transparent 0px 0px 0px); }
}
@keyframes a-z1-draw { 
  0%, 28% { stroke-dashoffset: 1500; fill-opacity: 0; stroke-opacity: 0; stroke: var(--a-zdraw1); }
  31% { stroke-dashoffset: 1430; fill-opacity: 0; stroke-opacity: 1; stroke: var(--a-zdraw1); }
  56% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; stroke: var(--a-zdraw1); }
  63% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; stroke: var(--a-zdraw2); }
  75%, 86% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; stroke: var(--a-zdraw2); }
  100% { stroke-dashoffset: 1500; fill-opacity: 0; stroke-opacity: 0; stroke: var(--a-zdraw1); }
}
@keyframes a-z1-wm { 
  0%, 63% { opacity: 0; letter-spacing: 17px; padding-left: 17px; }
  75%, 86% { opacity: 1; letter-spacing: 4.6px; padding-left: 4.6px; }
  100% { opacity: 0; letter-spacing: 10px; padding-left: 10px; }
}
@keyframes a-z1-halo { 
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  33% { opacity: 0.62; transform: translate(-50%, -50%) scale(1); }
  60%, 86% { opacity: 0.34; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes a-z1-halo-l { 
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  33% { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
  60%, 86% { opacity: 0.11; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes a-z1-wv { 
  0%, 36% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  46% { opacity: 0.45; }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}
@keyframes a-z1-dust { 
  0%, 52% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 0.6; transform: scale(1) translate(var(--a-dx,0),var(--a-dy,0)); }
  82% { opacity: 0.22; transform: scale(.7) translate(var(--a-dx,0),var(--a-dy,0)); }
  92%, 100% { opacity: 0; transform: scale(0.3); }
}
/* /appui:css */

/* ============================================================
   App 真实界面（V10，2026-09-23）
   界面本身（上面 appui:css 那块）由 scripts/appui/extract.mjs 从设计定稿抽出，这里只写三件事：
   1. 宿主：定稿画布宽 360，按样机屏宽整体 scale（--w 是样机外框宽度，无单位，屏宽 = --w - 20）
   2. 卡片缩略图里的画面：定稿用 Pixel 实拍壁纸（带第三方图标），官网自己画四种：桌面 / 游戏 / 聊天 / 视频
   3. 界面预览区的密度演示：纯 CSS 单选框切卡宽，信息档由定稿自带的容器查询自动切
   ============================================================ */
.au-host{width:calc(var(--w) * 1px)}
.au{
  position:absolute;left:0;top:0;width:360px;height:772px; /* 360 × 19.3/9，与 .phone-screen 的宽高比一致 */
  /* 用 scale 不用 zoom：WebKit 按 zoom 之后的尺寸算容器查询（163dp 的卡被当成 130 → 掉进精简档），
     scale 不改布局尺寸，三家引擎都按定稿原尺寸判档 */
  transform-origin:0 0;scale:calc((var(--w) - 20) / 360);
  font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#10182b;text-align:left;letter-spacing:normal;font-weight:400;
}
.au>.a-phone,.au>.a-phone:has(.a-tabbar){width:100%;height:100%;min-height:0;border:0;border-radius:0}
.au svg{display:block}
/* 行高按内容：网格高度是定的、卡片又带 overflow:hidden，不写这条行高会被均分压扁、缩略图被裁（真机是首排完整、次排被底栏截断） */
.au .a-p-grid{grid-auto-rows:max-content}
/* 卡片带定位（auto 网格给 .mc 设了 relative），不抬底栏的话被截断的次排卡片会压在 Tab 图标上 */
.au .a-tabbar{position:relative;z-index:2}

/* —— 缩略图画面：全部按缩略图自身尺寸（容器查询单位）缩放，80dp 的小卡和整屏用同一套 —— */
.au .x-md,.au .x-game,.au .x-chat,.au .x-vid,.au .x-dim{position:absolute;inset:0;overflow:hidden}
.au .x-md,.au .x-game,.au .x-chat,.au .x-vid{container-type:size}
.au .x-dim{filter:brightness(.74)}

/* 虚拟机桌面 */
.au .x-md{display:flex;flex-direction:column;background:var(--wp);color:#172033}
.au .x-w1{--wp:radial-gradient(90% 46% at 88% 4%,rgba(255,255,255,.75),transparent 62%),linear-gradient(166deg,#BCD2FF 0%,#D6CEFF 50%,#FBDDEA 100%)}
.au .x-w2{--wp:radial-gradient(80% 42% at 16% 6%,rgba(150,190,255,.42),transparent 62%),linear-gradient(170deg,#26345F 0%,#3A3170 56%,#633C70 100%);color:#fff}
.au .x-w3{--wp:radial-gradient(84% 44% at 82% 4%,rgba(255,255,255,.72),transparent 62%),linear-gradient(162deg,#B6ECE2 0%,#C4DFFF 56%,#E3D8FF 100%)}
.au .x-sb{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 6.5cqw 0;font-size:3.5cqw;line-height:1}
.au .x-sb b{font-weight:600;font-size:inherit;color:inherit}
.au .x-sb span{display:flex;gap:1.2cqw;align-items:center}
.au .x-sb span i{width:3.4cqw;height:2.4cqw;border-radius:.6cqw;background:currentColor;opacity:.8}
.au .x-sb span i+i{width:5.6cqw}
.au .x-clk{margin:11cqh 0 0 8cqw;line-height:1}
.au .x-clk b{display:block;font-size:18cqw;font-weight:300;letter-spacing:-.045em;color:inherit}
.au .x-clk small{display:block;font-size:4.2cqw;font-weight:600;margin-top:2.4cqw;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84cqw}
.au .x-apps,.au .x-dock{display:grid;grid-template-columns:repeat(4,1fr)}
.au .x-apps{margin-top:auto;gap:6.5cqw 8cqw;padding:0 8.5cqw}
.au .x-dock{gap:8cqw;margin:6.5cqw 5.5cqw 0;padding:3.4cqw 3cqw;border-radius:9cqw;background:rgba(255,255,255,.4)}
.au .x-w2 .x-dock{background:rgba(255,255,255,.14)}
.au .x-md i{aspect-ratio:1;border-radius:26%;display:grid;place-items:center;box-shadow:0 .5cqw 1.4cqw rgba(20,30,60,.2)}
:where(.x-md i){color:#fff}
.au .x-md i svg{width:52%;height:52%}
.au .x-md::after{content:"";flex:none;width:30cqw;height:1.2cqw;border-radius:1cqw;background:currentColor;opacity:.35;margin:4.5cqw auto 2.6cqw}
.ic-game{background:#6349EA}
@container (max-width:199px){.au .x-sb{display:none}}
@container (max-width:119px){.au .x-clk small{display:none}}

/* 挂机中的游戏：只画界面（计时环 + 收益列表），不画风景角色——README「只画 UI，不画插画」 */
.au .x-game{display:flex;flex-direction:column;align-items:center;color:#fff;background:radial-gradient(90% 50% at 50% 34%,rgba(92,110,255,.5),transparent 70%),linear-gradient(180deg,#20245A 0%,#14163A 100%)}
.au .x-g-top{align-self:stretch;display:flex;align-items:center;gap:2.6cqw;padding:5cqw 4.5cqw 0}
.au .x-av{width:12cqw;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#FFD66B,#FF8A4C);border:.9cqw solid #fff;flex:none}
.au .x-g-top b{display:block;font-size:4.8cqw;font-weight:800;line-height:1.1}
.au .x-xp{display:block;width:24cqw;height:1.9cqw;border-radius:1cqw;background:rgba(255,255,255,.2);margin-top:1.4cqw;position:relative;overflow:hidden}
.au .x-xp::before{content:"";position:absolute;inset:0 42% 0 0;background:#FFD34E}
.au .x-g-cur{margin-left:auto;display:flex;align-items:center;gap:1.4cqw;font-size:4.2cqw;font-weight:700;line-height:1;padding:1.2cqw 2.8cqw 1.2cqw 1.2cqw;border-radius:9cqw;background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.au .x-g-cur i,.au .x-l1{background:radial-gradient(circle at 35% 30%,#FFF3B0,#F5B400 60%,#C98600)}
.au .x-g-cur i{width:4.4cqw;aspect-ratio:1;border-radius:50%}
.au .x-g-ring{margin-top:11cqh;width:58cqw;aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:conic-gradient(#7C95FF 0 72%,rgba(255,255,255,.12) 72% 100%);box-shadow:0 0 14cqw rgba(110,135,255,.4)}
.au .x-g-ring::before{content:"";position:absolute;inset:3.4cqw;border-radius:50%;background:#1B1E4A}
.au .x-g-ring>div{position:relative;text-align:center;line-height:1}
.au .x-g-ring b{display:block;font-size:12.5cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.au .x-g-ring small{display:block;font-size:4.2cqw;opacity:.66;margin-top:2.4cqw}
.au .x-auto{margin-top:5cqw;font-size:4.2cqw;font-weight:800;letter-spacing:.16em;line-height:1;padding:1.8cqw 4cqw;border-radius:9cqw;background:rgba(124,149,255,.28);border:.4cqw solid rgba(170,188,255,.7)}
.au .x-g-loot{margin-top:auto;align-self:stretch;display:flex;flex-direction:column;gap:2.4cqw;padding:0 6cqw 7cqw}
.au .x-g-loot>div{display:flex;align-items:center;gap:3cqw;padding:2.6cqw 3.4cqw;border-radius:3cqw;background:rgba(255,255,255,.08)}
.au .x-g-loot i{flex:none;width:5cqw;aspect-ratio:1;border-radius:1.4cqw;rotate:45deg}
.au .x-l2{background:#46D39A}
.au .x-l3{background:#B98BFF}
.au .x-g-loot span{flex:1;height:2.6cqw;border-radius:2cqw;background:rgba(255,255,255,.2)}
.au .x-g-loot b{font-size:4.4cqw;font-weight:700;font-variant-numeric:tabular-nums}
@container (max-width:119px){.au .x-g-loot,.au .x-g-cur{display:none}.au .x-g-ring{margin-top:16cqh}}

/* 聊天应用 */
.au .x-chat{background:#F3F5F9;display:flex;flex-direction:column}
.au .x-ch-top{flex:none;height:19cqw;background:#fff;display:flex;align-items:flex-end;padding:0 5cqw 3.4cqw;gap:3cqw}
.au .x-ch-top b{width:24cqw;height:4.2cqw;border-radius:2cqw;background:#1B2333}
.au .x-ch-top i{margin-left:auto;width:5.4cqw;height:5.4cqw;border-radius:50%;border:.9cqw solid #1B2333}
.au .x-ch-row{flex:none;display:flex;align-items:center;gap:3.6cqw;padding:3.4cqw 5cqw;background:#fff;border-bottom:.3cqw solid #EDF0F5}
.au .x-ch-row>i{width:12.5cqw;aspect-ratio:1;border-radius:28%;flex:none;background:#5B8CFF}
.au .x-ch-row:nth-child(3)>i{background:#FF9F43}
.au .x-ch-row:nth-child(4)>i{background:#0FBE7C}
.au .x-ch-row:nth-child(5)>i{background:#A06CF0}
.au .x-ch-row:nth-child(6)>i{background:#F0598B}
.au .x-ch-row:nth-child(7)>i{background:#2BB5D8}
.au .x-ch-row:nth-child(8)>i{background:#8FA0BA}
.au .x-ch-row div{flex:1;min-width:0}
.au .x-ch-row b{display:block;height:3.6cqw;width:42%;border-radius:2cqw;background:#2A3346}
.au .x-ch-row span{display:block;height:2.8cqw;width:80%;border-radius:2cqw;background:#CBD1DC;margin-top:2.2cqw}
.au .x-ch-row em{flex:none;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#FA5151}
.au .x-ch-tab{margin-top:auto;flex:none;display:grid;grid-template-columns:repeat(4,1fr);padding:3.4cqw 8cqw 5cqw;background:#fff;border-top:.3cqw solid #EDF0F5;justify-items:center}
.au .x-ch-tab i{width:6.4cqw;height:6.4cqw;border-radius:30%;background:#C3CAD6}
.au .x-ch-tab i:first-child{background:#3D6BFF}

/* 视频 */
.au .x-vid{background:#0E1220;display:flex;flex-direction:column}
.au .x-v-frame{flex:none;margin-top:13cqw;aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,#3656D6,#7650DF 55%,#E0598B)}
.au .x-v-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 36%,rgba(255,255,255,.4),transparent 62%)}
.au .x-v-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:15cqw;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.34)}
.au .x-v-play::before{content:"";position:absolute;left:39%;top:29%;border-left:5.4cqw solid #fff;border-top:3.2cqw solid transparent;border-bottom:3.2cqw solid transparent}
.au .x-v-bar{position:absolute;left:0;right:0;bottom:0;height:1.3cqw;background:rgba(255,255,255,.28)}
.au .x-v-bar i{display:block;width:62%;height:100%;background:#FF4D6D}
.au .x-v-meta{flex:none;padding:4.4cqw 5cqw 3cqw}
.au .x-v-meta b{display:block;height:3.8cqw;width:72%;border-radius:2cqw;background:#E6EAF3}
.au .x-v-meta span{display:block;height:2.8cqw;width:44%;border-radius:2cqw;background:#586277;margin-top:2.2cqw}
.au .x-v-list>div{display:flex;gap:3.4cqw;padding:2.6cqw 5cqw}
.au .x-v-list i{flex:none;width:36cqw;aspect-ratio:16/9;border-radius:2.4cqw;background:linear-gradient(135deg,#2C3E73,#51398C)}
.au .x-v-list>div:nth-child(2) i{background:linear-gradient(135deg,#1F6E7A,#2E4E8C)}
.au .x-v-list>div:nth-child(3) i{background:linear-gradient(135deg,#7A3A5E,#3E3584)}
.au .x-v-list span{flex:1;min-width:0}
.au .x-v-list b{display:block;height:3.2cqw;border-radius:2cqw;background:#C9CFDA}
.au .x-v-list em{display:block;height:2.6cqw;width:60%;border-radius:2cqw;background:#586277;margin-top:2.2cqw}

/* 详情页「快捷启动」：定稿画的是纯色占位块，这里放官网的应用图标 */
.au .a-qlrow .a-qi[class*="ic-"]{display:grid;place-items:center;box-shadow:0 1px 3px rgba(28,38,64,.15)}
:where(.au .a-qlrow .a-qi){color:#fff}
.au .a-qlrow .a-qi svg{width:52%;height:52%}

/* —— 界面预览 · 密度演示 —— */
.x-dz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:24px 0 96px}
.x-dz-k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--brand)}
.x-dz-k::after{content:"";width:34px;height:2px;background:var(--brand);border-radius:2px}
.x-dz h3{font-size:clamp(27px,2.9vw,37px);font-weight:800;letter-spacing:-.028em;line-height:1.22;margin:18px 0 14px}
.x-dz-copy>p{font-size:15.5px;color:var(--ink-2);line-height:1.85;max-width:32em}
.x-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:28px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);max-width:460px}
.x-seg label{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 4px 10px;border-radius:11px;cursor:pointer;transition:background .2s,color .2s}
.x-seg input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.x-seg b{font-size:15px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.x-seg small{font-size:12px;color:var(--ink-3);font-weight:500}
.x-seg label:hover{background:var(--bg)}
.x-seg label:has(input:checked){background:var(--brand);box-shadow:var(--shadow-btn)}
.x-seg label:has(input:checked) b,.x-seg label:has(input:checked) small{color:#fff}
.x-seg label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.x-dz-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.x-dz-visual{position:relative;height:640px;display:flex;justify-content:center;align-items:center}
.x-dz-phone{--w:300;position:relative;z-index:1}
/* 定稿的密度档是按 390dp 宽的手机定的（80dp → 4 列、110dp → 3 列）；360 画布上 4 列会掉成 3 列，这台单独用 390 画布 */
.x-dz-phone .au{width:390px;height:836px;scale:calc((var(--w) - 20) / 390)}
/* 卡宽四档：80 / 110 / 150 / 320dp（定稿 P37~P40） */
.x-dz .a-p-grid.a-auto{--a-card:150px}
.x-dz:has(.x-d4:checked) .a-p-grid.a-auto{--a-card:80px}
.x-dz:has(.x-d3:checked) .a-p-grid.a-auto{--a-card:110px}
.x-dz .a-soloind{display:none}
/* 1 列 = 定稿的 solo 形态：一台占满，信息条是实底条，底下是页点 */
.x-dz:has(.x-d1:checked) .a-p-grid.a-auto{--a-card:320px;display:flex;flex-direction:column;padding:0 18px;flex:1 1 auto;min-height:0;overflow:hidden}
.x-dz:has(.x-d1:checked) .a-p-grid.a-auto>.a-mc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:14px;box-shadow:rgba(8,22,80,.08) 0 1px 3px,rgba(8,22,80,.3) 0 10px 26px -4px;overflow:clip}
.x-dz:has(.x-d1:checked) .a-p-grid.a-auto>.a-mc:nth-child(n+2){display:none}
.x-dz:has(.x-d1:checked) .a-thumb{aspect-ratio:auto;flex:1 1 auto;min-height:0;border-radius:0}
.x-dz:has(.x-d1:checked) .a-chin{position:static;background:var(--a-acard);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:9px 14px;gap:10px}
.x-dz:has(.x-d1:checked) .a-nml{color:var(--a-aink);font-size:15px}
.x-dz:has(.x-d1:checked) .a-mtl{color:var(--a-aink3);font-size:12.5px}
.x-dz:has(.x-d1:checked) .a-abtn{width:28px;height:28px;border-radius:6px;border:1px solid var(--a-ablue-bd);background:var(--a-acard);color:var(--a-ablue)}
.x-dz:has(.x-d1:checked) .a-dchip,.x-dz:has(.x-d1:checked) .a-dov{display:none}
.x-dz:has(.x-d1:checked) .a-soloind{display:flex}
/* 顶栏的「宫格/列表」切换旁边就是密度钮（定稿 P42）：演示时点亮它，和页面上的单选对得上 */
.x-dz .a-hact .a-hb:first-child{background:rgba(255,255,255,.28)}
/* 开机页 Logo 是描边动画画出来的；定稿的减弱动效规则只把它设成不透明，描边还停在 dashoffset:1500，等于看不见；这里停在关键帧 75%~86% 那段填满的静止态 */
@media (prefers-reduced-motion:reduce){.au .a-bz1 svg.a-lg0 path{fill-opacity:1}}

@media (max-width:1080px){
  .x-dz{grid-template-columns:1fr;gap:36px;padding-bottom:80px}
  .x-dz-visual{max-width:560px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .x-seg{max-width:none}
  .x-seg b{font-size:14px}
  .x-dz-visual{height:600px}
  .x-dz-phone{--w:276}
}

/* ============================================================
   首屏 · 交流群二维码（2026-09-24，替换原「了解使用场景」按钮；使用场景在导航里仍有入口）
   二维码 = App 里 url_qq_group 那条短链（29×29 模块，Q 级纠错，60px 仍可识别）；
   整张卡是链接：手机上扫不了自己的屏幕，点一下直接拉起 QQ 加群
   ============================================================ */
.hero-cta{align-items:center;gap:18px}
.qr-card{display:flex;align-items:center;gap:14px;padding:9px 20px 9px 9px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);text-align:left;transition:transform .25s,box-shadow .25s,border-color .25s}
.qr-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:rgba(61,107,255,.35)}
.qr-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.qr-code{width:84px;height:84px;flex:none;border-radius:8px}
.qr-t{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.qr-t b{font-size:15px;font-weight:750;color:var(--ink)}
.qr-t small{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.qr-t em{font-style:normal;font-size:12px;color:var(--brand);font-weight:600;margin-top:4px}
@media (max-width:640px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero-cta .btn-lg{justify-content:center}
  .qr-card{justify-content:center}
}