/* Mu3ic 对外主页（https://mu3ic.xyz/）：首页 / 上手（start/）/ 更新（changelog/）三张页面共用。
   A 浮岛的视觉语言（mockups/promo-video-a.html），token 取自 App 的 shoal（ui/theme/Shoal.kt）；结构见 mockups/site-restructure.html。
   独立站点，不被任何页面嵌入。构建：scripts/build-promo.sh；部署：scripts/deploy-site.sh（nginx 配置 deploy/nginx-mu3ic-site.conf）。
   不发任何外部请求：系统字体、内联 SVG 图标。样式和脚本都是同源文件、页面里没有 style 属性——CSP 只放行 'self'。
   这里不能引用别的文件（图片、字体、别的样式表）：构建只改页面里的引用，样式里的不改名，查到就报错。
   ?theme=light|dark 强制明暗，?dev=desktop|android|wechat|ios 强制下载区的设备状态（theme.js，评审纸面用）。 */
:root{
  --wall:#E9E1D3;--sf:#FEF6EE;--sf2:#F6ECDF;--sf3:#ECE0CF;--tx:#2A2217;--tx2:#8A7C65;--hair:#E0D4C2;
  --ol:#705A0F;--onol:#FFF6E0;--butter:#F6DE96;--butterInk:#2A1800;--gold:#D4B35B;--faint:#D6CCC0;--shadow:70,48,18;
  --redBg:#F6D5D2;--redFg:#B4181E;
  --glowA:#F6DE96;--glowB:#FEF6EE;--phone:#0E0C09;--codebg:#F6ECDF;
  --ui:"PingFang SC","Noto Sans SC",system-ui,sans-serif;--cn:"PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,Menlo,monospace;
  --pw:262px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --wall:#14120E;--sf:#221E18;--sf2:#2B261E;--sf3:#383126;--tx:#EDE4D6;--tx2:#A3977F;--hair:#302A21;
  --ol:#D4B35B;--onol:#2A1800;--butter:#4A3E1E;--butterInk:#F6DE96;--gold:#D4B35B;--faint:#4A4235;--shadow:0,0,0;
  --redBg:#4A2422;--redFg:#E0787C;
  --glowA:#3A3018;--glowB:#1E1A14;--phone:#050403;--codebg:#2B261E;color-scheme:dark}}
:root[data-theme="dark"]{
  --wall:#14120E;--sf:#221E18;--sf2:#2B261E;--sf3:#383126;--tx:#EDE4D6;--tx2:#A3977F;--hair:#302A21;
  --ol:#D4B35B;--onol:#2A1800;--butter:#4A3E1E;--butterInk:#F6DE96;--gold:#D4B35B;--faint:#4A4235;--shadow:0,0,0;
  --redBg:#4A2422;--redFg:#E0787C;
  --glowA:#3A3018;--glowB:#1E1A14;--phone:#050403;--codebg:#2B261E;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:80px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--wall);color:var(--tx);font:16px/1.7 var(--cn);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ol)}
img,video{display:block}
h1,h2,h3,p{margin:0}
.ms{width:1em;height:1em;flex-shrink:0;fill:currentColor;display:inline-block;vertical-align:-.15em}
.sprite{position:absolute;width:0;height:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}

/* ── 顶栏：三张页面共用，当前页的链接是一颗胶囊 ── */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--wall) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--hair) 70%,transparent)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);font:700 19px var(--ui)}
.brand img{width:30px;height:30px;border-radius:50%}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;color:var(--tx2);text-decoration:none;font:500 14.5px var(--ui);white-space:nowrap}
.nav a:hover{color:var(--tx)}
.nav a.on{background:var(--sf);color:var(--ol);font-weight:600;box-shadow:0 2px 3px -1px rgba(var(--shadow),.3),0 0 0 .5px rgba(var(--shadow),.08)}
.top .btn{height:38px;padding:0 18px;font-size:14.5px}

