/* 导航：framesbase MotionSites「Atlas Nav」的提示词规格（变形下拉、手机抽屉），https://framesbase.app/motionsites/sites/motionsites-sites-atlas-nav
   页脚：framesbase MotionSites「NimbusOS Footer」的白色卡片和分栏规格，https://framesbase.app/motionsites/sections/motionsites-sections-nimbusos-footer
   第 2、3、4 屏：framesbase MotionSites「Capabilities」的玻璃卡片网格，图标来自 Lucide（ISC），https://framesbase.app/motionsites/sections/motionsites-sections-capabilities
   三步：framesbase MotionSites「NexaCore Process」的卡片、标签和圆环图标，https://framesbase.app/motionsites/sections/motionsites-sections-nexacore-process
   页尾按钮：framesbase MotionSites「Liquid Glass CTA」的白色按钮和玻璃按钮，https://framesbase.app/motionsites/sections/motionsites-sections-liquid-glass-cta
   只改了品牌、链接和颜色；付费素材，自用，不进要公开的仓库。 */
@import url(/assets/shared.css);
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0077FD;color:#fff}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
a,button{color:inherit;font:inherit;text-decoration:none;border:0;background:none}
button{cursor:pointer}
html[lang="en"] [data-l="zh"],html[lang="zh-Hans"] [data-l="en"]{display:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:focus-visible{outline:calc(2*var(--z)) solid #fff;outline-offset:calc(3*var(--z));border-radius:calc(6*var(--z))}

/* 首页每屏：一个标题，最多一句说明，一个主视觉，至少占满一个视口 */
.rest{position:relative;z-index:2;margin-top:100vh;background:#0077FD;border-radius:clamp(20*var(--z),2.6vw,40*var(--z)) clamp(20*var(--z),2.6vw,40*var(--z)) 0 0;box-shadow:0 calc(-18*var(--z)) calc(60*var(--z)) rgba(0,45,130,.35);overflow:hidden}
.scr{min-height:100vh;min-height:100svh;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:var(--s-gap);padding:calc(var(--barh) + var(--s-top)) max(clamp(21px,calc(-7.971px + 7.4286vw),99px),calc(12vw - 74px)) var(--s-top)}
.scr-h{width:100%;text-align:center;display:grid;gap:calc(8*var(--z))}
.scr-v{width:100%;display:flex;align-items:center;justify-content:center;min-width:0}

/* 标题：Geist 和 Noto Sans SC 的 800 直体，不发光 */
.h1{font-weight:800;font-size:var(--t1);line-height:var(--l1);text-align:center;text-wrap:balance;letter-spacing:-.02em;margin-bottom:clamp(20*var(--z),3.5vh,32*var(--z))}
.h2{font-weight:800;font-size:var(--t2);line-height:var(--l2);text-align:center;text-wrap:balance;letter-spacing:-.02em}
html[lang="zh-Hans"] .h1,html[lang="zh-Hans"] .h2{letter-spacing:-.01em}
html[lang="zh-Hans"] .h2{word-break:auto-phrase}
.pg{display:inline-block}
br.m{display:none}
/* 说明文字和卡片标题 */
.desc,.lead,.folds p{font-weight:500;font-size:var(--t3);line-height:var(--l3);color:var(--c3);text-wrap:pretty}
.it{font-weight:600;font-size:var(--tc);line-height:var(--lc);color:#fff}
.st-lab{font-weight:600;font-size:var(--tl);line-height:var(--ll);color:#fff}
.folds summary{font-weight:600;font-size:var(--t3);line-height:var(--l3);color:#fff}
html[lang="zh-Hans"] .desc,html[lang="zh-Hans"] .lead,html[lang="zh-Hans"] .folds p,html[lang="zh-Hans"] .folds summary{line-height:var(--l3z)}

/* 第 2、3、4 屏的卡片：同一套，内容水平垂直都居中 */
.ic{display:block;flex:none;width:clamp(40*var(--z),3.89vw,56*var(--z));height:clamp(40*var(--z),3.89vw,56*var(--z))}

/* 三步：三张卡同高，序号、标题、说明都左对齐，从卡片顶部排起 */
.steps{list-style:none;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(12*var(--z))}
.steps li{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:calc(12*var(--z));text-align:left;padding:clamp(24*var(--z),4.45vh,40*var(--z)) calc(28*var(--z));border-radius:calc(24*var(--z));background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.28),inset 0 calc(1*var(--z)) 0 rgba(255,255,255,.55)}
.st-badge{display:inline-flex;align-items:center;justify-content:center;gap:calc(8*var(--z));padding:calc(5*var(--z)) calc(14*var(--z));border-radius:calc(999*var(--z));font-weight:600;font-size:var(--ts);line-height:var(--ls);background:rgba(255,255,255,.16)}
.st-badge svg{display:block;flex:none}
.steps .it{text-wrap:balance}

/* 第 8 屏和按钮 */
.s8{max-width:none;padding:0;gap:0;justify-content:flex-start}
.cta-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-gap);text-align:center;padding:calc(var(--barh) + var(--s-top)) max(clamp(21px,calc(-7.971px + 7.4286vw),99px),calc(12vw - 74px)) var(--s-top)}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(12*var(--z))}
/* 折叠 */
.folds{max-width:calc(820*var(--z));margin:clamp(32*var(--z),6vh,56*var(--z)) auto 0}
.folds details{border-top:calc(1*var(--z)) solid rgba(255,255,255,.45)}
.folds details:last-child{border-bottom:calc(1*var(--z)) solid rgba(255,255,255,.45)}
.folds summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:calc(16*var(--z));padding:calc(16*var(--z)) calc(2*var(--z))}
.folds summary::-webkit-details-marker{display:none}
.folds summary::after{content:"+";flex:none;font-weight:600}
.folds details[open] summary::after{content:"\2212"}
.folds p{padding:0 calc(2*var(--z)) calc(18*var(--z))}

/* 路线图 */
.rm-l{list-style:none;display:grid;grid-template-columns:1fr 1.25fr 1fr 1fr;gap:clamp(20*var(--z),3vw,48*var(--z))}
/* 标题下没有导语时，给时间轴补回呼吸距离 */
.h1+.rm-l{padding-top:clamp(12*var(--z),2.5vh,24*var(--z))}
.rm-g{position:relative;border-top:calc(2*var(--z)) solid #fff;padding-top:calc(22*var(--z))}
.rm-g::before{content:"";position:absolute;left:0;top:calc(-8*var(--z));width:calc(14*var(--z));height:calc(14*var(--z));border-radius:50%;background:#0077FD;box-shadow:inset 0 0 0 calc(2*var(--z)) #fff}
.rm-g.is-now::before{background:#fff}
.rm-g .it+.it{margin-top:calc(10*var(--z))}

/* 分层架构图：两列等宽；所有文字在框和胶囊内水平垂直居中；每条线从框的中心出发，汇合后对准 Poki MCP 的中心 */
.stack{--cg:calc(12*var(--z));--bp:calc(16*var(--z));--cgap:calc(8*var(--z));--ln:clamp(16*var(--z),2.67vh,24*var(--z));width:100%;max-width:calc(1080*var(--z));margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto var(--ln) auto calc(var(--ln)*1.5) auto var(--ln) auto;column-gap:var(--cg)}
.st-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10*var(--z));text-align:center;padding:var(--bp);border-radius:calc(22*var(--z));background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.7)}
.st-lab{display:flex;align-items:center;justify-content:center;min-height:calc(24*var(--z));text-align:center}
.chips{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--cgap)}
/* Device control 和上面两列里的胶囊同宽 */
.chips.one{grid-template-columns:minmax(0,calc((100% - 2*var(--bp) - var(--cg) - 2*var(--cgap))/4));justify-content:center}
.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(40*var(--z),5.34vh,48*var(--z));padding:0 calc(8*var(--z));border-radius:calc(12*var(--z));font-size:var(--tg);font-weight:500;line-height:var(--lg);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.6);text-align:center}
a.chip:hover{background:rgba(255,255,255,.14)}
.chip.dash{box-shadow:none;border:calc(1.5*var(--z)) dashed #fff;flex-direction:row;gap:calc(8*var(--z))}
.chip small{display:block;font-size:var(--tx);line-height:var(--lx);font-weight:500;color:var(--c3)}
.st-box.is-on .chip small{color:inherit}
.st-ch{grid-column:1;grid-row:1}
.st-cl{grid-column:2;grid-row:1}
.st-agent{grid-column:1;grid-row:3}
.st-mcp{grid-column:1/-1;grid-row:5;background:rgba(255,255,255,.18)}
.st-phone{grid-column:1/-1;grid-row:7;background:#fff;min-height:clamp(52*var(--z),7.12vh,64*var(--z))}
.st-phone .st-lab{color:#0060D8}
.st-box.is-on{background:#fff}
.st-box.is-on .st-lab,.st-box.is-on .chip{color:#0060D8}
.st-box.is-on .chip{box-shadow:inset 0 0 0 calc(1*var(--z)) #0060D8}
.st-box.is-on a.chip:hover{background:rgba(0,96,216,.1)}
.chip.is-on{background:#fff;color:#0060D8;box-shadow:none}
a.chip.is-on:hover{background:#fff}
.ln{position:relative;display:block;width:calc(2*var(--z));background:#fff}
.a1{grid-column:1;grid-row:2;justify-self:center}
.bypass{grid-column:2;grid-row:2/4;justify-self:center}
.a3{grid-column:1/-1;grid-row:6;justify-self:center}
.a1::after,.a3::after,.b-s::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-left:calc(6*var(--z)) solid transparent;border-right:calc(6*var(--z)) solid transparent;border-top:calc(9*var(--z)) solid #fff}
.bus{grid-column:1/-1;grid-row:4;position:relative}
.bus .ln{position:absolute;transform:translateX(-50%)}
.b-l{left:calc((100% - var(--cg))/4);top:0;height:50%}
.b-r{left:calc(75% + var(--cg)/4);top:0;height:50%}
.b-s{left:50%;top:50%;bottom:0}
.b-h{position:absolute;display:block;left:calc((100% - var(--cg))/4 - 1*var(--z));right:calc((100% - var(--cg))/4 - 1*var(--z));top:50%;height:calc(2*var(--z));margin-top:calc(-1*var(--z));background:#fff}

/* 内页：先结论和图，细节折叠 */
.inner{max-width:calc(1240*var(--z));margin:0 auto;padding:calc(var(--barh) + clamp(40*var(--z),8vh,88*var(--z))) clamp(20*var(--z),5.5vw,96*var(--z)) clamp(56*var(--z),10vh,104*var(--z))}
.lead{max-width:calc(760*var(--z));margin:0 auto clamp(28*var(--z),5vh,48*var(--z));text-align:center}
.inner .h2{margin-bottom:clamp(20*var(--z),3.5vh,32*var(--z))}
.inner .rm-s{text-align:left;margin-bottom:calc(12*var(--z))}
.inner .rm-g .it{font-size:var(--t3);line-height:var(--l3);font-weight:500;text-wrap:pretty}
.inner .rm-g .it.rm-m{font-size:var(--tc);line-height:var(--lc);font-weight:700}
html[lang="zh-Hans"] .inner .rm-g .it{line-height:var(--l3z)}
.inner .rm-g .rm-q{display:block;margin-top:calc(4*var(--z));font-size:var(--t3);line-height:var(--l3);font-weight:500}
.inner .rm-g .it.rm-m:has(.rm-q)+.it{margin-top:calc(18*var(--z))}
@media (min-width:821px){.rm-l{container-type:inline-size}html[lang="en"] .inner .rm-s{font-size:min(var(--t2),4.5cqi);white-space:nowrap}}
.inner .btns{margin-top:clamp(28*var(--z),5vh,48*var(--z))}

/* 更新日志：路线图的白线和圆点竖过来，左边日期，右边当天的条目，最新一天的点是白的 */
.cl-l{list-style:none;max-width:calc(900*var(--z));margin:0 auto}
.cl-g{display:grid;grid-template-columns:calc(150*var(--z)) minmax(0,1fr);gap:0 calc(32*var(--z))}
.cl-d{position:sticky;top:calc(var(--barh) + 16*var(--z));align-self:start;text-align:right;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--ts);line-height:var(--lc);font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums}
.cl-b{border-left:calc(2*var(--z)) solid #fff;padding:0 0 calc(48*var(--z)) calc(32*var(--z))}
.cl-g:last-child .cl-b{padding-bottom:calc(8*var(--z))}
.cl-e{position:relative}
.cl-e+.cl-e{margin-top:calc(36*var(--z))}
.cl-e::before{content:"";position:absolute;left:calc(-40*var(--z));top:calc(10*var(--z));width:calc(14*var(--z));height:calc(14*var(--z));border-radius:50%;background:#0077FD;box-shadow:inset 0 0 0 calc(2*var(--z)) #fff}
.cl-g.is-now .cl-e:first-child::before{background:#fff}
.cl-e .it{text-wrap:balance}
.cl-e .desc{margin-top:calc(6*var(--z))}
.cl-c{display:inline-block;vertical-align:calc(3*var(--z));margin-right:calc(10*var(--z));padding:0 calc(9*var(--z));border-radius:calc(999*var(--z));font-size:var(--tx);line-height:calc(22*var(--z));font-weight:600;letter-spacing:.02em;color:#fff;box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.55)}
.cl-c.is-beta{background:#fff;color:#0060D8;box-shadow:none}
.cl-c.is-integration{background:rgba(255,255,255,.16)}
html[lang="zh-Hans"] .cl-e .desc{line-height:var(--l3)}
.cl-a{display:inline-flex;align-items:center;gap:calc(6*var(--z));margin-top:calc(12*var(--z));padding:calc(4*var(--z)) calc(12*var(--z));border-radius:calc(999*var(--z));background:var(--hover);font-size:var(--ts);line-height:var(--ls);font-weight:600;color:#fff;transition:background-color .2s}
.cl-a:hover{background:rgba(255,255,255,.24)}
.cl-a svg{flex:none;width:calc(10*var(--z));height:calc(10*var(--z))}
.cl-l+.btns{margin-top:clamp(40*var(--z),7vh,64*var(--z))}
@media (max-width:820px){
  .cl-g{grid-template-columns:minmax(0,1fr)}
  .cl-d{position:static;text-align:left;border-left:2px solid #fff;padding:0 0 12px 22px}
  .cl-b{padding:0 0 40px 22px}
  .cl-e+.cl-e{margin-top:28px}
  .cl-e::before{left:-30px;top:9px}
}

/* 页脚 */
.site-foot{padding:0 clamp(13*var(--z),3.34vw,48*var(--z)) clamp(13*var(--z),3.34vw,48*var(--z))}
.f-card{background:#FEFEFE;color:#000;box-shadow:0 0 0 calc(1*var(--z)) rgba(0,0,0,.5),0 calc(1*var(--z)) 0 rgba(0,0,0,.4);outline:calc(1*var(--z)) solid #E0E1E9;outline-offset:calc(-5*var(--z))}
.f-id{max-width:calc(340*var(--z));padding-right:calc(24*var(--z))}
.f-id p{margin-top:clamp(8*var(--z),.84vw,12*var(--z));font-size:var(--ts);font-weight:400;line-height:var(--ls);color:#59595C}
.f-top{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(calc(150*var(--z)),calc(220*var(--z))));padding:clamp(20*var(--z),3.34vw,48*var(--z)) clamp(20*var(--z),4.03vw,58*var(--z));gap:calc(24*var(--z)) 0}
.f-brand{display:inline-flex;align-items:center;gap:calc(10*var(--z));font-weight:600;font-size:calc(22*var(--z));line-height:calc(30*var(--z));color:#0060D8}
.f-col{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6*var(--z));padding:0 calc(16*var(--z));border-left:calc(2*var(--z)) solid #E0E1E9}
.f-col h2{font-size:clamp(16*var(--z),calc(15.257*var(--z) + 0.1905vw),18*var(--z));line-height:calc(24*var(--z));font-weight:600;margin-bottom:calc(4*var(--z))}
.f-col a{min-height:calc(24*var(--z));display:flex;align-items:center;font-size:var(--ts);line-height:var(--ls);font-weight:500;color:#59595C;transition:color .15s}
.f-col a:hover{color:#0060D8}
.f-col .f-x{gap:calc(6*var(--z))}.f-x svg{flex:none;width:calc(14*var(--z));height:calc(14*var(--z))}
.f-card :focus-visible{outline-color:#0060D8}
.f-bot{border-top:calc(1*var(--z)) solid #E0E1E9;padding:clamp(12*var(--z),.98vw,14*var(--z)) clamp(20*var(--z),4.03vw,58*var(--z));font-size:var(--tx);line-height:var(--lx);font-weight:400;color:#59595C}
.f-legal{padding-bottom:0}.f-legal+.f-bot{border-top:0;padding-top:calc(4*var(--z))}.f-legal a{color:inherit;text-decoration:underline;text-underline-offset:calc(2*var(--z))}
#disclaimer{scroll-margin-top:calc(var(--barh) + 12*var(--z))}

@media (max-width:560px){
  br.m{display:inline}
  .stack{--ln:18px;--bp:8px;--cgap:5px}.st-box{gap:6px}
  .chips{grid-template-columns:minmax(0,1fr)}
  .chips.one{grid-template-columns:minmax(0,calc((100% - 2*var(--bp) - var(--cg))/2));justify-content:center}
  .chip{min-height:48px;padding:0 4px}
  .chip.dash{flex-direction:column;gap:0}.chip small{line-height:16px}
  .rest #architecture{--s-gap:clamp(16px,2.85vh,24px)}
  :root,.scr{--s-gap:clamp(20px,3.8vh,32px)}
}
@media (max-width:560px){
  html[lang="zh-Hans"] .c3 .tile{padding-block:12px}
}
@media (max-width:820px){
  .rm-l{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .steps li{gap:10px;padding:20px}
  .f-top{grid-template-columns:1fr 1fr}
  .f-id{grid-column:1/-1;max-width:none;padding:0}
  .f-col:last-child{grid-column:1/-1}
  .f-col{gap:0}
  .f-col a{padding:3px 0}
  .f-top{padding:20px;gap:14px 0}
  .f-col h2{margin-bottom:3px}
}

/* 小场景：卡片外壳沿用 Capabilities 玻璃卡，手机外框比例来自 Magic UI iphone.tsx，界面文字走排版阶梯 */
.scenes{list-style:none;width:100%;display:grid;gap:calc(12*var(--z))}
.scenes.c4{--ph-h:clamp(520*var(--z),calc(100vh - 326*var(--z)),530*var(--z));grid-template-columns:repeat(4,minmax(0,1fr))}
.scenes.c3{--ph-h:clamp(440*var(--z),calc(100vh - 360*var(--z)),450*var(--z));grid-template-columns:repeat(3,minmax(0,1fr))}
.scene-w{display:flex;min-width:0}
.scene{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(12*var(--z));padding:calc(12*var(--z));border-radius:calc(24*var(--z));background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.28),inset 0 calc(1*var(--z)) 0 rgba(255,255,255,.55);text-align:center}
a.scene{transition:background-color .2s}
@media (hover:hover){a.scene:hover{background:rgba(255,255,255,.14)}}
.sc-l{flex:1;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.ph{flex:none;width:min(272*var(--z),100%);height:var(--ph-h);padding:calc(10*var(--z));border-radius:calc(46*var(--z));background:#1B1C20;box-shadow:0 0 0 calc(1.5*var(--z)) rgba(255,255,255,.3),0 calc(18*var(--z)) calc(40*var(--z)) rgba(0,40,120,.35)}
.ph-s{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:calc(36*var(--z));background:#fff;color:#111;text-align:left;font-size:var(--ts);line-height:var(--ls);font-weight:500}
.ph-s small{font-size:var(--tx);line-height:var(--lx);font-weight:500}
.sb{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(40*var(--z));padding:calc(6*var(--z)) calc(18*var(--z)) 0;font-size:calc(13*var(--z));line-height:calc(18*var(--z));font-weight:600}
.sb-r{display:flex;align-items:center;gap:calc(4*var(--z))}
.isl{position:absolute;top:calc(9*var(--z));left:50%;width:calc(68*var(--z));height:calc(20*var(--z));margin-left:calc(-34*var(--z));border-radius:calc(999*var(--z));background:#000}
.back{display:inline-flex;color:#0A7CFF}
.av{display:block;flex:none;width:calc(32*var(--z));height:calc(32*var(--z));border-radius:calc(9*var(--z))}
.thread{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(8*var(--z));padding:calc(12*var(--z)) calc(10*var(--z));overflow:hidden}
.msg{text-wrap:pretty;max-width:82%;padding:calc(7*var(--z)) calc(12*var(--z));border-radius:calc(18*var(--z));overflow-wrap:anywhere;transform-origin:left bottom}
.msg.out{align-self:flex-end;transform-origin:right bottom}
.msg.in{align-self:flex-start}
.scenes.c4 .msg{max-width:92%}
.comp{flex:none;display:flex;align-items:center;gap:calc(8*var(--z));padding:calc(8*var(--z)) calc(10*var(--z)) calc(14*var(--z))}
.fld{flex:1;min-width:0;padding:calc(5*var(--z)) calc(12*var(--z));border-radius:calc(999*var(--z));box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(0,0,0,.14);color:#8A8A8E}
.plus{flex:none;display:flex;align-items:center;justify-content:center;width:calc(30*var(--z));height:calc(30*var(--z));border-radius:50%;background:#EFEFF1;color:#6B6B70;font-size:calc(18*var(--z));line-height:1}
.send{flex:none;display:flex;align-items:center;justify-content:center;width:calc(30*var(--z));height:calc(30*var(--z));border-radius:50%;background:#0077FD;color:#fff}
.tdots{position:absolute;left:calc(10*var(--z));display:flex;gap:calc(4*var(--z));padding:calc(12*var(--z)) calc(14*var(--z));border-radius:calc(18*var(--z));background:#E9E9EB}
.tdots i{width:calc(7*var(--z));height:calc(7*var(--z));border-radius:50%;background:#8E8E93}
.im-h{flex:none;position:relative;display:flex;justify-content:center;padding:calc(2*var(--z)) calc(14*var(--z)) calc(8*var(--z));background:#F6F6F8;box-shadow:0 calc(1*var(--z)) 0 rgba(0,0,0,.1)}
.im-h .back{position:absolute;left:calc(14*var(--z));top:calc(9*var(--z))}
.who{display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--z))}
.im-o{background:#0A7CFF;color:#fff;border-bottom-right-radius:calc(6*var(--z))}
.im-i{background:#E9E9EB;border-bottom-left-radius:calc(6*var(--z))}
.app-tg{background:linear-gradient(160deg,#BFD8B0,#E4EAC0 60%,#CFDFB8)}
.tg-h{flex:none;display:flex;align-items:center;gap:calc(8*var(--z));padding:calc(2*var(--z)) calc(12*var(--z)) calc(8*var(--z));background:#fff;box-shadow:0 calc(1*var(--z)) 0 rgba(0,0,0,.1)}
.who2{display:flex;flex-direction:column;line-height:calc(18*var(--z))}.who2 b{font-weight:600}.who2 small{color:#6B7A88}
.tg-o{background:#E6FBD0;border-bottom-right-radius:calc(6*var(--z))}
.tg-i{background:#fff;border-bottom-left-radius:calc(6*var(--z))}
.tg-e{display:block;color:#7E8C97;text-align:right}
.edit-box{display:block}.ev{display:none}.ev.ev-last{display:inline}
.edit-box.at-first .ev{display:inline}.edit-box.at-first .ev-last{display:none}
.tg-e{transition:opacity .2s}.at-first~.tg-e{opacity:0}
.app-tg .comp{background:#fff}.app-tg .tdots{background:#fff}
.term{flex:none;width:100%;height:var(--ph-h);display:flex;flex-direction:column;overflow:hidden;border-radius:calc(18*var(--z));background:#10131A;box-shadow:0 0 0 calc(1*var(--z)) rgba(255,255,255,.2),0 calc(18*var(--z)) calc(40*var(--z)) rgba(0,40,120,.35);text-align:left;color:#E7EAF0}
.term-h{flex:none;display:flex;gap:calc(6*var(--z));padding:calc(12*var(--z)) calc(14*var(--z));box-shadow:0 calc(1*var(--z)) 0 rgba(255,255,255,.1)}
.term-h i{width:calc(10*var(--z));height:calc(10*var(--z));border-radius:50%;background:#FF5F57}.term-h i:nth-child(2){background:#FEBC2E}.term-h i:nth-child(3){background:#28C840}
.term-b{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:calc(10*var(--z));padding:calc(12*var(--z)) calc(14*var(--z));font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tx);line-height:var(--lx);font-weight:500;overflow-wrap:break-word}
.cmd{display:flex;gap:calc(8*var(--z))}.cmd>span{flex:1;min-width:0;white-space:pre-wrap}.tcur{width:calc(8*var(--z));height:calc(16*var(--z));background:#E7EAF0}.term-b .pr{color:#5BE37A;font-weight:600}.term-b .o{color:#9BA3B2}.term-b .hi{color:#fff}
.pk-h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--z));padding:calc(4*var(--z)) calc(14*var(--z)) calc(8*var(--z))}
.pk-h b{font-size:var(--tc);line-height:var(--lc);font-weight:700}
.soon{flex:none;padding:calc(2*var(--z)) calc(10*var(--z));border-radius:calc(999*var(--z));background:#E5F1FF;color:#0060D8;font-size:var(--tx);line-height:var(--lx);font-weight:600}
.pk-o{background:#0077FD;color:#fff;border-bottom-right-radius:calc(6*var(--z))}
.pk-t{padding:0 calc(2*var(--z))}
.pk-step{display:flex;align-items:center;gap:calc(6*var(--z));padding:calc(8*var(--z)) calc(10*var(--z));border-radius:calc(12*var(--z));background:#F2F3F5;font-size:var(--tx);line-height:var(--lx)}
.pk-step svg,.ok svg{flex:none;color:#12A150}
.pk-r{font-weight:600}
.tap{position:absolute;z-index:5;width:calc(34*var(--z));height:calc(34*var(--z));margin:calc(-17*var(--z)) 0 0 calc(-17*var(--z));border-radius:50%;background:rgba(0,119,253,.28);box-shadow:0 0 0 calc(2*var(--z)) #0077FD;opacity:0;pointer-events:none}
.scap{padding:0 calc(14*var(--z));color:#6B6B70;font-size:var(--tx);line-height:var(--lx)}
.scap.ok{display:flex;align-items:center;gap:calc(6*var(--z));color:#0E8A45;font-weight:600}
.nav{flex:none;display:flex;align-items:center;gap:calc(8*var(--z));padding:calc(4*var(--z)) calc(14*var(--z)) calc(10*var(--z))}
.nav b{font-size:var(--tc);line-height:var(--lc);font-weight:700}
/* 切换 App */
/* 表单 */
.app-rem{background:#F2F2F7}
.form{flex:none;display:grid;gap:calc(8*var(--z));padding:0 calc(12*var(--z))}
.form label{display:grid;gap:calc(2*var(--z));font-size:var(--tx);line-height:var(--lx);color:#6B6B70}
.pbtn{justify-self:stretch;padding:calc(7*var(--z)) 0;border-radius:calc(12*var(--z));background:#0077FD;color:#fff;text-align:center;font-weight:600}
.t2{flex:none;padding-top:calc(8*var(--z))}
/* 设置 */
.grp{flex:none;margin:0 calc(12*var(--z));border-radius:calc(14*var(--z));background:#fff;overflow:hidden}
.rw{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--z));padding:calc(9*var(--z)) calc(12*var(--z));box-shadow:inset 0 calc(-1*var(--z)) 0 rgba(0,0,0,.08);transition:background-color .2s}
.rw b{flex:none;font-weight:600;color:#6B6B70}
.rw.hit{background:#E5F1FF;box-shadow:inset 0 0 0 calc(2*var(--z)) #0077FD;border-radius:calc(14*var(--z))}.rw.hit b{color:#0060D8}
/* 提醒和备忘录 */
.rem{list-style:none;flex:none;margin:0 calc(12*var(--z));border-radius:calc(14*var(--z));background:#fff}
.rem li{display:flex;align-items:center;gap:calc(10*var(--z));padding:calc(8*var(--z)) calc(12*var(--z));box-shadow:inset 0 calc(-1*var(--z)) 0 rgba(0,0,0,.08)}
.rem li>i{flex:none;width:calc(18*var(--z));height:calc(18*var(--z));border-radius:50%;box-shadow:inset 0 0 0 calc(1.5*var(--z)) #B8B8BE}
.rem .new>i{box-shadow:inset 0 0 0 calc(1.5*var(--z)) #0077FD}
/* 网页 */
.url{flex:none;margin:0 calc(12*var(--z));padding:calc(5*var(--z)) calc(12*var(--z));border-radius:calc(12*var(--z));background:#EFEFF1;font-size:var(--tx);line-height:var(--lx);text-align:center;color:#3A3A3D;overflow-wrap:anywhere}
.load{flex:none;display:block;height:calc(2*var(--z));margin:calc(6*var(--z)) calc(12*var(--z)) 0;border-radius:calc(2*var(--z));background:#0077FD}
.scenes.c4 .sc-l{flex-direction:column;align-items:center;gap:calc(2*var(--z))}
.soon-t{display:inline-block;padding:calc(2*var(--z)) calc(8*var(--z));border-radius:calc(999*var(--z));background:rgba(255,255,255,.2);font-size:var(--tx);line-height:var(--lx);font-weight:600;white-space:nowrap;vertical-align:middle}
.soon-s{margin-left:calc(6*var(--z));font-size:var(--tx);line-height:var(--lx);font-weight:500;opacity:.72;white-space:nowrap}
.soon-b{display:inline-block;margin-top:calc(8*var(--z));padding:calc(4*var(--z)) calc(14*var(--z));border-radius:calc(999*var(--z));background:rgba(255,255,255,.2);font-size:var(--ts);line-height:var(--ls);font-weight:600}
.pb-off{background:#C7C7CC;color:#fff}
#start .msg{max-width:94%;text-wrap:wrap;padding-block:calc(5*var(--z))}#start .thread{gap:calc(5*var(--z))}
/* 第 3 屏 */
.scenes.c2{--ph-h:clamp(400*var(--z),calc(100vh - 420*var(--z)),480*var(--z));grid-template-columns:repeat(2,minmax(0,1fr))}
.scenes.c2 .scene{padding:calc(20*var(--z)) calc(12*var(--z)) calc(12*var(--z));gap:calc(16*var(--z))}
.duo{flex:1;width:100%;min-height:var(--ph-h);display:flex;align-items:center;justify-content:center;gap:clamp(8*var(--z),1.4vw,20*var(--z));padding:0 clamp(4*var(--z),1.2vw,16*var(--z))}
.duo.any{gap:clamp(6*var(--z),1vw,16*var(--z))}
.agents{list-style:none;flex:none;display:flex;flex-direction:column;gap:calc(10*var(--z))}
.ag{display:flex;align-items:center;gap:calc(8*var(--z));padding:calc(6*var(--z)) clamp(8*var(--z),1vw,14*var(--z)) calc(6*var(--z)) calc(6*var(--z));border-radius:calc(12*var(--z));background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.3);font-size:var(--tg);line-height:var(--lg);font-weight:600;white-space:nowrap}
.ag i{display:flex;align-items:center;justify-content:center;flex:none;width:calc(24*var(--z));height:calc(24*var(--z));overflow:hidden;border-radius:calc(7*var(--z));background:#fff;box-shadow:0 0 0 calc(1*var(--z)) rgba(255,255,255,.55)}
.ag i img{display:block;width:76%;height:76%}.ag i.full img{width:100%;height:100%;object-fit:cover}
.lnk small{font-size:var(--tx);line-height:var(--lx);font-weight:600;color:var(--c3);text-align:center;text-wrap:balance}
.ph.vid{--w:calc(var(--ph-h)*.491);flex:0 1 auto;min-width:0;max-width:100%;height:auto;aspect-ratio:433/882;width:var(--w);padding:calc(var(--w)*.037);border-radius:17%/8.3%}
.ph.vid .ph-s{height:100%;border-radius:14.3%/6.7%}
.slot-v{display:block;width:100%;height:100%;object-fit:cover;background:#10265A}
.beta{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10*var(--z));color:inherit;text-decoration:none}
.beta img{display:block;width:min(100%,calc((var(--ph-h) - 34*var(--z))*.8));height:auto;aspect-ratio:4/5;border-radius:calc(18*var(--z));box-shadow:0 0 0 calc(1.5*var(--z)) rgba(255,255,255,.3),0 calc(18*var(--z)) calc(40*var(--z)) rgba(0,40,120,.35);transition:transform .25s}
.beta small{font-size:var(--tx);line-height:var(--lx);font-weight:600;color:var(--c3)}
@media (hover:hover){.beta:hover img{transform:translateY(calc(-3*var(--z)))}.beta:hover small{color:#fff}}
#barriers .scr-v{flex-direction:column;gap:clamp(14*var(--z),2.4vh,22*var(--z))}
#barriers .scenes.c2{--ph-h:clamp(380*var(--z),calc(100vh - 440*var(--z)),480*var(--z))}
.scr-n{width:100%;max-width:calc(1000*var(--z));margin:0 auto;text-align:center;font-size:var(--ts);line-height:var(--ls);font-weight:500;color:var(--c3);text-wrap:pretty}
.scr-n a{color:#fff;text-decoration:underline;text-underline-offset:calc(2*var(--z))}
.lnk{flex:none;width:clamp(44*var(--z),7vw,96*var(--z));display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--z))}
.lnk>i{display:block;width:100%;border-top:calc(2*var(--z)) dashed rgba(255,255,255,.72)}
.lnk-i{display:flex;align-items:center;justify-content:center;width:clamp(36*var(--z),4vw,56*var(--z));height:clamp(36*var(--z),4vw,56*var(--z));border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.3)}.lnk-i .ic{width:60%;height:60%}
/* 第 7 屏 */
.steps{--ph-h:clamp(300*var(--z),calc(100vh - 590*var(--z)),460*var(--z))}
#start .scr-v{flex-direction:column;gap:calc(14*var(--z))}
.sub-note{width:100%;padding:calc(12*var(--z));border-radius:calc(22*var(--z));background:#fff;color:#0060D8;font-weight:600;font-size:calc(18*var(--z));line-height:calc(26*var(--z));text-align:center;text-wrap:balance}
.inner .sub-note{max-width:calc(900*var(--z));margin:0 auto clamp(28*var(--z),5vh,48*var(--z))}
@media (min-width:1025px){html[lang="en"] #start .it{font-size:min(calc(22*var(--z)),1.5vw);line-height:calc(34*var(--z));white-space:nowrap}}
#start .steps li{padding:calc(20*var(--z))}
.st-sc{flex:1;align-self:stretch;min-height:var(--ph-h);display:flex;justify-content:center}
.st-sc .ph{height:auto;display:flex}.st-sc .ph-s{flex:1;min-width:0;height:auto}
.st-sc .term{height:auto;flex:1;min-width:0}
.app-pair{background:linear-gradient(165deg,#5AA7FF,#1C5BD6 60%,#123A9C)}
.alert{align-self:center;width:calc(100% - 28*var(--z));margin:auto 0 calc(8*var(--z));border-radius:calc(18*var(--z));background:rgba(255,255,255,.94);overflow:hidden;text-align:center}
.alert>b{display:block;padding:calc(14*var(--z)) calc(12*var(--z)) calc(2*var(--z));font-weight:600}.alert>p{text-wrap:balance;padding:0 calc(12*var(--z)) calc(12*var(--z));font-size:var(--tx);line-height:var(--lx);color:#3A3A3D}
.al-b{display:grid;grid-template-columns:1fr 1fr;box-shadow:inset 0 calc(1*var(--z)) 0 rgba(0,0,0,.14)}.al-b span{padding:calc(9*var(--z)) calc(4*var(--z));color:#0A7CFF}.al-b .tr{font-weight:600;box-shadow:inset calc(1*var(--z)) 0 0 rgba(0,0,0,.14)}
.pair-c{margin:0 0 auto;padding:calc(6*var(--z)) calc(14*var(--z)) calc(14*var(--z));color:#fff!important;justify-content:center;text-align:center}.pair-c svg{color:#fff!important}
/* 中文大标题的全角逗号收紧，说明和卡片保持全角；第 3 屏标题的逗号要显示全角，单独关掉 */
html[lang="zh-Hans"] .h2{font-feature-settings:"palt" 1}
html[lang="zh-Hans"] #barriers .h2{font-feature-settings:normal}
.steps li>.it,.steps li>.desc{align-self:stretch}
@media (min-width:380px) and (max-width:560px){#barriers .scr-h .pg{white-space:nowrap}#barriers .scr-h{margin-inline:-8px;width:auto;align-self:stretch}}
.ph-s [data-st="type"]{display:inline-block;max-width:100%}
.term-b [data-st="type"]{display:block}
@media (min-width:1101px) and (max-width:1320px){.scenes.c4{--ph-h:570px}}
@media (max-width:340px){.scenes.c4 .term{height:490px}}
@media (max-width:1100px){.scenes.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  #barriers .scenes.c2{--ph-h:400px}
  .duo.any{flex-direction:column;gap:10px}
  .agents{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .lnk{flex-direction:row;width:auto;gap:10px}.lnk>i{display:none}
  .lnk-i{width:36px;height:36px}
}
@media (max-width:960px){.scenes.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .scenes.c4,.scenes.c3,.scenes.c2{--ph-h:450px;grid-template-columns:minmax(0,1fr)}
  .scenes.c4{--ph-h:520px}.scenes.c2{--ph-h:424px}.steps{--ph-h:340px}#start .steps li:last-child{--ph-h:504px}
  .scenes.c2 .duo{min-height:240px}
  #barriers .scenes.c2{--ph-h:424px}
  .ph{width:min(300px,100%)}
  .scenes .term{height:440px}
  .rest #entries,.rest #demo{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){a.scene,.rw,.tg-e,.beta img{transition:none}}

/* 比例：HTML 上写死宽高的图标跟着 --z 放大 */
.trigger svg,.btn svg{width:calc(12*var(--z));height:calc(12*var(--z))}
.sb-r svg:first-child{width:calc(18*var(--z));height:calc(12*var(--z))}.sb-r svg:last-child{width:calc(26*var(--z));height:calc(12*var(--z))}
.menu-btn svg{width:calc(16*var(--z));height:calc(12*var(--z))}
.ok svg,.pk-step svg{width:calc(16*var(--z));height:calc(16*var(--z))}
.back svg{width:calc(10*var(--z));height:calc(18*var(--z))}
.st-badge svg{width:calc(18*var(--z));height:calc(18*var(--z))}
/* 第 4 屏：跨 App 的复合任务。手机里每个 App 一层，默认露出最后一层，也就是结果 */
.pay-f{padding:calc(12*var(--z)) calc(14*var(--z)) 0}
.scenes.c4.flows{--ph-h:clamp(400*var(--z),calc(100vh - 472*var(--z)),428*var(--z))}
.flow{gap:calc(10*var(--z))}
.flow .sc-l{font-size:var(--t3);line-height:var(--l3);font-weight:600}
html[lang="zh-Hans"] .flow .sc-l{line-height:var(--l3z)}
.chain{list-style:none;flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(4*var(--z)) calc(4*var(--z));font-size:var(--tx);line-height:var(--lx);font-weight:600}
.ch{display:flex;align-items:center;gap:calc(3*var(--z));white-space:nowrap;transition:opacity .25s}
.ch+.ch::before{content:"\203A";margin-right:calc(1*var(--z));opacity:.72}
.ch i{display:flex;align-items:center;justify-content:center;flex:none;width:calc(20*var(--z));height:calc(20*var(--z));border-radius:calc(6*var(--z));background:var(--a);box-shadow:0 0 0 calc(1*var(--z)) rgba(255,255,255,.55);color:#fff;font-style:normal;font-size:calc(12*var(--z));line-height:1;font-weight:700}
.ch i svg{display:block;width:calc(13*var(--z));height:calc(13*var(--z))}
.ch.off{opacity:.38}
.flow-s{background:#F2F2F7}
.scrn{position:absolute;left:0;right:0;top:calc(40*var(--z));bottom:0;display:flex;flex-direction:column;overflow:hidden;background:#F2F2F7;visibility:hidden}
.scrn:last-child{visibility:visible}
.flow .scap.ok{flex:none}
.fl-ok{padding-top:calc(10*var(--z));padding-bottom:calc(14*var(--z))}
.flow .fl-ok{margin-top:auto}
.app-xhs{background:#F7F7F8}
.xhs{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--z));padding:0 calc(12*var(--z))}
.xn{display:block;border-radius:calc(12*var(--z));background:#fff;overflow:hidden;transition:box-shadow .2s}
.xn i{display:block;height:calc(96*var(--z))}
.xn em{display:block;padding:calc(6*var(--z)) calc(8*var(--z));font-style:normal;font-size:var(--tx);line-height:var(--lx)}
.xn.hit{box-shadow:0 0 0 calc(2*var(--z)) #FF2442}
.app-mp{background:#fff}
.app-mp .url{margin-top:calc(2*var(--z))}
.map{display:block;flex:1;min-height:0;width:calc(100% - 24*var(--z));margin:calc(8*var(--z)) calc(12*var(--z));border-radius:calc(14*var(--z))}
.msheet{flex:none;display:grid;gap:calc(8*var(--z));padding:0 calc(12*var(--z)) calc(14*var(--z))}
.msheet b{font-weight:600}
.app-wx{background:#EDEDED}
.wx-h{flex:none;padding:calc(2*var(--z)) calc(14*var(--z)) calc(8*var(--z));text-align:center;font-weight:600;box-shadow:0 calc(1*var(--z)) 0 rgba(0,0,0,.1)}
.wx-o{background:#95EC69;border-bottom-right-radius:calc(6*var(--z))}
.wx-i{background:#fff;border-bottom-left-radius:calc(6*var(--z));transition:box-shadow .2s}
.wx-c{display:grid;gap:calc(6*var(--z));width:78%;padding:calc(8*var(--z));background:#fff;border-bottom-right-radius:calc(6*var(--z));text-align:left}
.wx-c b{font-weight:600}
.wx-c .map{flex:none;width:100%;height:calc(84*var(--z));margin:0;border-radius:calc(10*var(--z))}
.app-ali{background:#F5F6F8}
.ali-h b{color:#1677FF}
.app-nt{background:#F2F2F7}
.memo{flex:none;display:grid;gap:calc(8*var(--z));margin:0 calc(12*var(--z));padding:calc(12*var(--z)) calc(14*var(--z));border-radius:calc(14*var(--z));background:#FFF6CF}
.me{display:flex;justify-content:space-between;gap:calc(8*var(--z))}
.me b{font-weight:600}
.me-t{padding-top:calc(8*var(--z));font-weight:700;box-shadow:inset 0 calc(1*var(--z)) 0 rgba(0,0,0,.14)}
.me-t b{font-weight:700}
.app-ct{background:#F2F5FA}
.ct-h{flex:none;display:grid;gap:calc(2*var(--z));margin:calc(2*var(--z)) calc(12*var(--z)) calc(10*var(--z));padding:calc(10*var(--z)) calc(12*var(--z));border-radius:calc(14*var(--z));background:#2681FF;color:#fff}
.ct-h b{font-weight:600}
.ct-h small{opacity:.9}
.tk{flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(2*var(--z)) calc(10*var(--z));margin:0 calc(12*var(--z)) calc(8*var(--z));padding:calc(10*var(--z)) calc(12*var(--z));border-radius:calc(12*var(--z));background:#fff;transition:box-shadow .2s}
.tk b{font-weight:700}
.tk em{font-style:normal;font-weight:600;color:#D9480F}
.tk small{grid-column:1/-1;color:#0060D8;font-weight:600}
.tk.hit{box-shadow:0 0 0 calc(2*var(--z)) #2681FF}
.ord{flex:none;display:flex;justify-content:space-between;gap:calc(8*var(--z));margin:0 calc(12*var(--z));padding:calc(12*var(--z));border-radius:calc(12*var(--z));background:#fff}
.ord b{font-weight:700}
.fl-stop{padding-top:calc(12*var(--z));text-align:center;color:#0060D8;font-weight:600}
.app-cl{background:#fff}
.evt{flex:none;display:grid;gap:calc(2*var(--z));margin:0 calc(12*var(--z)) calc(2*var(--z));padding:calc(10*var(--z)) calc(12*var(--z)) calc(10*var(--z)) calc(16*var(--z));border-radius:calc(12*var(--z));background:#FFECEB;box-shadow:inset calc(3*var(--z)) 0 0 #FF3B30}
.evt b{font-weight:700}
.evt small{color:#6B6B70}
/* 第 5 屏：同一套手机界面上画三条路径。线条用遮罩逐段露出，虚线才不会被 pathLength 的虚线盖掉 */
.trail-w{width:100%;display:flex;flex-direction:column;gap:var(--s-gap)}
.scenes.c3.trail{grid-template-columns:repeat(3,minmax(0,1fr))}
.trail .ph{height:auto}
.trail .ph-s{height:auto}
.tr-s{display:block;width:100%;height:auto}
.tr-n{font-family:var(--sans);font-size:17px;font-weight:700;fill:#111}
.tr-r{font-family:var(--sans);font-size:14px;font-weight:500;fill:#111}
.tr-l{transition:opacity .4s}
.tr-m{stroke-linecap:butt}
.trail .scene-w:not(:last-child) .tr-l{opacity:.55}
.trail .scene-w:not(:last-child) .tr-f{opacity:0}
.trail.is-play .scene-w .tr-l{opacity:1}
.tr-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(12*var(--z)) calc(20*var(--z));text-align:center}
.btn.tr-replay{min-height:calc(44*var(--z));padding:0 calc(20*var(--z))}
.btn.tr-replay svg{width:calc(16*var(--z));height:calc(16*var(--z))}
@media (prefers-reduced-motion:reduce){.tr-replay{display:none}}
@media (max-width:560px){
  .scenes.c4.flows{--ph-h:450px}
  .scenes.c3.trail{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .trail .scene{padding:6px 5px;gap:6px;border-radius:14px}
  .trail .sc-l{font-size:13px;line-height:18px}
  .trail .ph{padding:3px;border-radius:15px;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 8px 20px rgba(0,40,120,.35)}
  .trail .ph-s{border-radius:12px}
}