/* FrameFlow 共享组件样式 —— 只给文档模板组
 * 453 条规则，**按页面内的原始顺序输出**（字母序会打乱级联 ✗）。
 * ⚠️ **不含令牌定义** —— 令牌只由 ff-tokens.css 提供；
 *    否则本文件（后加载）里的 :root 会覆盖它，把颜色退回旧值 ✗。
 * ⚠️ 不要挂到内容页；必须放在页面 <style> 之前。 */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background: var(--sky-0);}
body{
  margin:0;
  background: transparent;
  color: var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.bg-grad{
  position:absolute;inset:-6%;
  background: radial-gradient(ellipse 84% 70% at 50% 40%,
    var(--sky-5) 0%,
    var(--sky-4) 14%,
    var(--sky-3) 30%,
    var(--sky-2) 48%,
    var(--sky-1) 66%,
    var(--sky-0) 84%);
}
.pulse-core{
  position:absolute;left:50%;top:40%;
  width:38vmax;height:38vmax;margin-left:-19vmax;margin-top:-19vmax;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    var(--surface) 0%,
    rgba(var(--w-rgb),.15) 46%,
    rgba(var(--w-rgb),0) 72%);
}
h1,h2,h3,p{margin:0;}
a{color: inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border: none;background: none;color: inherit;}
img,svg{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.tnum{font-variant-numeric:tabular-nums;}
.nb{white-space:nowrap;}
.rise{animation:rise .8s cubic-bezier(.2,.7,.25,1) both;}
.d1{animation-delay:.05s}
.d2{animation-delay:.14s}
.d3{animation-delay:.23s}
.d4{animation-delay:.32s}
.d5{animation-delay:.42s}
.d6{animation-delay:.54s}
.site-header{
  position:sticky;top:0;z-index:60;
  background: transparent;      /* 09-26 22:xx 杰：顶栏背景恒透明，原为 var(--surface) */
  backdrop-filter:none;         /* 原 saturate(150%) blur(18px)：毛玻璃一并移除 */
  -webkit-backdrop-filter:none;
  border-bottom: 1px solid transparent;
  transition:border-color .3s ease;
}
/* A5 顶栏：未滚动时除内容外全部隐藏（滚动态由 .site-header / .site-header.is-stuck 恢复） */
.site-header:not(.is-stuck){
  background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.site-header:not(.is-stuck) .hxm-btn{border:0;}
.site-header:not(.is-stuck) .logo-mark{box-shadow:none;}
.site-header:not(.is-stuck) .btn-primary{box-shadow:none;}

.site-header.is-stuck{border-bottom-color: var(--line);}
.hd-inner{display:flex;align-items:center;gap:40px;height:76px;}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em;}
.logo-mark{
  width:30px;height:30px;border-radius: 7px;flex:none;position:relative;
  background: var(--brand) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Crect%20width='512'%20height='512'%20rx='118'%20fill='%230B5BB5'/%3E%3Cpath%20d='M-16%20438%20C%2092%20438,%20104%20307,%20212%20307%20S%20320%20438,%20428%20438%20S%20512%20360,%20528%20360'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='76'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: inset 0 0 0 1px rgba(var(--black-rgb),.06);
}
.logo-mark::before{content:none;}
.nav{display:flex;gap:26px;margin-right:auto;font-size:15px;color: var(--ink-2);}
.nav a{position:relative;padding:4px 0;transition:color .2s ease;}
.nav a:hover{color: var(--ink);}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background: var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.25,1);
}
.nav a:hover::after{transform:scaleX(1);}
.nav a.on{color: var(--ink);font-weight:600;}
.nav a.on::after{transform:scaleX(1);}
.hd-actions{display:flex;align-items:center;gap:20px;font-size:15px;}
.link-quiet{color: var(--ink-2);transition:color .2s;}
.link-quiet:hover{color: var(--ink);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius: 12px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.25,1), box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn-primary{
  background: var(--brand);color: var(--white);padding:12px 22px;font-size:15px;
  box-shadow: 0 1px 2px rgba(var(--brand-shadow-rgb),.28), 0 8px 20px rgba(var(--brand-ink2-rgb),.22);
}
.btn-primary:hover{background: var(--brand-deep);transform:translateY(-2px);box-shadow: 0 2px 4px rgba(var(--brand-shadow-rgb),.3), 0 14px 30px rgba(var(--brand-ink2-rgb),.3);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{
  background: var(--surface);color: var(--ink);padding:11px 21px;font-size:15px;
  border: 1px solid var(--line-strong);box-shadow: var(--shadow-sm);
}
.btn-ghost:hover{transform:translateY(-2px);box-shadow: var(--shadow-md);border-color: var(--ink-3);}
.btn-lg{padding:17px 32px;font-size:16.5px;border-radius: 14px;}
.btn-arrow{width:15px;height:15px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.25,1);}
.btn:hover .btn-arrow{transform:translateX(3px);}
.hero{position:relative;padding:88px 0 0;overflow:hidden;}
.hero-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;}
.badge{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:6px 14px 6px 8px;border-radius: 999px;
  background: var(--surface);border: 1px solid var(--line-strong);
  font-size:13.5px;color: var(--ink-2);box-shadow: var(--shadow-sm);
}
.badge-tag{
  background: var(--acid);color: var(--cat-olive-deep);font-weight:700;font-size:11.5px;
  padding:3px 9px;border-radius: 999px;letter-spacing:.02em;
}
h1{
  margin-top:26px;
  font-size:var(--fs-display);
  line-height:1.1;font-weight:800;letter-spacing:-.035em;
  max-width:15em;
}
h1 .accent{
  position:relative;display:inline-block;color: var(--brand-ink);
}
h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.075em;
  background: var(--brand);border-radius: 99px;opacity:.55;
}
.hero-sub{
  margin-top:24px;max-width:620px;text-wrap:pretty;
  font-size:clamp(16px,1.25vw,18.5px);line-height:1.68;color: var(--ink-2);
}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;justify-content:center;}
.hero-note{margin-top:18px;font-size:13.5px;color: var(--ink-3);letter-spacing:.01em;}
.ticks{display:flex;align-items:flex-end;gap:5px;height:22px;margin-top:34px;}
.ticks i{display:block;width:3px;border-radius: 2px;background: rgba(var(--deep2-rgb),.16);}
.ticks i:nth-child(1){height:7px}
.ticks i:nth-child(2){height:12px}
.ticks i:nth-child(3){height:9px}
.ticks i:nth-child(4){height:16px}
.ticks i:nth-child(5){height:11px}
.ticks i:nth-child(6){height:19px}
.ticks i:nth-child(7){height:13px}
.ticks i:nth-child(8){height:22px}
.ticks i:nth-child(9){height:15px}
.ticks i:nth-child(10){height:18px}
.ticks i:nth-child(11){height:9px}
.ticks i:nth-child(12){height:14px}
.ticks i:nth-child(6),.ticks i:nth-child(8){background: var(--brand);}
.stage{
  position:relative;margin-top:28px;width:100%;
  background: var(--surface);border: 1px solid var(--line);
  border-radius: var(--r-xl);padding:26px;
  box-shadow: var(--shadow-lg);
}
.stage-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;}
.pane{position:relative;border-radius: var(--r-lg);overflow:hidden;background: var(--sky-3);}
.pane-media{aspect-ratio:4/3;width:100%;}
.pane-tag{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius: 999px;font-size:12px;font-weight:600;letter-spacing:.01em;
  background: rgba(var(--abyss-rgb),.78);color: var(--white);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pane-tag .dot{width:6px;height:6px;border-radius: 50%;background: var(--surface-2);opacity:.55;flex:none;}
.pane.is-live .pane-tag{background: var(--brand);}
.pane.is-live .pane-tag .dot{background: var(--surface-2);opacity:1;animation:blink 1.6s ease-in-out infinite;}
.pane-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:26px 16px 13px;display:flex;justify-content:space-between;align-items:flex-end;
  background: linear-gradient(to top, rgba(var(--abyss2-rgb),.74), rgba(var(--abyss2-rgb),0));
  color: var(--white);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.pane-meta span:last-child{opacity:.72;letter-spacing:.02em;text-transform:none;font-weight:500;}
.convert{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 4px;}
.convert-btn{
  width:56px;height:56px;border-radius: 50%;flex:none;
  background: var(--brand);color: var(--white);display:grid;place-items:center;
  box-shadow: 0 2px 4px rgba(var(--brand-shadow-rgb),.3), 0 12px 26px rgba(var(--brand-ink2-rgb),.32);
  transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.convert-btn:hover{transform:scale(1.07) rotate(-4deg);}
.convert-btn svg{width:23px;height:23px;}
.convert-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-3);font-weight:600;}
.pane-media{position:relative;aspect-ratio:4/3;width:100%;}
.uploaded{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pane-src{cursor:pointer;transition:box-shadow .25s ease;}
.pane-src:hover{box-shadow: 0 0 0 2px rgba(var(--brand-ink2-rgb),.30);}
.pane-src:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: 3px;}
.pane.is-playing .uploaded,
.pane.is-playing .scene{animation:kenburns 9s ease-in-out infinite alternate;}
.pane.is-playing .pane-media::after{
  content:"";position:absolute;inset:-20%;z-index:2;pointer-events:none;
  background: linear-gradient(112deg, rgba(var(--w-rgb),0) 38%, var(--surface) 50%, rgba(var(--w-rgb),0) 62%);
  animation:sweep 5.5s ease-in-out infinite;
}
.pane.is-waiting .scene,
.pane.is-waiting .scene *,
.pane.is-waiting .uploaded,
.pane.is-waiting .pane-media::after{animation:none !important;}
.pane-src.dragging .pane-media::after{
  content:"松手即可载入这张图";
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background: rgba(var(--brand-ink2-rgb),.90);color: var(--white);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  animation:none;
}
.progress{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:5;
  height:4px;border-radius: 99px;background: rgba(var(--deep-rgb),.38);overflow:hidden;
  opacity:0;transition:opacity .25s ease;
}
.progress.on{opacity:1;}
.progress i{
  display:block;height:100%;width:0;border-radius: 99px;
  background: linear-gradient(90deg,var(--brand),var(--brand-ink));
  transition:width .18s linear;
}
.convert-btn{border: none;padding:0;cursor:pointer;}
.convert-btn.is-ready{animation:btnPulse 2.2s ease-in-out infinite;}
.convert-btn.is-busy{cursor:progress;}
.convert-btn.is-busy svg{animation:spin 1.1s linear infinite;}
.stage-foot{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;
  padding-top:20px;border-top: 1px dashed var(--line-strong);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius: 999px;font-size:13px;color: var(--ink-2);
  background: var(--sky-3);border: 1px solid var(--line);
}
.chip svg{width:14px;height:14px;color: var(--brand-ink);flex:none;}
.scene{width:100%;height:100%;}
.scene .sun{transform-origin:center;}
.scene .glow{opacity:0;}
.is-live .scene .glow{opacity:1;animation:pulse 4.2s ease-in-out infinite;}
.is-live .scene .cloud-a{animation:drift 11s linear infinite;}
.is-live .scene .cloud-b{animation:drift 17s linear infinite;animation-delay:-4s;}
.is-live .scene .star{animation:twinkle 3.2s ease-in-out infinite;}
.is-live .scene .star.s2{animation-delay:-1.1s;}
.is-live .scene .star.s3{animation-delay:-2.2s;}
.is-live .scene .river{animation:shimmer 5s ease-in-out infinite;}
.is-live .scene .river.r2{animation-delay:-1.6s;}
.is-live .scene .river.r3{animation-delay:-3.2s;}
.section{padding:112px 0;}
.sec-head{max-width:640px;}
.sec-kicker{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color: var(--brand-ink);margin-bottom:16px;
}
h2{font-size:var(--fs-h2);line-height:1.18;font-weight:750;letter-spacing:-.03em;}
.sec-desc{margin-top:18px;font-size:17px;line-height:1.7;color: var(--ink-2);max-width:560px;}
.proof{padding:0 0 112px;}
.proof-card{
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-radius: var(--r-xl);
  padding:64px 56px;position:relative;overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.proof-card::before{
  content:"";position:absolute;top:-160px;right:-120px;width:520px;height:420px;
  background: radial-gradient(circle, rgba(var(--brand-mid2-rgb),.22), rgba(var(--brand-mid2-rgb),0) 68%);pointer-events:none;
}
.proof-inner{position:relative;z-index:1;}
.proof-kicker{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color: var(--brand-ink);margin-bottom:18px;
}
.proof h2{max-width:16em;}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:52px;border-top: 1px solid var(--line);padding-top:40px;
}
.stat{padding-right:26px;}
.stat + .stat{padding-left:30px;border-left: 1px solid var(--line);}
.stat-num{
  font-size:clamp(32px,3.2vw,44px);font-weight:750;letter-spacing:-.035em;line-height:1;
  display:flex;align-items:baseline;gap:5px;
}
.stat-num em{font-style:normal;font-size:.5em;font-weight:600;color: var(--brand-ink);letter-spacing:0;}
.stat-label{margin-top:12px;font-size:13.5px;color: var(--ink-3);letter-spacing:.01em;}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;}
.quote{
  background: var(--surface-2);border: 1px solid var(--line);
  border-radius: var(--r-md);padding:26px 24px;
  transition:background .28s ease, transform .28s cubic-bezier(.2,.7,.25,1);
}
.quote:hover{background: var(--sky-3);transform:translateY(-3px);}
.quote p{font-size:14.5px;line-height:1.72;color: var(--ink-2);}
.quote-who{display:flex;align-items:center;gap:11px;margin-top:22px;}
.avatar{
  width:34px;height:34px;border-radius: 50%;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:700;color: var(--cat-ink);background: var(--acid);
}
.avatar.b{background: var(--brand-ink);}
.avatar.c{background: var(--ink-2);}
.quote-name{display:block;font-size:13.5px;font-weight:600;color: var(--ink);line-height:1.35;}
.quote-role{display:block;font-size:12px;color: var(--ink-3);}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px;}
.plan{
  background: var(--surface);border: 1px solid var(--line);border-radius: var(--r-lg);
  padding:32px 28px 30px;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow: var(--shadow-md);}