/* ── 按钮 / 胶囊 / 浮岛 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border:0;border-radius:999px;text-decoration:none;font:600 16.5px var(--ui);white-space:nowrap;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn .ms{font-size:22px}
.btn.pri{background:var(--ol);color:var(--onol);box-shadow:0 14px 30px -16px rgba(var(--shadow),.7)}
.btn.sec{background:var(--sf2);color:var(--ol);box-shadow:inset 0 0 0 1px rgba(var(--shadow),.08)}
.btn.sm{height:38px;padding:0 16px;font-size:14px;gap:6px}
.btn.sm .ms{font-size:18px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;background:var(--ol);color:var(--onol);font:600 14.5px var(--ui);letter-spacing:.04em}
.chip .ms{font-size:18px}
.isle{background:var(--sf);border-radius:26px;box-shadow:0 18px 40px -26px rgba(var(--shadow),.55),0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.08)}
.tlink{display:inline-flex;align-items:center;gap:4px;font:600 14px var(--ui);color:var(--ol);text-decoration:none}
.tlink:hover{text-decoration:underline}
.tlink .ms{font-size:17px}

/* ── 首屏：左边文字 + 下载区，右边斜置手机墙（同赠码邮件头图 D1：墙转 −16°，渐隐的边跟着墙一起斜，底下垫声波） ── */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20%;z-index:-3;opacity:.9;
  background:radial-gradient(40% 50% at 70% 50%,var(--glowA) 0,transparent 70%),radial-gradient(35% 40% at 10% 30%,var(--glowB) 0,transparent 70%)}
.bgwave{position:absolute;inset:0;z-index:-2;width:100%;height:100%;fill:var(--faint);opacity:.6}
.hero .wrap{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:660px;padding-top:56px;padding-bottom:64px}
.hero .txt{max-width:540px}
.lockup{display:flex;align-items:center;gap:18px}
.lockup img{width:66px;height:66px;border-radius:50%;box-shadow:0 18px 34px -16px rgba(var(--shadow),.65),0 0 0 2px rgba(112,90,15,.10)}
.lockup b{font:800 70px/1 var(--ui);letter-spacing:-.02em}
.claim{margin-top:22px;font:800 40px/1.3 var(--cn);color:var(--ol);letter-spacing:-.005em}
.lead{margin-top:14px;font:500 17px/1.75 var(--cn);color:var(--tx2);max-width:29em}
.assure{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font:500 13.5px var(--ui);color:var(--tx2)}
.assure span{display:inline-flex;align-items:center;gap:5px}
.assure .ms{font-size:16px;color:var(--ol)}

.wall{position:absolute;z-index:-1;left:50%;top:50%;width:1400px;height:1800px;margin:-900px 0 0 30px;display:flex;gap:30px;align-items:flex-start;pointer-events:none;
  transform:rotate(-16deg);transform-origin:18% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 170px);mask-image:linear-gradient(90deg,transparent 0,#000 170px)}
.wall .col{flex:none;width:var(--pw);display:flex;flex-direction:column;gap:30px}
.wall .col:nth-child(1){margin-top:330px}
.wall .col:nth-child(2){margin-top:150px}
.wall .col:nth-child(3){margin-top:290px}
.wall .col:nth-child(4){margin-top:90px}
.wp{border-radius:calc(var(--pw)*.15);background:var(--phone);padding:calc(var(--pw)*.03);box-shadow:0 40px 60px -34px rgba(var(--shadow),.6),0 0 0 1px rgba(0,0,0,.2)}
.wp img{width:100%;aspect-ratio:1080/2376;object-fit:cover;object-position:top;border-radius:calc(var(--pw)*.12)}

/* ── 下载区：按访客的设备只显示一种。data-dev 由 theme.js 写在 <html> 上；没有脚本时显示「电脑」那种（二维码 + 下载链接都在） ── */
.get{margin-top:26px;max-width:480px}
.get .g{display:none}
html:not([data-dev]) .get .g-desktop,html[data-dev="desktop"] .get .g-desktop{display:flex}
html[data-dev="android"] .get .g-android,html[data-dev="wechat"] .get .g-wechat,html[data-dev="ios"] .get .g-ios{display:block}
.g-desktop{align-items:center;gap:18px;padding:14px 22px 14px 14px}
.qr{flex:none;width:128px;height:128px;border-radius:16px;background:#fff;padding:9px;box-shadow:0 0 0 1px rgba(var(--shadow),.08)}
.qr img{width:100%;height:100%}
.g h3{font:700 19px/1.35 var(--cn);color:var(--tx)}
.g .m{margin-top:3px;font:500 13.5px/1.55 var(--ui);color:var(--tx2)}
.g .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.g-android .btn{width:100%}
.g-android .btn small{font:500 14px var(--ui);opacity:.8}
.g-android .m{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 14px}
.g-note{display:flex;gap:14px;padding:18px 20px}
.g-note>.ms{font-size:28px;color:var(--ol);margin-top:2px}
.g-note p{margin-top:4px;font:400 14.5px/1.65 var(--cn);color:var(--tx2)}
.g-note p b{color:var(--tx);font-weight:600}
.g-note .btn{margin-top:12px}

/* ── 前提：三步 ── */
.need{padding:36px 0 8px}
.need .hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.need h2{font:800 25px/1.35 var(--cn)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 0;padding:0;list-style:none;counter-reset:st}
.steps li{position:relative;background:var(--sf);border-radius:22px;padding:18px 20px 18px 66px;box-shadow:0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.07)}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:18px;top:19px;width:34px;height:34px;border-radius:50%;background:var(--ol);color:var(--onol);font:700 15.5px/34px var(--ui);text-align:center}
.steps b{display:block;font:700 16.5px/1.4 var(--cn)}
.steps span{display:block;margin-top:3px;font:400 13.5px/1.6 var(--cn);color:var(--tx2)}

