/* 主站和文档站共用：变量、顶部导航、按钮。
   导航：framesbase MotionSites「Atlas Nav」的变形下拉和手机抽屉，https://framesbase.app/motionsites/sites/motionsites-sites-atlas-nav ，颜色改成主站玻璃卡；图标来自 Lucide（ISC）
   按钮：framesbase MotionSites「Liquid Glass CTA」，https://framesbase.app/motionsites/sections/motionsites-sections-liquid-glass-cta */
:root{
  /* 全站比例：1440 宽以内恒为 1px，比 1440 宽的屏幕按宽和高里较小的那个放大。每屏可以在自己的 section 上换分母 */
  --z:max(1px,min(calc(100vw / 1440),calc(100vh / 900)));
  --cjk:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;--sans:"Geist","Noto Sans SC","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --barh:calc(76*var(--z));--panel:rgba(0,88,206,.94);--line:rgba(255,255,255,.28);--hover:rgba(255,255,255,.14);--soft:rgba(255,255,255,.92);--ease:cubic-bezier(.22,1,.36,1);--morph:.5s;--c3:rgba(255,255,255,.84)}
/* 这组变量声明在 .scr 上也声明一次，这样每屏换了 --z，字号和节奏跟着变 */
html[lang="en"] [data-l="zh"],html[lang="zh-Hans"] [data-l="en"]{display:none}
:root,.scr{
  --t1:clamp(50*var(--z),calc(35.886*var(--z) + 3.6190vw),88*var(--z));--l1:clamp(54*var(--z),calc(39.886*var(--z) + 3.6190vw),92*var(--z));--t2:clamp(28*var(--z),calc(19.086*var(--z) + 2.2857vw),52*var(--z));--l2:clamp(36*var(--z),calc(27.086*var(--z) + 2.2857vw),60*var(--z));--tc:clamp(24*var(--z),calc(23.257*var(--z) + 0.1905vw),26*var(--z));--lc:clamp(32*var(--z),calc(31.257*var(--z) + 0.1905vw),34*var(--z));--tl:clamp(20*var(--z),calc(18.514*var(--z) + 0.3810vw),24*var(--z));--ll:clamp(28*var(--z),calc(27.257*var(--z) + 0.1905vw),30*var(--z));--t3:clamp(18*var(--z),calc(17.257*var(--z) + 0.1905vw),20*var(--z));--l3:clamp(28*var(--z),calc(27.257*var(--z) + 0.1905vw),30*var(--z));--l3z:clamp(30*var(--z),calc(28.514*var(--z) + 0.3810vw),34*var(--z));--tg:clamp(16*var(--z),calc(15.257*var(--z) + 0.1905vw),18*var(--z));--lg:clamp(20*var(--z),calc(18.514*var(--z) + 0.3810vw),24*var(--z));--ts:clamp(15*var(--z),calc(14.629*var(--z) + 0.0952vw),16*var(--z));--ls:clamp(22*var(--z),calc(21.257*var(--z) + 0.1905vw),24*var(--z));--tx:clamp(13*var(--z),calc(12.629*var(--z) + 0.0952vw),14*var(--z));--lx:clamp(18*var(--z),calc(17.257*var(--z) + 0.1905vw),20*var(--z));  --s-top:clamp(20*var(--z),4.5vh,48*var(--z));--s-gap:clamp(24*var(--z),4.45vh,40*var(--z))}
header.header,header.header *{box-sizing:border-box}
header.header{color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}
:where(header.header) :where(ul,h3){margin:0;padding:0}
:where(header.header) :where(a,button){color:inherit;font:inherit;text-decoration:none;border:0;background:none}
:where(header.header) :where(button){cursor:pointer}
header.header :focus-visible,.btn:focus-visible{outline:calc(2*var(--z)) solid #fff;outline-offset:calc(3*var(--z));border-radius:calc(6*var(--z))}
header.header{position:fixed;top:0;left:0;right:0;z-index:20;transition:background-color .2s,box-shadow .2s;padding-top:env(safe-area-inset-top)}
header.header.is-solid{background:#0077FD;box-shadow:0 calc(6*var(--z)) calc(24*var(--z)) rgba(0,45,130,.3)}
.bar{height:var(--barh);padding:0 clamp(20*var(--z),3.4vw,49*var(--z));display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
header.header .logo{position:static;justify-self:start;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));letter-spacing:-.01em}
header.header .logo i,.f-brand i{display:block;width:calc(30*var(--z));height:calc(30*var(--z));border-radius:24%;background:url(/assets/poki-icon.png) center/cover;box-shadow:0 0 0 calc(1*var(--z)) rgba(255,255,255,.35)}
.links{list-style:none;display:flex;align-items:center;gap:calc(28*var(--z))}
.trigger,.plain-link{display:inline-flex;align-items:center;gap:calc(4*var(--z));padding:calc(8*var(--z)) 0;font-size:calc(16*var(--z));line-height:calc(24*var(--z));font-weight:500;color:var(--soft);transition:color .25s ease}
.trigger:hover,.plain-link:hover,.trigger[aria-expanded="true"]{color:#fff}
.trigger svg{transition:transform .35s var(--ease)}
.trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.actions{justify-self:end;display:flex;align-items:center;gap:calc(10*var(--z))}
.x-link{display:inline-flex;align-items:center;justify-content:center;width:calc(32*var(--z));height:calc(32*var(--z));color:var(--soft);transition:color .25s ease}
.x-link:hover{color:#fff}
.x-link svg{width:calc(18*var(--z));height:calc(18*var(--z))}
/* GitHub 入口：桌面不显示（导航里已有），手机宽度放在顶栏第一屏 */
.gh-link{display:none;align-items:center;justify-content:center;width:36px;height:32px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff}
.gh-link svg{width:18px;height:18px}
.lang{display:flex;padding:calc(3*var(--z));font-weight:500;font-size:var(--tx);line-height:var(--lx);border-radius:calc(999*var(--z));box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.7)}
.lang button{display:flex;align-items:center;justify-content:center;min-width:0;padding:calc(2*var(--z)) calc(10*var(--z));border-radius:calc(999*var(--z));transition:background-color .15s,color .15s}
.lang button:hover{background:rgba(255,255,255,.18)}
.lang button[aria-pressed="true"]{background:#fff;color:#0060D8}
.dd{--x:0px;--w:calc(400*var(--z));--h:calc(300*var(--z));--s:.97;position:absolute;top:calc(64*var(--z));left:0;width:var(--w);height:var(--h);transform:translateX(var(--x)) scale(var(--s));transform-origin:50% 0;opacity:0;pointer-events:none;border-radius:calc(24*var(--z));background:var(--panel);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),0 calc(24*var(--z)) calc(60*var(--z)) calc(-20*var(--z)) rgba(0,40,120,.55);-webkit-backdrop-filter:blur(calc(48*var(--z))) saturate(140%);backdrop-filter:blur(calc(48*var(--z))) saturate(140%);overflow:hidden;transition:transform var(--morph) var(--ease),width var(--morph) var(--ease),height var(--morph) var(--ease),opacity .3s ease}
.dd.open{--s:1;opacity:1;pointer-events:auto}
.dd.instant{transition:opacity .3s ease,transform var(--morph) var(--ease)}
.dd.instant.snap{transition:none}
.panel{position:absolute;top:0;left:0;padding:calc(8*var(--z));display:flex;flex-direction:column;gap:calc(2*var(--z));opacity:0;visibility:hidden;filter:blur(calc(8*var(--z)));transform:translateX(0);transition:opacity .26s ease,transform var(--morph) var(--ease),filter .4s ease,visibility 0s linear var(--morph)}
.panel[data-state="exit-left"]{transform:translateX(calc(-56*var(--z)))}
.panel[data-state="exit-right"]{transform:translateX(calc(56*var(--z)))}
.panel[data-state="active"]{opacity:1;visibility:visible;filter:blur(0);transform:translateX(0);transition:opacity .36s ease .06s,transform var(--morph) var(--ease),filter .45s ease .04s,visibility 0s}
.panel.snap{transition:none!important}
#p-product{width:calc(400*var(--z));height:calc(224*var(--z))}
#p-integrations{width:calc(400*var(--z));height:calc(360*var(--z))}
.r-link{flex:1;display:flex;align-items:center;gap:calc(12*var(--z));padding:0 calc(12*var(--z));border-radius:calc(14*var(--z));font-size:calc(16*var(--z));line-height:calc(24*var(--z));transition:background-color .25s}
.r-link b,.sheet b{font-weight:600}
.r-link small,.sheet small{display:block;font-size:var(--tx);font-weight:500;line-height:var(--lx);color:rgba(255,255,255,.84)}
.r-link:hover,.r-link:focus-visible{background:var(--hover)}
.nav-t{min-width:0;display:flex;flex-direction:column;gap:calc(2*var(--z))}
.r-link b small,.sheet b small{display:inline;margin-left:calc(6*var(--z));font-weight:500;opacity:.84}
.nav-ic{flex:none;display:flex;align-items:center;justify-content:center;width:calc(36*var(--z));height:calc(36*var(--z));border-radius:calc(10*var(--z));color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 calc(1*var(--z)) rgba(255,255,255,.28)}
.nav-ic svg{display:block;width:calc(20*var(--z));height:calc(20*var(--z))}
.menu-btn{display:none;width:calc(36*var(--z));height:calc(32*var(--z));border-radius:calc(999*var(--z));background:rgba(255,255,255,.12);align-items:center;justify-content:center}
.sheet{display:none}
/* 1180 以下导航间距跟着屏宽收，六个入口在 861 宽也放得下 */
@media (max-width:1180px){.links{gap:clamp(14px,calc(4.4vw - 24px),28px)}}
@media (max-width:860px){
  :root{--barh:60px}
  .bar{grid-template-columns:1fr auto}
  .desktop-nav{display:none}
  .menu-btn{display:inline-flex}
  .x-link{display:none}
  .gh-link{display:inline-flex}
  .lang button{height:32px;padding:0 10px}
  .sheet{display:block;position:absolute;top:calc(var(--barh) + env(safe-area-inset-top) - 4px);left:12px;right:12px;padding:10px;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.55),0 24px 60px -20px rgba(0,40,120,.55);-webkit-backdrop-filter:blur(48px) saturate(140%);backdrop-filter:blur(48px) saturate(140%);max-height:calc(100svh - 90px);overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:50% 0;transition:opacity .3s ease,transform .45s var(--ease),visibility 0s linear .45s}
  .sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .45s var(--ease)}
  .sheet h3{font-size:13px;line-height:18px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.84);margin:10px 12px 6px}
  .sheet a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;font-size:16px;line-height:24px}
  .sheet a:hover{background:var(--hover)}
}
@media (max-height:500px){:root{--barh:52px}}
@media (prefers-reduced-motion:reduce){:root{--morph:.01s}.panel,.panel[data-state]{filter:none}}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:calc(8*var(--z));min-height:calc(52*var(--z));padding:0 calc(26*var(--z));border-radius:calc(999*var(--z));font-weight:600;font-size:var(--tg);line-height:calc(24*var(--z));overflow:hidden;transition:background-color .2s}
.btn svg{display:block;flex:none}
.btn-w{background:#fff;color:#0060D8}
.btn-w:hover{background:rgba(255,255,255,.9)}
.btn-g{background:rgba(255,255,255,.1);box-shadow:calc(4*var(--z)) calc(4*var(--z)) calc(4*var(--z)) rgba(0,0,0,.05),inset 0 calc(1*var(--z)) calc(1*var(--z)) rgba(255,255,255,.15)}
.btn-g:hover{background:rgba(255,255,255,.18)}
.btn-g::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(1.4*var(--z));background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3) 20%,rgba(255,255,255,.1) 40%,rgba(255,255,255,.1) 60%,rgba(255,255,255,.3) 80%,rgba(255,255,255,.7));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}