.plan.featured{
  border: 2px solid var(--brand-ink);box-shadow: 0 2px 6px rgba(var(--brand-ink2-rgb),.1), 0 22px 50px rgba(var(--brand-ink2-rgb),.16);
  padding:38px 30px 36px;
}
.plan-flag{
  position:absolute;top:-13px;left:28px;
  background: var(--brand);color: var(--white);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;padding:5px 12px;border-radius: 999px;
}
.plan-name{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.plan-for{margin-top:7px;font-size:13px;color: var(--ink-3);line-height:1.5;min-height:2.6em;}
.plan-price{display:flex;align-items:baseline;gap:5px;margin-top:22px;}
.plan-price .cur{font-size:19px;font-weight:600;color: var(--ink-2);}
.plan-price .amt{font-size:46px;font-weight:800;letter-spacing:-.045em;line-height:1;}
.plan-price .per{font-size:13.5px;color: var(--ink-3);}
.plan-cta{
  display:block;width:100%;text-align:center;margin-top:24px;
  padding:13px 18px;border-radius: 12px;font-size:14.5px;font-weight:600;
  border: 1px solid var(--line-strong);background: var(--sky-3);color: var(--ink);
  transition:all .24s ease;
}
.plan-cta:hover{background: var(--line);color: var(--ink);border-color: var(--ink);}
.plan.featured .plan-cta{background: var(--brand);color: var(--white);border-color: var(--brand-ink);box-shadow: 0 8px 20px rgba(var(--brand-ink2-rgb),.24);}
.plan.featured .plan-cta:hover{background: var(--brand-deep);border-color: var(--brand-ink-2);}
.plan-list{margin-top:26px;padding-top:24px;border-top: 1px solid var(--line);display:flex;flex-direction:column;gap:13px;}
.plan-list li{display:flex;gap:11px;font-size:14px;color: var(--ink-2);line-height:1.5;}
.plan-list svg{width:16px;height:16px;flex:none;margin-top:3px;color: var(--brand-ink);}
.plan-list li.off{color: var(--ink-3);}
.plan-list li.off svg{color: var(--line-strong);}
.site-footer{background: var(--surface);padding:0 0 40px;overflow:hidden;}
.wordmark{
  font-size:clamp(58px,14vw,190px);font-weight:800;letter-spacing:-.05em;line-height:.86;
  color: rgba(var(--brand-mid2-rgb),.17);text-align:center;
  padding:70px 0 40px;user-select:none;white-space:nowrap;
}
.foot-grid{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;
  padding-top:52px;border-top: 1px solid var(--line);
}
.foot-brand .logo{color: var(--ink);}
.foot-tagline{margin-top:16px;font-size:14px;color: var(--ink-2);max-width:250px;line-height:1.65;}
.foot-col h4{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.04em;color: var(--ink);}
.foot-col li{margin-bottom:12px;}
.foot-col a{font-size:14px;color: var(--ink-2);transition:color .2s;}
.foot-col a:hover{color: var(--ink);}
.foot-icp{margin-left:14px;}
/* 备案号需「显著标明」（法规要求）—— 提到 --ink，确保在浅蓝/云白底上都够清楚 */
.foot-icp{color: var(--ink);}

.foot-icp.pending{color: var(--brand-ink-2);}
.foot-icp a{color: inherit;border-bottom: 1px solid var(--line-strong);}
.foot-icp a:hover{color: var(--ink);}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:56px;padding-top:26px;border-top: 1px solid var(--line);
  font-size:13px;color: var(--ink-3);
}
.foot-social{display:flex;gap:20px;}
.menu-btn{
  display:none;position:absolute;right:20px;top:18px;z-index:61;
  width:40px;height:40px;border-radius: 11px;
  border: 1px solid var(--line-strong);background: var(--surface);color: var(--ink);
  cursor:pointer;place-items:center;transition:background .2s ease;
}
.menu-btn:hover{background: var(--sky-3);}
.menu-btn svg{width:18px;height:18px;}
.mobile-nav{
  display:none;position:absolute;left:0;right:0;top:100%;
  background: var(--surface);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom: 1px solid var(--line);
  padding:6px 20px 14px;flex-direction:column;
  box-shadow: 0 18px 40px rgba(var(--black-rgb),0.31);
}
.mobile-nav.on{display:flex;}
.mobile-nav a{
  padding:13px 2px;font-size:15.5px;font-weight:500;color: var(--ink-2);
  border-bottom: 1px solid var(--line);transition:color .2s ease;
}
.mobile-nav a:last-child{border-bottom: none;}
.mobile-nav a.on{color: var(--brand-ink);font-weight:600;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline: 2px solid var(--brand-ink);outline-offset: 2px;border-radius: 4px;
}
.search input:focus-visible,.inp:focus-visible{outline: none;}
.nav-ws{position:relative;display:inline-block;}
.nav-ws-btn{
  display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius: 10px;
  border: none;background: transparent;font-family:inherit;font-size:15px;font-weight:500;
  color: var(--ink-2);cursor:pointer;transition:background .2s ease, color .2s ease;
}
.nav-ws-btn:hover{background: var(--sky-3);color: var(--ink);}
.nav-ws-btn.on{background: rgba(var(--brand-ink2-rgb),.09);color: var(--brand-ink);font-weight:600;}
.nav-ws-btn svg{width:13px;height:13px;flex:none;transition:transform .22s ease;}
.nav-ws.open .nav-ws-btn svg{transform:rotate(180deg);}
.ws-menu{
  position:absolute;left:50%;top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-6px);
  width:304px;padding:8px;border-radius: 16px;z-index:70;
  background: var(--surface);border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(var(--black-rgb),0.35);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.25,1);
}
.nav-ws.open .ws-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.wsm-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius: 11px;
  text-decoration:none;transition:background .18s ease;
}
.wsm-item:hover{background: var(--sky-3);}
.wsm-item + .wsm-item{margin-top:2px;}
.wsm-ico{
  width:36px;height:36px;border-radius: 10px;flex:none;display:grid;place-items:center;
  background: rgba(var(--brand-ink2-rgb),.10);color: var(--brand-ink);
}
.wsm-ico--alt{background: rgba(var(--brand-mid2-rgb),.13);color: var(--ink-4);}
.wsm-ico svg{width:18px;height:18px;}
.wsm-body{min-width:0;}
.wsm-t{display:block;font-size:14px;font-weight:600;color: var(--ink);line-height:1.2;}
.wsm-d{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;color: var(--ink-3);}
.nav-sep{
  width:1px;height:20px;flex:none;margin:0 12px 0 4px;
  background: var(--line-strong);
}
.nav-ws{flex:none;}
.nav-ws .nav-ws-btn{
  padding:8px 16px;border-radius: 999px;
  border: 1.5px solid rgba(var(--shade2-rgb),.42);
  color: var(--ink-2);font-weight:600;letter-spacing:-.01em;
  background: rgba(var(--shade2-rgb),.045);
}
.nav-ws .nav-ws-btn:hover{
  background: rgba(var(--shade2-rgb),.11);border-color: var(--ink-2);color: var(--ink-2);
}
.nav-ws .nav-ws-btn svg{color: var(--ink-2);}
.nav-ws .nav-ws-btn.on,
.nav-ws.open .nav-ws-btn{
  background: var(--line);border-color: var(--ink-2);color: var(--white);
  box-shadow: 0 2px 5px rgba(var(--shade2-rgb),.26), 0 8px 20px rgba(var(--shade2-rgb),.22);
}
.nav-ws .nav-ws-btn.on svg,
.nav-ws.open .nav-ws-btn svg{color: var(--white);}
.bell-wrap{position:relative;display:inline-flex;align-items:center;}
.bell{
  position:relative;width:40px;height:40px;flex:none;border-radius: 50%;
  border: 1px solid var(--line);background: var(--surface);color: var(--ink-2);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.bell svg{width:19px;height:19px;display:block;}
.bell:hover{border-color: var(--ink-3);color: var(--ink);background: var(--sky-3);}
.bell:active{transform:scale(.95);}
.bell:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: 2px;}
.bell-wrap.open .bell{border-color: var(--brand-ink);color: var(--brand-ink);background: rgba(var(--brand-ink2-rgb),.09);}
.bell-dot{
  position:absolute;right:-4px;top:-4px;min-width:16px;height:16px;padding:0 4px;
  box-sizing:content-box;border: 2px solid var(--white);border-radius: 999px;
  background: var(--danger);color: var(--white);
  font-family:inherit;font-size:10.5px;font-weight:700;line-height:16px;
  text-align:center;letter-spacing:0;
}
.bell-dot[hidden]{display:none;}
.bell-dot.pulse{animation:bellPulse 1.6s ease-out 2;}
.bell-panel{
  position:absolute;right:0;top:calc(100% + 12px);width:328px;z-index:76;
  background: var(--surface);border: 1px solid var(--line);
  border-radius: var(--r-md);box-shadow: 0 18px 46px rgba(var(--black-rgb),0.37);
  overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.25,1);
}
.bell-panel[hidden]{display:none;}
.bell-wrap.open .bell-panel{opacity:1;visibility:visible;transform:translateY(0);}
.bp-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top: 1px solid var(--line);}
.bp-more{
  padding:7px 13px;border-radius: 9px;border: 1px solid var(--line-strong);background: var(--surface);
  font-family:inherit;font-size:12.5px;font-weight:600;color: var(--ink-2);cursor:pointer;transition:all .2s ease;
}
.bp-more:hover{border-color: var(--ink-3);color: var(--ink);}
.bp-more--danger:hover{border-color: var(--danger-2);color: var(--danger-2);}
.bp-compose{padding:12px;border-top: 1px solid var(--line);}
.bp-compose[hidden]{display:none;}
.bp-c-inp,.bp-c-ta{
  width:100%;box-sizing:border-box;padding:9px 11px;border-radius: 9px;border: 1px solid var(--line-strong);
  font-family:inherit;font-size:13px;color: var(--ink);background: var(--surface);
}
.bp-c-ta{min-height:64px;margin-top:8px;resize:vertical;}
.bp-c-inp:focus,.bp-c-ta:focus{outline: none;border-color: var(--brand-ink);}
.bp-c-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;}
.bp-c-hint{font-size:11.5px;line-height:1.5;color: var(--ink-3);flex:1;min-width:0;}
.bp-c-hint.bad{color: var(--brand-ink-2);}
.bp-c-go{
  flex:none;padding:8px 15px;border-radius: 9px;border: none;background: var(--brand);color: var(--white);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
.bp-c-go:hover{background: var(--brand-deep);}
.bp-c-go[disabled]{opacity:.5;cursor:default;}
.bp-del{
  position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius: 6px;display:grid;place-items:center;
  font-size:14px;line-height:1;color: var(--ink-3);background: transparent;cursor:pointer;opacity:0;transition:all .2s ease;
}
.bp-item:hover .bp-del{opacity:1;}
.bp-del:hover{background: rgba(var(--brand-ink2-rgb),.14);color: var(--brand-ink-2);}
.bp-item{position:relative;}
.bp-out{
  display:inline-flex;padding:1px 6px;border-radius: 999px;margin-right:6px;
  font-size:10px;font-weight:700;background: rgba(var(--brand-mid-rgb),.14);color: var(--ink-4);
}
.bp-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 12px;border-bottom: 1px solid var(--line);
}
.bp-title{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.bp-num{color: var(--ink-3);font-weight:600;font-size:12px;}
.bp-read{
  border: none;background: transparent;font-family:inherit;font-size:12px;
  color: var(--brand-ink);cursor:pointer;padding:4px 6px;border-radius: 8px;
  transition:background .18s ease;
}
.bp-read:hover{background: rgba(var(--brand-ink2-rgb),.09);}
.bp-read[disabled]{color: var(--ink-3);cursor:default;background: transparent;}
.bp-list{max-height:340px;overflow-y:auto;}
.bp-item{
  display:flex;gap:11px;width:100%;padding:13px 16px;border: none;
  border-bottom: 1px solid var(--line);background: transparent;
  font-family:inherit;text-align:left;cursor:pointer;
  transition:background .18s ease;
}
.bp-item:last-child{border-bottom: none;}
.bp-item:hover{background: var(--sky-1);}
.bp-item:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: -2px;}
.bp-item.unread{background: rgba(var(--brand-ink2-rgb),.035);}
.bp-item.unread:hover{background: rgba(var(--brand-ink2-rgb),.07);}
.bp-ico{
  width:32px;height:32px;border-radius: 9px;flex:none;display:grid;place-items:center;
  background: var(--sky-3);color: var(--ink-2);
}
.bp-ico svg{width:16px;height:16px;}
.bp-ico.ok{background: rgba(var(--brand-mid-rgb),.12);color: var(--ink-4);}
.bp-ico.warn{background: rgba(var(--brand-ink2-rgb),.11);color: var(--brand-ink);}
.bp-ico.gift{background: rgba(var(--lime-rgb),.28);color: var(--cat-olive);}
.bp-body{min-width:0;flex:1;}
.bp-row{display:flex;align-items:baseline;gap:8px;}
.bp-t{font-size:13px;font-weight:600;color: var(--ink);flex:1;min-width:0;}
.bp-time{font-size:11px;color: var(--ink-3);flex:none;}
.bp-d{margin-top:4px;font-size:12.5px;line-height:1.55;color: var(--ink-3);}
.bp-unread-dot{
  width:7px;height:7px;border-radius: 50%;background: var(--danger);flex:none;margin-top:6px;
}
.bp-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:44px 20px 48px;text-align:center;
}
.bp-empty svg{width:34px;height:34px;color: var(--line-strong);}
.bp-empty p{margin:0;font-size:13px;color: var(--ink-3);line-height:1.6;}
.bp-empty b{display:block;font-size:13.5px;color: var(--ink-2);font-weight:600;margin-bottom:5px;}
.hx{display:inline-flex;align-items:center;gap:12px;}
.hx-item{position:relative;display:inline-flex;align-items:center;}
.hx-btn{
  position:relative;display:inline-flex;align-items:center;gap:4px;
  padding:6px 0;border: none;background: transparent;
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;
  color: var(--ink-2);white-space:nowrap;cursor:pointer;
  transition:color .2s ease;
}
.hx-btn .hx-t{position:relative;}
.hx-btn .hx-t::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background: var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.25,1);
}
.hx-btn:hover{color: var(--ink);}
.hx-btn:hover .hx-t::after{transform:scaleX(1);}
.hx-btn:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: 3px;border-radius: 4px;}
.hx-care{width:11px;height:11px;flex:none;transition:transform .25s ease;color: var(--ink-3);}
.hx-btn:hover .hx-care{color: var(--ink-2);}
.hx-item.open .hx-btn{color: var(--brand-ink);}
.hx-item.open .hx-btn .hx-t::after{transform:scaleX(1);}
.hx-item.open .hx-care{transform:rotate(180deg);color: var(--brand-ink);}
.hx-btn.is-done{color: var(--ink-3);}
.hx-dot{width:6px;height:6px;border-radius: 50%;background: var(--danger);flex:none;}
.hx-dot[hidden]{display:none;}
.hx-panel{
  position:absolute;right:0;top:calc(100% + 16px);width:306px;z-index:78;
  padding:18px;background: var(--surface);
  border: 1px solid var(--line);border-radius: var(--r-md);
  box-shadow: 0 18px 46px rgba(var(--black-rgb),0.37);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.25,1);
}
.hx-panel[hidden]{display:none;}
.hx-item.open .hx-panel{opacity:1;visibility:visible;transform:translateY(0);}
.hp-title{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.015em;}
.hp-sub{margin:0 0 15px;font-size:12.5px;line-height:1.62;color: var(--ink-3);text-wrap:pretty;}
.hp-hint{margin:11px 0 0;font-size:12px;line-height:1.6;color: var(--ink-3);text-wrap:pretty;}
.hp-hint.ok{color: var(--cat-green);}
.hp-rule{margin:10px 0 0;font-size:12px;line-height:1.6;}
.hp-rule a{color: var(--brand-ink-2);border-bottom: 1px solid rgba(var(--brand-ink2-rgb),.32);}
.hx-site{
  display:flex;align-items:center;gap:10px;
  margin:0 0 15px;padding:9px 11px;
  border: 1px solid var(--line);border-radius: 10px;background: var(--sky-1);
}
.hx-site-k{flex:none;font-size:12px;font-weight:600;color: var(--ink-3);}
.hx-site-v{
  display:inline-flex;align-items:center;gap:5px;min-width:0;
  font-size:12.5px;font-weight:600;color: var(--ink);
  transition:color .2s ease;
}
.hx-site-v span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-site-v:hover{color: var(--brand-ink);}
.hx-site-i{width:11px;height:11px;flex:none;color: var(--ink-3);transition:color .2s ease;}
.hx-site-v:hover .hx-site-i{color: var(--brand-ink);}
.hq-wrap{display:inline-flex;align-items:center;}
.hq{
  display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;
  border-radius: 999px;background: var(--line);color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--black-rgb),0.43), 0 6px 16px rgba(var(--black-rgb),0.29);
  transition:background .2s ease, transform .2s cubic-bezier(.2,.7,.25,1), box-shadow .2s ease;
}
.hq:hover{background: var(--sky-4);transform:translateY(-1px);box-shadow: 0 2px 4px rgba(var(--black-rgb),0.50), 0 10px 24px rgba(var(--black-rgb),0.43);}
.hq:active{transform:translateY(0);}
.hq:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: 2px;}
.hq-star{width:12px;height:12px;flex:none;}
.hq-num{font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.mobile-nav .m-quota{display:none;}
.mobile-nav .m-quota b{float:right;color: var(--brand-ink);font-weight:700;font-variant-numeric:tabular-nums;}
.hx-week{display:flex;gap:5px;margin-bottom:13px;}
.hx-day{
  flex:1 1 0;min-width:0;height:30px;border-radius: 8px;display:grid;place-items:center;
  border: 1px solid var(--line);background: var(--sky-3);
  font-size:11px;font-weight:700;color: var(--ink-3);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.hx-day.on{background: rgba(var(--brand-ink2-rgb),.10);border-color: rgba(var(--brand-ink2-rgb),.32);color: var(--brand-ink-2);}
.hx-day.today{box-shadow: 0 0 0 2px rgba(var(--brand-ink2-rgb),.24);}
.hx-stats{display:flex;gap:9px;margin-bottom:14px;}
.hx-stat{flex:1 1 0;min-width:0;padding:9px 11px;border: 1px solid var(--line);border-radius: 10px;background: var(--sky-1);}
.hx-stat b{display:block;font-size:18px;font-weight:700;line-height:1.25;color: var(--ink);font-variant-numeric:tabular-nums;}
.hx-stat span{display:block;margin-top:1px;font-size:11.5px;color: var(--ink-3);}
.hx-stat--acc{background: rgba(var(--brand-ink2-rgb),.07);border-color: rgba(var(--brand-ink2-rgb),.24);}
.hx-stat--acc b{color: var(--brand-ink-2);}
.hx-field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;}
.hx-label{font-size:12px;font-weight:600;color: var(--ink-2);}
.hx-input{
  width:100%;min-width:0;padding:9px 11px;
  border: 1px solid var(--line);border-radius: 9px;background: var(--surface-2);
  font-family:inherit;font-size:13.5px;color: var(--ink);
}
.hx-input:hover{border-color: var(--line-strong);}
.hx-input:focus-visible{outline: 2px solid var(--brand-ink);outline-offset: 1px;}
.hx-input[readonly]{background: var(--sky-1);font-size:12.5px;color: var(--ink-2);}
.hx-link{display:flex;gap:7px;}
.hx-go{
  width:100%;padding:10px 16px;border-radius: 10px;border: none;
  background: var(--brand);color: var(--white);font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;box-shadow: 0 1px 2px rgba(var(--brand-shadow-rgb),.26), 0 8px 18px rgba(var(--brand-ink2-rgb),.2);
  transition:background .2s ease, transform .2s cubic-bezier(.2,.7,.25,1), box-shadow .2s ease;
}
.hx-go:hover{background: var(--brand-deep);transform:translateY(-1px);}
.hx-go:active{transform:translateY(0);}
.hx-go[disabled]{opacity:.55;cursor:default;transform:none;box-shadow: none;}
.hx-copy{
  flex:none;padding:9px 14px;border-radius: 9px;border: 1px solid var(--line-strong);
  background: var(--surface);font-family:inherit;font-size:13.5px;font-weight:600;
  color: var(--ink);cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.hx-copy:hover{border-color: var(--ink-3);background: var(--sky-1);}
.hx-copy[disabled]{opacity:.5;cursor:default;}
html.is-auth .hd-actions .link-quiet{display:none;}
.mobile-nav .m-quick{display:none;}
.m-flag{
  margin-left:8px;padding:2px 7px;border-radius: 999px;
  background: rgba(var(--brand-ink2-rgb),.12);color: var(--brand-ink-2);
  font-size:11px;font-weight:700;
}
.m-flag[hidden]{display:none;}
.site-header .hd-inner{gap:26px;}
.nav{gap:18px;}
.hd-actions{gap:14px;}
.site-header .hd-actions .btn-primary{padding:12px 19px;}
[hidden]{display:none !important;}
.doc{padding:34px 0 92px;}
.doc-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color: var(--ink-3);}
.doc-crumb a{color: var(--ink-2);transition:color .2s;}
.doc-crumb a:hover{color: var(--brand-ink);}
.doc-crumb .dc-sep{color: var(--line-strong);}
.doc-crumb strong{color: var(--ink);font-weight:600;}
.doc-hero{margin-top:22px;padding-bottom:30px;border-bottom: 1px solid var(--line);}
.doc-hero h1{margin:0;font-size:var(--fs-page);line-height:1.16;font-weight:800;letter-spacing:-.032em;}
.doc-hero .sec-kicker{margin-bottom:12px;}
.doc-lead{margin:16px 0 0;max-width:730px;font-size:17px;line-height:1.75;color: var(--ink-2);text-wrap:pretty;}
.doc-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:13px;color: var(--ink-3);}
.dm-dot{width:4px;height:4px;border-radius: 50%;background: var(--line-strong);flex:none;}
.doc-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:56px;margin-top:38px;align-items:start;}
.doc-toc{position:sticky;top:98px;padding:18px 18px 14px;border: 1px solid var(--line);border-radius: var(--r-md);background: var(--surface);box-shadow: var(--shadow-sm);}
.dt-title{font-size:11.5px;font-weight:700;letter-spacing:.08em;color: var(--ink-3);margin-bottom:13px;}
.doc-toc ol{margin:0;padding:0;list-style:none;counter-reset:dt;}
.doc-toc li{counter-increment:dt;margin-bottom:9px;}
.doc-toc a{display:flex;gap:9px;font-size:13.8px;line-height:1.5;color: var(--ink-2);transition:color .2s;}
.doc-toc a::before{content:counter(dt,decimal-leading-zero);font-size:11px;font-weight:700;color: var(--line-strong);padding-top:2px;flex:none;}
.doc-toc a:hover{color: var(--brand-ink);}
.doc-toc a.on{color: var(--brand-ink);font-weight:600;}
.doc-toc a.on::before{color: var(--brand-ink);}
.doc-article{min-width:0;max-width:762px;}
.doc-article h2{margin:0 0 15px;font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.38;color: var(--ink);scroll-margin-top:104px;}
.doc-article h2:not(:first-child){margin-top:48px;padding-top:32px;border-top: 1px solid var(--line);}
.doc-article h3{margin:26px 0 10px;font-size:16.5px;font-weight:700;color: var(--ink);}
.doc-article p{margin:0 0 15px;font-size:15.5px;line-height:1.82;color: var(--ink-2);text-wrap:pretty;}
.doc-article ul,.doc-article ol{margin:0 0 17px;padding-left:22px;font-size:15.5px;line-height:1.82;color: var(--ink-2);}
.doc-article ul{list-style:disc;}
.doc-article ol{list-style:decimal;}
.doc-article li{margin-bottom:8px;}
.doc-article strong{color: var(--ink);font-weight:650;}
.doc-article a{color: var(--brand-ink-2);border-bottom: 1px solid rgba(var(--brand-ink2-rgb),.3);transition:border-color .2s;}
.doc-article a:hover{border-bottom-color: var(--brand-ink);}
.doc-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;background: rgba(var(--deep2-rgb),.055);color: var(--ink);padding:2px 6px;border-radius: 6px;}
.doc-callout{display:flex;gap:13px;padding:16px 18px;margin:0 0 19px;border-radius: var(--r-md);border: 1px solid var(--line);background: var(--surface-2);font-size:14.8px;line-height:1.78;color: var(--ink-2);}
.doc-callout .dc-ico{flex:none;width:19px;height:19px;margin-top:2px;color: var(--ink-3);}
.doc-callout b{color: var(--ink);}
.doc-callout.tip{border-color: rgba(var(--teal-rgb),.32);background: rgba(var(--teal-rgb),.065);}
.doc-callout.tip .dc-ico{color: var(--teal);}
.doc-callout.warn{border-color: rgba(var(--brand-ink2-rgb),.32);background: rgba(var(--brand-ink2-rgb),.055);}
.doc-callout.warn .dc-ico{color: var(--brand-ink);}
.doc-table{width:100%;border-collapse: collapse;margin:0 0 21px;font-size:14.6px;}
.doc-table th,.doc-table td{text-align:left;padding:12px 15px;border-bottom: 1px solid var(--line);vertical-align:top;line-height:1.7;}
.doc-table th{font-size:12px;font-weight:700;letter-spacing:.05em;color: var(--ink-3);white-space:nowrap;}
.doc-table td{color: var(--ink-2);}
.doc-table td:first-child{color: var(--ink);font-weight:600;}
.doc-table tr:last-child td{border-bottom: none;}
.doc-table-wrap{overflow-x:auto;margin:0 0 21px;border: 1px solid var(--line);border-radius: var(--r-md);background: var(--surface);}
.doc-table-wrap .doc-table{margin:0;}
.doc-table-wrap .doc-table th,.doc-table-wrap .doc-table td{padding:13px 16px;}
.doc-table-wrap .doc-table th{background: var(--surface-2);border-bottom: 1px solid var(--line);}
.doc-steps{margin:0 0 21px;padding:0;list-style:none;counter-reset:ds;}
.doc-steps li{counter-increment:ds;position:relative;padding:0 0 20px 46px;font-size:15.5px;line-height:1.8;color: var(--ink-2);}
.doc-steps li::before{content:counter(ds);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius: 50%;background: var(--line);color: var(--ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.doc-steps li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:31px;bottom:3px;width:1px;background: var(--line);}
.doc-steps li b{color: var(--ink);}
.doc-rel{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px;}
.doc-rel a{font-size:13.8px;padding:9px 16px;border: 1px solid var(--line);border-radius: 999px;background: var(--surface);color: var(--ink-2);box-shadow: var(--shadow-sm);transition:all .2s ease;}
.doc-rel a:hover{border-color: var(--line-strong);color: var(--ink);transform:translateY(-1px);box-shadow: var(--shadow-md);}
.doc-article details{border: 1px solid var(--line);border-radius: var(--r-md);background: var(--surface);padding:0 18px;margin-bottom:12px;}
.doc-article details[open]{box-shadow: var(--shadow-sm);}
.doc-article summary{list-style:none;cursor:pointer;padding:16px 0;font-size:15.5px;font-weight:600;color: var(--ink);display:flex;align-items:center;gap:12px;}
.doc-article summary::-webkit-details-marker{display:none;}
.doc-article summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right: 2px solid var(--ink-3);border-bottom: 2px solid var(--ink-3);transform:rotate(45deg);transition:transform .25s ease;flex:none;margin-top:-4px;}
.doc-article details[open] summary::after{transform:rotate(-135deg);margin-top:4px;}
.doc-article details p{padding-bottom:16px;margin:0;}
.doc-article details p + p{padding-top:0;}
.doc-article details ul{padding-bottom:4px;}
.doc-code{background: var(--dark);border-radius: var(--r-md);padding:18px 20px;overflow-x:auto;margin:0 0 21px;}
.doc-code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.78;color: rgba(var(--w-rgb),.13);white-space:pre;}
.doc-code .c{color: var(--ink-3);}
.doc-code .k{color: var(--brand-ink-2);}
.doc-code .s{color: var(--cat-lime);}
.clog{margin:0;padding:0;list-style:none;}
.clog li{position:relative;padding:0 0 30px 26px;border-left: 1px solid var(--line);}
.clog li:last-child{border-left-color: transparent;padding-bottom:0;}
.clog li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius: 50%;background: var(--brand);box-shadow: 0 0 0 4px rgba(var(--brand-ink2-rgb),.12);}
.clog .cv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.clog .cv b{font-size:15.8px;color: var(--ink);}
.clog .cv time{font-size:12.5px;color: var(--ink-3);}
.clog ul{margin:7px 0 0;padding-left:0;list-style:none;}
.clog ul li{border-left: none;padding:0 0 8px 16px;}
.clog ul li:last-child{padding-bottom:0;}
.clog ul li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius: 50%;background: var(--line-strong);box-shadow: none;}
.clog ul li:not(:last-child)::after{content:none;}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius: 999px;letter-spacing:.02em;flex:none;}
.tag.new{background: rgba(var(--teal-rgb),.13);color: var(--teal-deep);}
.tag.improve{background: rgba(52,120,246,.12);color: #2A63C9;}
.tag.fix{background: rgba(var(--brand-ink2-rgb),.12);color: var(--brand-ink-2);}
.tag.wip{background: rgba(var(--gold-deep-rgb),.15);color: var(--gold-ink);}
.tag.plan{background: rgba(var(--slate-rgb),.16);color: #5A6E80;}
.st{display:inline-flex;align-items:center;gap:9px;font-weight:600;color: var(--ink);}
.st::before{content:"";width:8px;height:8px;border-radius: 50%;flex:none;background: #1FA97F;box-shadow: 0 0 0 3px rgba(var(--green-rgb),.17);}
.st.warn::before{background: var(--gold-deep);box-shadow: 0 0 0 3px rgba(var(--gold-deep-rgb),.18);}
.st.down::before{background: var(--brand);box-shadow: 0 0 0 3px rgba(var(--brand-ink2-rgb),.17);}
.doc-note{margin-top:52px;padding:20px 22px;border: 1px dashed var(--line-strong);border-radius: var(--r-md);font-size:14.5px;line-height:1.75;color: var(--ink-2);background: var(--surface);}
.doc-note b{color: var(--ink);}
.doc-pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:60px;padding-top:28px;border-top: 1px solid var(--line);}
.doc-pager a{flex:1 1 250px;min-width:0;padding:16px 20px;border: 1px solid var(--line);border-radius: var(--r-md);background: var(--surface);box-shadow: var(--shadow-sm);transition:all .22s cubic-bezier(.2,.7,.25,1);}
.doc-pager a:hover{transform:translateY(-2px);border-color: var(--line-strong);box-shadow: var(--shadow-md);}
.doc-pager .dp-dir{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color: var(--ink-3);margin-bottom:6px;}
.doc-pager .dp-t{display:block;font-size:15.5px;font-weight:650;color: var(--ink);}
.doc-pager .next{text-align:right;}
.doc-pager .dp-spacer{flex:1 1 250px;}


/* ---- 统一页头区（2026-09-23 蓝白主题：浅青卡形态）---- */
.doc-hero{position:relative;
  background:radial-gradient(120% 140% at 12% 0%, rgba(0,183,199,.14) 0%, rgba(0,183,199,0) 62%),
             linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(228,248,250,.62) 100%);
  border:1px solid rgba(10,58,70,.10);border-radius:var(--r-lg);
  padding:30px 34px 26px;}