/* ── 功能：拼贴。每张卡放一处放大到能看清的细节，不再五段各摆两台小手机 ── */
.feat{padding:72px 0 8px}
.sec-h h2{margin-top:14px;font:900 42px/1.2 var(--cn);letter-spacing:-.01em;text-wrap:balance}
.sec-h p{margin-top:12px;max-width:34em;font:400 17px/1.8 var(--cn);color:var(--tx2)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:184px;gap:20px;margin-top:34px}
.bx{--px:30px;position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--sf);border-radius:32px;padding:28px var(--px) 0;box-shadow:0 22px 44px -30px rgba(var(--shadow),.55),0 0 0 1px rgba(var(--shadow),.06)}
.bx .lab{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--ui);letter-spacing:.08em;color:var(--ol)}
.bx .lab i{font:500 12px/1 var(--ui);font-style:normal;letter-spacing:.02em;color:var(--butterInk);background:var(--butter);padding:4px 8px;border-radius:999px}
.bx h3{margin-top:10px;font:900 29px/1.25 var(--cn);letter-spacing:-.01em}
.bx p{margin-top:10px;font:400 15px/1.75 var(--cn);color:var(--tx2);max-width:27em}
.bx p b{color:var(--tx);font-weight:500}
.b-lib{grid-column:1/6;grid-row:1/5}
.b-wave{grid-column:6/13;grid-row:1/3}
.b-lyr{grid-column:6/10;grid-row:3/5}
.b-off{grid-column:10/13;grid-row:3/5}
.b-detail{grid-column:1/8;grid-row:5/8}
.b-live{grid-column:8/13;grid-row:5/8}
/* 卡里的手机：只露上半截，下半截出血到卡外 */
.bph{flex:none;align-self:center;width:var(--bw,300px);margin-top:26px;border-radius:calc(var(--bw,300px)*.15) calc(var(--bw,300px)*.15) 0 0;background:var(--phone);padding:calc(var(--bw,300px)*.03) calc(var(--bw,300px)*.03) 0;box-shadow:0 30px 50px -26px rgba(var(--shadow),.6),0 0 0 1px rgba(0,0,0,.2)}
.bph img,.bph video{width:100%;aspect-ratio:1080/2376;object-fit:cover;object-position:top;border-radius:calc(var(--bw,300px)*.12) calc(var(--bw,300px)*.12) 0 0;background:var(--phone)}
.b-lib{background:radial-gradient(70% 45% at 50% 78%,var(--glowA) 0,transparent 72%),var(--sf)}
.b-live{background:radial-gradient(70% 45% at 50% 78%,var(--glowA) 0,transparent 72%),var(--sf)}
.b-live .bph{--bw:262px}
/* 细节裁片：截图里那一块原样放大（裁哪一块写在页面的 ?crop= 里，构建时裁） */
.crop{border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--shadow),.08),0 14px 26px -18px rgba(var(--shadow),.5)}
.crop img{width:100%;height:100%;object-fit:cover;object-position:top}
.b-lyr .crop,.b-off .crop{margin:auto calc(var(--px)*-1) 0;border-radius:0;box-shadow:0 -1px 0 rgba(var(--shadow),.08)}
/* 波形卡：手机从卡的上沿出血，露出下半截（时间、波形、控制键） */
.b-wave{flex-direction:row;gap:22px}
.b-wave .t{flex:1 1 0;min-width:0}
.b-wave .bph{--bw:252px;align-self:stretch;display:flex;margin:-28px 4px 28px 0;border-radius:0 0 calc(var(--bw)*.15) calc(var(--bw)*.15);padding:0 calc(var(--bw)*.03) calc(var(--bw)*.03)}
.b-wave .bph img{aspect-ratio:auto;height:100%;min-height:0;object-position:bottom;border-radius:0 0 calc(var(--bw)*.12) calc(var(--bw)*.12)}
.b-lyr .crop{aspect-ratio:1080/560}
.b-off .crop{aspect-ratio:1080/640}
.b-off h3{font-size:26px}
.b-detail .pair{flex:none;display:flex;gap:18px;padding-top:24px;align-items:flex-start}
.b-detail .pair .bph{flex:1 1 0;width:auto;min-width:0;margin-top:0;border-radius:36px 36px 0 0;padding:8px 8px 0}
.b-detail .pair .bph img{border-radius:28px 28px 0 0}

/* ── 功能一览：扫一眼就知道有没有自己要的 ── */
.all{padding:56px 0 8px}
.all h2{font:800 25px/1.35 var(--cn)}
.all-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.grp{background:var(--sf);border-radius:24px;padding:20px 22px 22px;box-shadow:0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.07)}
.grp h3{display:flex;align-items:center;gap:8px;font:700 16px/1.4 var(--cn)}
.grp h3 .ms{font-size:20px;color:var(--ol)}
.grp ul{list-style:none;margin:10px 0 0;padding:0}
.grp li{position:relative;padding-left:22px;margin-top:7px;font:400 14px/1.6 var(--cn);color:var(--tx)}
.grp li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg) translateY(-50%)}
.grp .sub{margin-top:8px;font:400 13px/1.6 var(--cn);color:var(--tx2)}
.grp.plus{background:var(--butter);box-shadow:none}
.grp.plus h3,.grp.plus li{color:var(--butterInk)}
.grp.plus h3 .ms{color:var(--butterInk)}
.grp.plus .sub{color:color-mix(in srgb,var(--butterInk) 72%,transparent)}
.grp.plus li::before{border-color:color-mix(in srgb,var(--butterInk) 60%,transparent)}

/* ── 下载与安装：金色带。下载和怎么装放在一起 ── */
.dl{margin-top:64px;padding:64px 0;background:linear-gradient(135deg,#705A0F,#8F7420 55%,#C9A64C);color:#FFF6E0}
.dl .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dl h2{font:900 42px/1.25 var(--cn);text-wrap:balance}
.dl .sub{margin-top:10px;font:500 17.5px var(--cn);color:rgba(255,246,224,.82)}
.dl .get{margin-top:24px}
.dl .btn.pri{background:#FFF6E0;color:#5E4E14;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.dl .mirror{margin-top:14px;font:500 13.5px var(--ui);color:rgba(255,246,224,.78)}
.dl .mirror a{color:inherit}
.how{border-radius:28px;padding:24px 28px 26px;background:rgba(255,246,224,.12);box-shadow:inset 0 0 0 1px rgba(255,246,224,.22)}
.how h3{display:flex;align-items:center;gap:10px;font:700 20px var(--cn)}
.how h3 .ms{font-size:24px}
.how ol{margin:6px 0 0;padding:0;list-style:none;counter-reset:s}
.how li{position:relative;padding-left:34px;margin-top:14px;font:400 15px/1.75 var(--cn);color:rgba(255,246,224,.86)}
.how li b{color:#FFF6E0;font-weight:600}
.how li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:#FFF6E0;color:#5E4E14;font:700 13px/24px var(--ui);text-align:center}
.how .tlink{margin-top:16px;color:#FFF6E0}

/* ── 信息卡：最新版本 / 隐私 / 常见问题 ── */
.info{padding:64px 0 24px}
.info .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.box{background:var(--sf);border-radius:28px;padding:28px 30px;box-shadow:0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.07)}
.box.wide{grid-column:1/-1}
.box>h3{display:flex;align-items:center;gap:10px;font:700 21px var(--cn)}
.box>h3 .ms{font-size:26px;color:var(--ol)}
.box>h3 .tlink{margin-left:auto}
.box ul.dots{margin:14px 0 0;padding:0;list-style:none}
.box ul.dots li{position:relative;padding-left:30px;margin-top:12px;font:400 15px/1.75 var(--cn);color:var(--tx2)}
.box ul.dots li b{color:var(--tx);font-weight:500}
.box ul.dots li::before{content:"";position:absolute;left:8px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.ver{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:14px}
.ver b{font:800 30px/1.1 var(--ui);letter-spacing:-.01em}
.ver span{font:500 13.5px var(--ui);color:var(--tx2)}
.notes{margin:8px 0 0;padding:0;list-style:none}
.notes li{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font:400 15px/1.7 var(--cn);color:var(--tx)}
.kd{flex:none;height:22px;margin-top:2px;padding:0 8px;border-radius:999px;font:500 12.5px/22px var(--ui)}
.kd.new,.kd.imp{background:var(--butter);color:var(--butterInk)}
.kd.chg{background:var(--sf3);color:var(--tx)}
.kd.fix{background:var(--redBg);color:var(--redFg)}
.fp{margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--codebg);font:500 14px/1.6 var(--mono);color:var(--tx);word-break:break-all}
code{font:500 .9em var(--mono);background:var(--codebg);padding:1px 6px;border-radius:6px;color:var(--tx)}
.qa{margin-top:8px}
.qa details{border-top:1px solid var(--hair)}
.qa details:first-child{border-top:0}
.qa summary{display:flex;align-items:center;gap:12px;padding:15px 0;list-style:none;cursor:pointer;font:700 16px/1.5 var(--cn);color:var(--tx)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ms{margin-left:auto;font-size:20px;color:var(--tx2);transition:transform .2s}
.qa details[open] summary .ms{transform:rotate(180deg)}
.qa details>div{padding:0 0 16px;max-width:46em;font:400 15px/1.75 var(--cn);color:var(--tx2)}

/* ── 页脚 ── */
footer{padding:40px 0 56px;font:500 13.5px var(--ui);color:var(--tx2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer a{color:var(--tx2)}
footer .sp{flex:1}

/* ── 上手 / 更新：文档页。左边目录跟着滚，右边一节一座浮岛 ── */
.page-h{padding:48px 0 8px}
.page-h h1{margin-top:14px;font:900 44px/1.2 var(--cn);letter-spacing:-.01em}
.page-h p{margin-top:10px;max-width:36em;font:400 17px/1.8 var(--cn);color:var(--tx2)}
.doc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start;padding:28px 0 56px}
.toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.toc a{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:14px;color:var(--tx2);text-decoration:none;font:500 14.5px/1.5 var(--ui)}
.toc a i{font:600 12px var(--mono);font-style:normal;opacity:.7}
.toc a:hover{color:var(--tx)}
.toc a.on{background:var(--sf);color:var(--ol);font-weight:600;box-shadow:0 2px 3px -1px rgba(var(--shadow),.3),0 0 0 .5px rgba(var(--shadow),.08)}
.part{background:var(--sf);border-radius:28px;padding:28px 32px 30px;margin-bottom:18px;box-shadow:0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.07)}
.part>h2{display:flex;align-items:center;gap:12px;font:800 23px/1.35 var(--cn)}
.part>h2 i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ol);color:var(--onol);font:700 15px/32px var(--ui);font-style:normal;text-align:center}
.part p{margin-top:12px;max-width:44em;font:400 15.5px/1.8 var(--cn);color:var(--tx2)}
.part p b{color:var(--tx);font-weight:500}
.part ol.n{margin:6px 0 0;padding:0;list-style:none;counter-reset:s}
.part ol.n li{position:relative;padding-left:32px;margin-top:12px;max-width:44em;font:400 15.5px/1.8 var(--cn);color:var(--tx2)}
.part ol.n li b{color:var(--tx);font-weight:500}
.part ol.n li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--sf3);color:var(--tx);font:700 12.5px/22px var(--ui);text-align:center}
.tip{display:flex;gap:10px;margin-top:16px;padding:12px 16px;border-radius:16px;background:var(--sf2);max-width:44em;font:400 14.5px/1.7 var(--cn);color:var(--tx2)}
.tip .ms{font-size:20px;color:var(--ol);margin-top:3px}
.tip b{color:var(--tx);font-weight:500}
.part .get{margin-top:18px}
.part .get .isle{background:var(--sf2);box-shadow:inset 0 0 0 1px rgba(var(--shadow),.07)}
/* 连接的两步：照 App 的连接页画的示意，不是截图 */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;max-width:640px}
.demo .card{border-radius:22px;background:var(--wall);padding:18px 18px 20px}
.demo .k{font:600 12px var(--ui);letter-spacing:.06em;color:var(--tx2)}
.demo h4{margin:6px 0 0;font:700 17px/1.4 var(--cn)}
.demo .h{margin-top:2px;font:400 12.5px/1.55 var(--cn);color:var(--tx2)}
.demo .f{margin-top:10px;height:46px;padding:0 14px;border-radius:14px;background:var(--sf);display:flex;align-items:center;gap:8px;font:500 14.5px var(--ui);color:var(--tx);box-shadow:0 0 0 1px rgba(var(--shadow),.08)}
.demo .f em{font-style:normal;color:var(--tx2);font-size:12px;margin-right:auto}
.demo .f span{font-family:var(--mono);font-size:13.5px}
.demo .go{margin-top:12px;height:42px;border-radius:999px;background:var(--ol);color:var(--onol);display:flex;align-items:center;justify-content:center;font:600 14.5px var(--ui)}
.eg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.eg code{padding:5px 10px;border-radius:10px;font-size:13.5px}

/* 更新日志 */
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--sf3)}
.seg button{height:32px;padding:0 14px;border:0;border-radius:999px;background:none;font:500 14px var(--ui);color:var(--tx2);cursor:pointer}
.seg button.on{background:var(--sf);color:var(--ol);font-weight:600;box-shadow:0 2px 3px -1px rgba(var(--shadow),.3),0 0 0 .5px rgba(var(--shadow),.08)}
.log{max-width:820px;padding:24px 0 56px}
.rel{position:relative;background:var(--sf);border-radius:28px;padding:26px 32px 28px;margin-top:18px;box-shadow:0 2px 3px -1px rgba(var(--shadow),.22),0 0 0 .5px rgba(var(--shadow),.07)}
.rel .ver{margin-top:0;align-items:center}
.rel .ver .now{font:600 12.5px/22px var(--ui);height:22px;padding:0 9px;border-radius:999px;background:var(--ol);color:var(--onol)}
.rel .ver .btn{margin-left:auto}
.rel .notes li.hide{display:none}
.rel .none{display:none;margin-top:12px;font:400 14.5px var(--cn);color:var(--tx2)}
.rel.empty .none{display:block}

/* ── 窄屏 ── */
@media (max-width:1080px){
  :root{--pw:230px}
  .hero .txt{max-width:470px}
  .wall{margin-left:70px}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .bx{grid-column:auto;grid-row:auto}
  .b-detail,.b-live{grid-column:1/-1}
  .b-lib,.b-live{max-height:560px}
  /* 波形卡放不下横排：手机换成一条出血的裁片，只留时间和波形 */
  .b-wave{flex-direction:column;gap:0}
  .b-wave .t{flex:none;padding-bottom:18px}
  .b-wave .bph{align-self:auto;display:block;width:auto;margin:auto calc(var(--px)*-1) 0;padding:0;border-radius:0;background:none;box-shadow:0 -1px 0 rgba(var(--shadow),.08)}
  .b-wave .bph img{height:auto;aspect-ratio:1080/820;object-position:50% 80%;border-radius:0}
  .b-lyr p,.b-off p{margin-bottom:18px}
  .all-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--pw:150px}
  .wrap{padding:0 20px}
  .top .wrap{gap:6px;height:56px}
  .brand{font-size:17px;gap:8px}
  .brand img{width:26px;height:26px}
  .nav{gap:0}
  .nav a{height:34px;padding:0 10px;font-size:14px}
  .nav .anchor{display:none}
  .top .btn{height:36px;padding:0 14px;font-size:14px}
  .top .btn .ms{display:none}
  .hero .wrap{min-height:0;padding-top:30px;padding-bottom:0}
  .lockup{gap:12px}
  .lockup img{width:46px;height:46px}
  .lockup b{font-size:46px}
  .claim{margin-top:16px;font-size:28px}
  .lead{font-size:15.5px}
  .get{max-width:none}
  /* 手机墙挪到文字下面，变成一条出血的带 */
  .wall{position:relative;left:auto;top:auto;width:auto;height:300px;margin:26px -20px 0;gap:16px;justify-content:center;transform:none;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .wall .col{gap:16px;transform:rotate(-16deg);transform-origin:50% 0}
  .wall .col:nth-child(1){margin-top:34px}.wall .col:nth-child(2){margin-top:-30px}.wall .col:nth-child(3){margin-top:-96px}.wall .col:nth-child(4){display:none}
  .need{padding:28px 0 0}
  .need h2{font-size:21px}
  .steps{grid-template-columns:1fr;gap:10px}
  .feat{padding:48px 0 0}
  .sec-h h2{font-size:30px}
  .sec-h p{font-size:15.5px}
  .bento{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .bx{--px:22px;border-radius:26px;padding-top:22px}
  .bx h3,.b-off h3{font-size:25px}
  .b-lib,.b-detail,.b-live{grid-column:auto;grid-row:auto}
  .b-lib,.b-live{max-height:500px}
  .b-detail{max-height:440px}
  .bph,.b-live .bph{--bw:230px}
  .b-detail .pair{gap:12px}
  .b-detail .pair .bph{border-radius:24px 24px 0 0;padding:5px 5px 0}
  .b-detail .pair .bph img{border-radius:19px 19px 0 0}
  .all{padding:40px 0 0}
  .all h2{font-size:21px}
  .all-grid{grid-template-columns:1fr;gap:10px}
  .dl{margin-top:44px;padding:44px 0}
  .dl .wrap{grid-template-columns:1fr;gap:28px}
  .dl h2{font-size:30px}
  .how{padding:20px 20px 22px;border-radius:24px}
  .info{padding:44px 0 12px}
  .info .grid{grid-template-columns:1fr;gap:14px}
  .box{padding:22px 20px;border-radius:24px}
  .btn{height:50px;font-size:16px}
  .page-h{padding:28px 0 0}
  .page-h h1{font-size:32px}
  .page-h p{font-size:15.5px}
  .doc{grid-template-columns:1fr;gap:14px;padding:16px 0 40px}
  /* 上手页顶栏 56px 下面还压着横向目录（约 49px）：跳锚后小节标题要落在两者下面（promo.js 的目录高亮跟着它） */
  html.has-toc{scroll-padding-top:116px}
  .toc{position:sticky;top:56px;z-index:5;flex-direction:row;gap:4px;margin:0 -20px;padding:8px 20px;overflow-x:auto;background:color-mix(in srgb,var(--wall) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);scrollbar-width:none}
  .toc a{flex:none;padding:6px 12px;font-size:14px}
  .part{padding:22px 20px 24px;border-radius:24px;margin-bottom:14px}
  .part>h2{font-size:20px}
  .demo{grid-template-columns:1fr}
  .rel{padding:22px 20px 24px;border-radius:24px}
  .rel .ver .btn{margin-left:0;width:100%;margin-top:8px}
}

/* 复制链接的后备做法要一个选得中的文本框，挪到屏幕外 */
.offscreen{position:fixed;left:-9999px;top:0;opacity:0}