/* ─────────────────────────────────────────────────────────────────────────
   browsa 官网 · Material for MkDocs 风格
   对标 agentclientprotocol.github.io/python-sdk（mkdocs-material，
   primary=white + accent=deep-orange + default/slate 双主题 + Roboto 系）。
   仍是零依赖静态站：这里用同一套视觉令牌手工复刻该主题的骨架 ——
   白顶栏、左栏导航、右侧页内目录、文档式排版、页脚归属行。
   中文与英文共享；语言差异走 html[lang]。双层叠加：<link site.css>，
   指南页再加 <link docs.css>（三栏布局层）。
   ───────────────────────────────────────────────────────────────────────── */

/* ─── 品牌字标字体 ──────────────────────────────────────────────────────────
   Space Grotesk（几何无衬线，OFL，随站打包）：字标专用。替代原 mono 字标——
   保留全小写 + 疏排处理，但读作「产品」而非「终端」。代码/时间戳等 accent
   场景仍用 --mono（终端口音保留在 accent 层，不再承担品牌）。
   相对路径以本文件为准 → docs/fonts/SpaceGrotesk.ttf，官网与 store mockup 共用。 */
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/SpaceGrotesk.ttf') format('truetype');
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ─── 主题令牌 ───────────────────────────────────────────────────────────── */
:root{
  /* 复刻 mkdocs-material 默认色板：白 primary + deep-orange accent */
  --md-fg:            rgba(0,0,0,.87);
  --md-fg-light:      #0000008a;
  --md-fg-lighter:    #00000052;
  --md-fg-lightest:   #0000000f;
  --md-bg:            #fff;
  --md-bg-alt:        #f5f5f5;          /* --md-code-bg-color（light） */
  --md-code-fg:       #37383c;
  --md-primary-fg:    #4051b5;          /* 主题原生 primary（CTA 用） */
  --md-primary-fg-hover:#3c4aa5;
  --md-link:          #5e8bde;          /* 白 primary 下的 --md-typeset-a-color */
  --md-link-hover:    #4a76d4;
  --md-accent:        #ff6e42;          /* deep-orange accent */
  --md-accent-trans:  #ff6e421a;
  --md-hairline:      rgba(0,0,0,.12);
  --md-header-bg:     #fff;
  --md-header-fg:     rgba(0,0,0,.87);
  --md-footer-bg:     #f5f5f7;
  --md-footer-fg:     rgba(0,0,0,.62);
  --md-shadow:        0 2px 5px 0 rgba(0,0,0,.07),0 2px 10px 0 rgba(0,0,0,.05);
  --md-shadow-lg:     0 4px 10px 0 rgba(0,0,0,.1),0 8px 32px 0 rgba(0,0,0,.09);
  --md-default:       .12rem;           /* Material 圆角习惯（≈2px） */
  --radius:           6px;              /* 卡片圆角（Material grid-cards 档） */
  --header-h:         3.6rem;
  --mono: "Roboto Mono","SF Mono","Cascadia Code",ui-monospace,Consolas,monospace;
  --sans: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",
          "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* 产品 mockup 专用墨色（两种站点主题下保持不变 —— mockup 是「截图」） */
  --night:#0d0f14; --night-2:#14171f; --night-3:#1b1f29; --night-line:#262b38;
  --night-fg:#eef0ee; --night-dim:#9aa0ab;
  --mark-lit:#e0542c; --gold-lit:#d4a72c;

  /* 旧令牌别名：privacy 等页的内联样式与旧 class 依赖它们；
     每个 scheme 里重映射，深色下自动跟随。 */
  --ink:var(--md-fg); --ink-2:var(--md-fg-light); --ink-dim:var(--md-fg-light);
  --paper:var(--md-bg); --paper-2:var(--md-bg); --paper-3:var(--md-bg-alt);
  --line:var(--md-hairline); --line-2:rgba(0,0,0,.08);
  --mark:var(--md-accent); --mark-deep:#e3511c;
  --gold:#b28704; --gold-ink:#8a6803;
  --shadow:var(--md-shadow); --shadow-lg:var(--md-shadow-lg);
}
html[data-md-color-scheme="slate"]{
  --md-fg:            hsla(225,15%,90%,.87);
  --md-fg-light:      hsla(225,15%,90%,.56);
  --md-fg-lighter:    hsla(225,15%,90%,.32);
  --md-fg-lightest:   hsla(225,15%,90%,.07);
  --md-bg:            hsl(225,15%,14%);
  --md-bg-alt:        hsl(225,15%,18%);
  --md-code-fg:       hsla(225,18%,86%,.82);
  --md-primary-fg:    #5488e8;
  --md-primary-fg-hover:#6b97ea;
  --md-link:          #5e8bde;
  --md-link-hover:    #7ba2e6;
  --md-accent:        #ff6e42;
  --md-accent-trans:  #ff6e4226;
  --md-hairline:      hsla(225,15%,90%,.14);
  --md-header-bg:     hsl(225,15%,11%);
  --md-header-fg:     hsla(225,15%,90%,.87);
  --md-footer-bg:     hsl(225,15%,11%);
  --md-footer-fg:     hsla(225,15%,90%,.56);
  --line-2:           hsla(225,15%,90%,.1);
  --mark-deep:#ff8a63; --gold:#d4a72c; --gold-ink:#d4a72c;
}
html[data-md-color-scheme="slate"] .window,
html[data-md-color-scheme="slate"] .prov-board{ background:#fff; }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--sans);
  background:var(--md-bg);
  color:var(--md-fg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
::selection{background:var(--md-accent-trans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--md-accent);outline-offset:2px;border-radius:2px}
.skip-link{
  position:absolute;left:-999px;top:0;z-index:300;
  background:var(--md-primary-fg);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;color:#fff}

.container{max-width:61rem;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}

.landing{
  --md-fg:#20242d;
  --md-fg-light:#626a78;
  --md-bg:#fafbfc;
  --md-bg-alt:#f0f3f7;
  --md-accent:#c2410c;
  --md-accent-trans:#c2410c0d;
  --md-hairline:#dfe4eb;
  --md-link:#4051b5;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
}
html[data-md-color-scheme="slate"] .landing{
  --md-fg:#eef0f5;
  --md-fg-light:#a9b2c2;
  --md-bg:#151923;
  --md-bg-alt:#1c2230;
  --md-accent:#ff9874;
  --md-accent-trans:#ff987411;
  --md-hairline:#313b4e;
  --md-link:#a3b7ff;
  --md-primary-fg:#4051b5;
  --md-primary-fg-hover:#35449e;
}
.landing .container{max-width:1280px;padding-inline:32px}
.landing .md-header{border-bottom:1px solid var(--md-hairline)}
.landing .md-header__inner{max-width:1280px;padding-inline:32px}
.landing .md-header__topic .t{font-family:'Space Grotesk',var(--sans)}
.landing #how,.landing #keys{background:var(--md-bg-alt);border-block:1px solid var(--md-hairline)}
.landing .feature{background:var(--md-bg);padding:24px}
.landing .feature .f-tag::before{content:none}
.landing .feature h3{font-size:19px;margin-block:8px}
.landing .feature p,.landing .feature li{font-size:14px}
.landing .feature-grid{gap:20px}
.landing .feature:hover{box-shadow:none}
.landing .md-footer{margin-top:0}
html[data-md-color-scheme="slate"] .landing .prov-board{background:var(--md-bg)}
.landing .prov-board::before{content:attr(data-label);letter-spacing:.04em}
.landing .prov-board{min-width:0}
.landing .pa-bridge{background:var(--md-primary-fg)}
.landing .how .no{color:var(--md-link)}

/* ─── 顶栏：白底细影（Material md-header，primary=white） ────────────────── */
.md-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:var(--md-header-bg);color:var(--md-header-fg);
  transition:box-shadow .25s ease,background .25s ease;
}
.md-header.md-header--shadow{box-shadow:0 0 .2rem rgba(0,0,0,.1),0 0 .4rem rgba(0,0,0,.1)}
.md-header__inner{
  max-width:76rem;margin:0 auto;padding:0 16px;height:100%;
  display:flex;align-items:center;gap:16px;
}
.md-header__brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
  color:var(--md-header-fg);
}
.md-header__brand img{width:26px;height:26px;border-radius:6px}
.md-header__topic{
  display:flex;align-items:baseline;gap:10px;min-width:0;
}
.md-header__topic .t{
  font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.02em;
}
.md-header__topic .sub{
  font-size:12.5px;color:var(--md-fg-light);white-space:nowrap;
}
.md-header__links{
  display:flex;align-items:center;gap:22px;margin-left:22px;
}
.md-header__links a{
  font-size:13.5px;color:var(--md-fg-light);text-decoration:none;
  transition:color .15s ease;
}
.md-header__links a:hover{color:var(--md-link)}
.md-header__spacer{flex:1}
.md-header__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.md-header__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;
  color:var(--md-header-fg);opacity:.76;text-decoration:none;cursor:pointer;
  background:none;border:none;transition:opacity .15s ease,background .15s ease;
}
.md-header__icon:hover{opacity:1;background:var(--md-fg-lightest)}
.md-header__icon svg{width:19px;height:19px;fill:currentColor}
.md-header__lang{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--md-header-fg);text-decoration:none;
  border:1px solid var(--md-hairline);border-radius:6px;padding:3px 10px;
  transition:border-color .15s ease,color .15s ease;
}
.md-header__lang:hover{border-color:var(--md-link);color:var(--md-link)}
/* 主题切换：两种图标随 scheme 显隐 */
.md-header__icon .i-sun{display:none}
.md-header__icon .i-moon{display:block}
html[data-md-color-scheme="slate"] .md-header__icon .i-sun{display:block}
html[data-md-color-scheme="slate"] .md-header__icon .i-moon{display:none}

/* ─── Footer（Material md-footer-meta） ─────────────────────────────────── */
.md-footer{
  margin-top:88px;border-top:1px solid var(--md-hairline);
  background:var(--md-footer-bg);color:var(--md-footer-fg);
  transition:background .25s ease;
}
.md-footer__inner{
  max-width:76rem;margin:0 auto;padding:22px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.md-footer__copy{font-size:13px;line-height:1.8}
.md-footer__copy .brandline{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.md-footer__copy .brandline img{width:18px;height:18px;border-radius:4px}
.md-footer__copy .brandline .wordmark{
  font-family:'Space Grotesk',var(--mono);font-size:13px;font-weight:700;color:var(--md-fg);
}
.md-footer__copy a{color:var(--md-link);text-decoration:none}
.md-footer__copy a:hover{color:var(--md-link-hover);text-decoration:underline;text-underline-offset:2px}
.md-footer__links{display:flex;gap:20px;flex-wrap:wrap}
.md-footer__links a{
  font-size:13px;color:var(--md-footer-fg);text-decoration:none;
  transition:color .15s ease;
}
.md-footer__links a:hover{color:var(--md-link)}
.md-footer__meta{width:100%;font-size:12.5px;border-top:1px solid var(--md-hairline);padding-top:14px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ─── Hero（Material 化：去装帧，留内容） ───────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  color:var(--md-fg-light);text-transform:uppercase;
}
.hero{padding:64px 0 72px;text-align:left}
.hero > .container{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:48px;align-items:center}
.hero-copy{min-width:0}
.hero .eyebrow{margin-bottom:24px;display:inline-block;font-size:11px;letter-spacing:.06em}
.hero h1{
  font-size:clamp(38px,4.2vw,58px);font-weight:700;letter-spacing:-.045em;
  line-height:1.2;margin-bottom:24px;
}
.hero h1 .mark{display:block;color:var(--md-accent)}
html[lang="en"] .hero h1{font-family:'Space Grotesk',var(--sans);font-size:clamp(36px,3.5vw,49px)}
.hero .lead{
  max-width:480px;margin:0 0 28px;
  font-size:16px;color:var(--md-fg-light);line-height:1.85;
}
.hero .lead strong{color:var(--md-fg);font-weight:600}
.cta-group{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 24px;border-radius:6px;
  font-size:14.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--md-primary-fg);color:#fff;box-shadow:var(--md-shadow)}
.btn-primary:hover{background:var(--md-primary-fg-hover);box-shadow:var(--md-shadow-lg)}
.btn-primary .kbd{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:1px 6px;border-radius:4px;
}
.btn-secondary{background:var(--md-bg);color:var(--md-fg);border-color:var(--md-hairline)}
.btn-secondary:hover{border-color:var(--md-link);color:var(--md-link)}
.hero-meta{margin-top:24px;padding-top:20px;border-top:1px solid var(--md-hairline);display:flex;gap:10px 16px;flex-wrap:wrap}
.chip{
  font-size:12px;color:var(--md-fg-light);white-space:nowrap;text-decoration:none;
}
.chip b{color:var(--md-fg);font-weight:600}
a.chip:hover{color:var(--md-link);text-decoration:underline;text-underline-offset:4px}
.hero-note{
  margin:16px 0 0;color:var(--md-fg-light);font-size:12px;line-height:1.85;
}
.hero-note a{color:var(--md-link);text-underline-offset:3px}

/* ─── 场景切换器 ───────────────────────────────────────────────────────── */
.scenarios{min-width:0}
.scn-tabs{margin:0 0 16px;display:flex;gap:8px;flex-wrap:wrap}
.scn-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:6px;
  border:1px solid var(--md-hairline);background:var(--md-bg);
  font-size:13.5px;font-weight:500;color:var(--md-fg-light);cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease;user-select:none;
}
.scn-tab:hover{border-color:var(--md-link);color:var(--md-link)}
.scn-tab:has(input:checked){
  border-color:var(--md-accent);color:var(--md-accent);
  background:var(--md-accent-trans);font-weight:600;
}
.scn-tab input{position:absolute;opacity:0;pointer-events:none}
.scn-tab:has(input:focus-visible){outline:2px solid var(--md-accent);outline-offset:2px}
.scn-tab .dot{width:6px;height:6px;border-radius:50%;background:var(--md-hairline);transition:background .15s ease}
.scn-tab:has(input:checked) .dot{background:var(--md-accent)}

.scenarios .window{display:none}
.scenarios:has(#scn-article:checked) .w-article,
.scenarios:has(#scn-video:checked) .w-video,
.scenarios:has(#scn-pdf:checked) .w-pdf{display:block}

/* ─── 浏览器 mockup（产品截图式插图，双主题下保持纸面） ──────────────────── */
.window{
  margin:0 auto;max-width:980px;text-align:left;
  background:#fff;border:1px solid var(--md-hairline);border-radius:8px;
  box-shadow:0 16px 48px -16px #17233c3d;
  overflow:hidden;color:rgba(0,0,0,.87);
}
.win-bar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;border-bottom:1px solid rgba(0,0,0,.07);background:#f5f5f5;
}
.win-dots{display:flex;gap:7px;flex-shrink:0}
.win-dots i{width:11px;height:11px;border-radius:50%;display:block}
.win-dots i:nth-child(1){background:#f6b1a8}
.win-dots i:nth-child(2){background:#f0d28a}
.win-dots i:nth-child(3){background:#a8d5a2}
.win-url{
  flex:1;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:8px;padding:5px 12px;
  font-family:var(--mono);font-size:11.5px;color:#5f6368;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.win-url .lock{opacity:.7}
.win-url .host{color:#202124;font-weight:600}
.win-body{display:flex;align-items:stretch}
.win-caption{
  text-align:left;font-size:11.5px;color:#5f6368;
  margin:0;padding:12px 16px;border-top:1px solid #e1e5eb;background:#fff;line-height:1.7;
}
.win-caption code{
  font-family:var(--mono);font-size:11px;color:#37383c;
  background:#f0f3f7;padding:1px 5px;border-radius:4px;
}
.scenario-note{margin-top:12px;color:var(--md-fg-light);font-size:11px;line-height:1.6}
.landing .bili-side,.landing .yt-side{display:none}
.landing .art-nav,.landing .bili-nav,.landing .yt-nav{gap:8px}
.landing .art-nav a,.landing .bili-nav a,.landing .yt-nav a{display:none}
.landing .pg-article,.landing .pg-video,.landing .pg-pdf{min-height:450px}
.landing .art-title{font-size:18px;line-height:1.6}

/* ─── 左侧：视频页（B 站） ──────────────────────────────────────────────── */
.pg-video{flex:1;min-width:0;background:#fff;display:flex;flex-direction:column;min-height:468px}
.bili-nav,.yt-nav{
  display:flex;align-items:center;gap:14px;padding:9px 16px;
  border-bottom:1px solid #f0f1f2;flex-shrink:0;
}
.bili-logo{font-weight:700;font-size:17px;color:#fb7299;letter-spacing:-.02em}
.yt-logo{font-weight:700;font-size:16px;color:#0f0f0f;letter-spacing:-.01em}
.yt-logo i{font-style:normal;background:#ff0000;color:#fff;border-radius:3px;padding:0 3px;margin-right:4px}
.bili-nav a,.yt-nav a{font-size:12px;color:#757575;text-decoration:none}
.bili-search,.yt-search{
  flex:1;max-width:240px;margin-left:auto;background:#f1f2f3;border-radius:6px;
  padding:4px 10px;font-size:11px;color:#b0b0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.yt-nav .yt-avatar{width:22px;height:22px;border-radius:50%;background:#1a73e8;flex-shrink:0}
.bili-main,.yt-main{padding:16px;display:flex;gap:16px;align-items:flex-start}
.bili-col,.yt-col{flex:1;min-width:0}
.bili-player,.yt-player{
  position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#15181c,#0d0f14);
}
.bili-player .play,.yt-player .play{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
}
.bili-player .play::after,.yt-player .play::after{
  content:"";border-left:16px solid #fff;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:5px;
}
.bili-player .timeline,.yt-player .timeline{position:absolute;left:0;right:0;bottom:0;padding:0 12px 10px}
.bili-player .timeline .track,.yt-player .timeline .track{height:3px;background:rgba(255,255,255,.25);border-radius:2px;position:relative}
.bili-player .timeline .track .fill,.yt-player .timeline .track .fill{position:absolute;left:0;top:0;bottom:0;width:34%;border-radius:2px}
.bili-player .timeline .track .fill{background:#fb7299}
.yt-player .timeline .track .fill{background:#ff0000}
.bili-player .badge,.yt-player .badge{
  position:absolute;top:10px;right:10px;background:rgba(0,0,0,.62);color:#fff;
  font-size:9.5px;padding:2px 7px;border-radius:4px;font-family:var(--mono);
}
.bili-title,.yt-title{margin-top:12px;font-size:14.5px;font-weight:600;color:#18191c;line-height:1.5}
.bili-meta,.yt-meta{margin-top:7px;font-size:11.5px;color:#9499a0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bili-avatar,.yt-avatar2{width:22px;height:22px;border-radius:50%;background:#fb7299;flex-shrink:0}
.yt-avatar2{background:#1a73e8}
.yt-sub{background:#0f0f0f;color:#fff;font-size:10.5px;font-weight:600;padding:3px 11px;border-radius:999px}
.bili-desc,.yt-desc{
  margin-top:12px;font-size:11.5px;color:#61666d;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bili-side,.yt-side{width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.bili-thumb,.yt-thumb{border-radius:6px;overflow:hidden;background:#f1f2f3;aspect-ratio:16/9;position:relative}
.bili-thumb:nth-child(1){background:linear-gradient(135deg,#2a3a5a,#15181c)}
.bili-thumb:nth-child(2){background:linear-gradient(135deg,#3a5a3a,#15181c)}
.bili-thumb:nth-child(3){background:linear-gradient(135deg,#5a3a4a,#15181c)}
.yt-thumb:nth-child(1){background:linear-gradient(135deg,#5a3a3a,#15181c)}
.yt-thumb:nth-child(2){background:linear-gradient(135deg,#3a4a5a,#15181c)}
.yt-thumb:nth-child(3){background:linear-gradient(135deg,#3a4a3a,#15181c)}
.bili-thumb .t,.yt-thumb .t{position:absolute;left:6px;right:6px;bottom:4px;font-size:9px;color:#fff;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bili-thumb .v,.yt-thumb .v{position:absolute;top:4px;right:5px;font-size:8.5px;color:#fff;background:rgba(0,0,0,.5);
  padding:1px 4px;border-radius:3px;font-family:var(--mono)}
.bili-caption,.yt-caption{font-size:9.5px;color:#c0c4cc;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ─── 左侧：文章页（掘金） ──────────────────────────────────────────────── */
.pg-article{flex:1;min-width:0;background:#fff;display:flex;flex-direction:column;min-height:468px}
.art-nav{
  display:flex;align-items:center;gap:14px;padding:9px 16px;
  border-bottom:1px solid #f0f1f2;flex-shrink:0;
}
.art-logo{font-weight:700;font-size:16px;color:#1e80ff;letter-spacing:-.01em}
.art-nav a{font-size:12px;color:#757575;text-decoration:none}
.art-search{
  flex:1;max-width:200px;margin-left:auto;background:#f1f2f3;border-radius:6px;
  padding:4px 10px;font-size:11px;color:#b0b0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.art-main{padding:22px 26px;max-width:560px}
.art-tag{
  display:inline-block;font-size:10px;font-weight:600;color:#1e80ff;
  background:rgba(30,128,255,.08);border-radius:4px;padding:2px 8px;margin-bottom:10px;
}
.art-title{font-size:17px;font-weight:700;color:#18191c;line-height:1.45}
.art-meta{margin-top:8px;font-size:11px;color:#9499a0;display:flex;align-items:center;gap:8px}
.art-avatar{width:18px;height:18px;border-radius:50%;background:#1e80ff;flex-shrink:0}
.art-p{margin-top:12px;font-size:11.5px;color:#4e5969;line-height:1.85;text-align:left}
.art-code{
  margin-top:12px;background:#f6f8fa;border:1px solid #eef1f4;border-radius:6px;
  padding:12px;display:flex;flex-direction:column;gap:6px;
}
.art-code .ac-line{height:7px;border-radius:3px;background:#dfe4ea}
.art-code .ac-line.short{width:55%}
.art-code .ac-line.mid{width:78%}
.art-code .ac-line.hl{background:#c7d7ff}

/* ─── 左侧：PDF 查看页 ─────────────────────────────────────────────────── */
.pg-pdf{flex:1;min-width:0;background:#e8e9eb;display:flex;flex-direction:column;min-height:468px}
.pdf-bar{
  display:flex;align-items:center;gap:12px;padding:8px 16px;
  background:#fafafa;border-bottom:1px solid #e2e2e4;flex-shrink:0;
  font-family:var(--mono);font-size:10.5px;color:#6b6f76;
}
.pdf-bar .pdf-name{color:#333;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-bar .pdf-page{margin-left:auto}
.pdf-paper{
  margin:18px auto;background:#fff;width:min(420px,78%);
  border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.12);
  padding:24px 26px;flex:1;
}
.pdf-title{font-size:15px;font-weight:700;color:#1a1a1a;line-height:1.4}
.pdf-meta{margin-top:6px;font-size:9.5px;color:#8a8a8a}
.pdf-abstract{
  margin-top:12px;font-size:10px;color:#3a3a3a;line-height:1.7;
  background:#f7f8fa;border-left:2px solid #d0d4da;padding:8px 10px;border-radius:0 4px 4px 0;
}
.pdf-p{margin-top:10px;font-size:10px;color:#555;line-height:1.7}
.pdf-figure{margin-top:12px;background:#f4f5f7;border-radius:6px;padding:12px;text-align:center}
.fig-bars{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:44px}
.fig-bars i{width:12px;border-radius:2px 2px 0 0;background:#c9d3e0}
.fig-bars i:nth-child(1){height:40%;background:#f0a58c}
.fig-bars i:nth-child(2){height:62%;background:#e2b68a}
.fig-bars i:nth-child(3){height:48%;background:#c9d3e0}
.fig-bars i:nth-child(4){height:78%;background:#b6c7dc}
.fig-bars i:nth-child(5){height:58%;background:#c9d3e0}
.fig-bars i:nth-child(6){height:70%;background:#aebfd6}
.fig-cap{margin-top:8px;font-size:9px;color:#6b6f76;font-style:italic}

/* ─── 右侧：browsa 侧边栏 mockup（产品墨色，固定不变） ───────────────────── */
.panel{
  width:300px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--night);color:var(--night-fg);border-left:1px solid var(--night-line);
  font-size:12.5px;line-height:1.65;position:relative;
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 40% at 50% 0%,rgba(224,84,44,.06),transparent 60%);
}
.p-topbar{
  display:flex;align-items:center;gap:8px;padding:10px 12px 9px;
  background:var(--night);border-bottom:1px solid var(--night-3);
  position:relative;z-index:1;
}
.p-status{width:6px;height:6px;border-radius:50%;background:var(--mark-lit);flex-shrink:0;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.p-wordmark{
  font-family:'Space Grotesk',var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  color:var(--mark-lit);flex-shrink:0;
}
.p-provider{
  flex:1;min-width:0;font-size:10.5px;color:#c7cbd1;background:var(--night-2);
  border:1px solid var(--night-3);border-radius:6px;padding:4px 8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.p-provider .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4ade80;margin-right:5px;vertical-align:1px}
.p-ico{width:16px;height:16px;border-radius:4px;background:var(--night-3);flex-shrink:0}
.p-msgs{flex:1;padding:12px 10px 6px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.p-sys{
  align-self:center;font-size:10.5px;color:var(--night-dim);text-align:center;max-width:95%;
  background:var(--night-2);border:1px solid var(--night-3);border-radius:8px;padding:4px 10px;
}
.p-user{
  align-self:flex-end;text-align:left;color:#c7cbd1;font-size:12px;line-height:1.6;
  max-width:88%;padding:6px 11px;
  background:color-mix(in srgb,var(--mark-lit) 6%,var(--night-2));
  border:1px solid rgba(224,84,44,.22);
  border-radius:14px 14px 4px 14px;
}
.p-user .cmd{font-family:var(--mono);font-size:11.5px;color:var(--mark-lit)}
.p-assist{
  align-self:flex-start;
  border-left:2px solid rgba(224,84,44,.3);
  padding:2px 2px 2px 12px;max-width:96%;
}
.p-tool{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--gold-lit);
  border-left:2px solid var(--gold-lit);border-radius:0 6px 6px 0;
  background:rgba(27,31,41,.6);padding:3px 9px;
}
.p-tool .spin{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(212,167,44,.3);border-top-color:var(--gold-lit);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-body{margin-top:8px}
.p-body .p-h{font-size:12px;font-weight:600;color:var(--night-fg);margin-bottom:4px}
.p-body p{font-size:11.5px;color:#c7cbd1;margin:5px 0;line-height:1.6}
.p-ts{
  display:inline-block;padding:0 .3em;margin:0 .08em;border-radius:5px;
  color:var(--gold-lit);background:rgba(212,167,44,.12);font-size:.92em;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.p-cursor{display:inline-block;width:6px;height:12px;background:var(--mark-lit);vertical-align:-1px;margin-left:2px}
.p-composer{
  margin:8px 10px 10px;padding:7px 7px 7px 12px;border-radius:14px;
  background:var(--night-2);border:1px solid var(--night-line);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:8px;position:relative;z-index:1;
}
.p-attach{width:16px;height:16px;border-radius:4px;border:1px solid #343a4a;flex-shrink:0}
.p-input{flex:1;font-size:11px;color:var(--night-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-send{width:24px;height:24px;border-radius:50%;background:var(--mark-lit);flex-shrink:0;box-shadow:0 2px 8px rgba(224,84,44,.35)}

/* ─── 落地页小节（Material 化） ─────────────────────────────────────────── */
main section{padding:64px 0;position:relative}
.section-head{max-width:640px;margin-bottom:36px}
.section-head .eyebrow{display:block;margin-bottom:8px}
.section-head h2{
  font-size:clamp(24px,3.2vw,30px);font-weight:700;letter-spacing:-.01em;
  line-height:1.25;margin-top:0;
}
.section-head p{margin-top:12px;color:var(--md-fg-light);font-size:15.5px;line-height:1.75}
.section-head h2 em{font-style:normal;color:var(--md-accent)}

/* 怎么用 · 三步 */
.how-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how{
  background:var(--md-bg);border:1px solid var(--md-hairline);border-radius:var(--radius);
  padding:24px;transition:box-shadow .2s ease,border-color .15s ease;
}
.how:hover{border-color:var(--md-fg-lighter);box-shadow:var(--md-shadow)}
.how .no{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--md-primary-fg);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb,var(--md-primary-fg) 9%,transparent);margin-bottom:14px;
}
.how h3{font-size:15.5px;font-weight:600;margin-bottom:6px}
.how p{font-size:13.5px;color:var(--md-fg-light);line-height:1.75}
.how .tag{
  font-family:var(--mono);font-size:11px;color:var(--gold-ink);
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  padding:2px 7px;border-radius:4px;margin-left:8px;font-weight:500;vertical-align:2px;
}

/* 功能 */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feature{
  background:var(--md-bg);border:1px solid var(--md-hairline);border-radius:var(--radius);
  padding:22px 24px;transition:box-shadow .2s ease,border-color .15s ease;
}
.feature:hover{border-color:var(--md-fg-lighter);box-shadow:var(--md-shadow)}
.feature .f-tag{
  font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--gold-ink);
  letter-spacing:.04em;display:block;margin-bottom:10px;
}
.feature .f-tag::before{content:"#";opacity:.55}
.feature h3{font-size:15.5px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.feature p{font-size:13.5px;color:var(--md-fg-light);line-height:1.75}
.feature p code,.feature li code{
  font-family:var(--mono);font-size:12px;color:var(--md-code-fg);
  background:var(--md-bg-alt);padding:1px 5px;border-radius:4px;
}
.feature ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.feature ul li{
  font-size:13px;color:var(--md-fg-light);padding-left:18px;position:relative;line-height:1.7;
}
.feature ul li::before{
  content:"›";position:absolute;left:4px;color:var(--md-accent);font-weight:700;
}

/* Your Keys（BYOK） */
.keys-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center;
}
.keys-list{list-style:none;margin:0;display:flex;flex-direction:column;gap:12px}
.keys-list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14px;color:var(--md-fg-light);line-height:1.75;
}
.keys-list li b{color:var(--md-fg);font-weight:600}
.keys-list .tick{font-family:var(--mono);color:var(--md-accent);font-weight:700;flex-shrink:0}
.keys-footnote{
  margin-top:24px;font-family:var(--mono);font-size:11.5px;color:var(--md-fg-light);
  letter-spacing:.02em;
}
.keys-footnote .dot-ok{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a34a;margin-right:7px;vertical-align:1px}
.prov-board{
  background:var(--md-bg);border:1px solid var(--md-hairline);border-radius:var(--radius);
  padding:16px;box-shadow:var(--md-shadow);
  display:flex;flex-direction:column;gap:10px;position:relative;color:var(--md-fg);
}
.prov-board::before{
  content:"settings — providers";
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--md-fg-light);display:block;margin-bottom:4px;
}
.prov-card{
  background:var(--md-bg);border:1px solid var(--md-hairline);border-radius:8px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  transition:border-color .15s ease;
}
.prov-card:hover{border-color:var(--md-fg-lighter)}
.prov-card.active{border-color:color-mix(in srgb,var(--md-accent) 45%,transparent);background:var(--md-accent-trans)}
.prov-ava{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
}
.pa-openai{background:#10a37f}.pa-claude{background:#d97757}.pa-ollama{background:#3a3f4a}.pa-hermes{background:var(--md-accent)}.pa-opencode{background:#7c5cff}
.prov-info{flex:1;min-width:0}
.prov-name{display:block;font-size:13px;font-weight:600;color:var(--md-fg);line-height:1.3}
.prov-model{display:block;font-family:var(--mono);font-size:10.5px;color:var(--md-fg-light);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prov-badge{
  flex-shrink:0;font-family:var(--mono);font-size:10px;font-weight:600;
  padding:3px 9px;border-radius:999px;letter-spacing:.03em;
}
.pb-ok{color:#166534;background:rgba(74,222,128,.14)}
.pb-off{color:#991b1b;background:rgba(240,104,90,.12)}
.pb-idle{color:#8a6803;background:rgba(178,135,4,.12)}
html[data-md-color-scheme="slate"] .pb-ok{color:#4ade80}
html[data-md-color-scheme="slate"] .pb-idle{color:#d4a72c;background:rgba(212,167,44,.14)}

/* 站点 */
.site-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.site-chip{
  font-size:13.5px;color:var(--md-fg-light);
  background:var(--md-bg);border:1px solid var(--md-hairline);border-radius:8px;
  padding:6px 14px;transition:border-color .15s ease,color .15s ease;
}
.site-chip:hover{border-color:var(--md-link);color:var(--md-link)}
.site-chip .en{font-family:var(--mono);font-size:12px;color:var(--md-fg-light);margin-left:6px}
.site-note{margin-top:20px;font-size:13.5px;color:var(--md-fg-light);max-width:640px;line-height:1.8}
.site-note b{color:var(--md-fg);font-weight:600}
.site-note a{color:var(--md-link);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.site-note a:hover{color:var(--md-link-hover)}

/* 安装 */
.install-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.install-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:28px;border:1px solid var(--md-hairline);border-radius:10px;background:var(--md-bg);
}
.install-option.recommended{border-top:3px solid var(--md-primary-fg);padding-top:26px}
.install-option h3{font-size:22px;line-height:1.4}
.install-option p,.install-next p{font-size:14px;color:var(--md-fg-light);line-height:1.85}
.install-option .install-label{font-family:var(--mono);font-size:11px;color:var(--md-link)}
.install-option .btn{margin-top:auto}
.install-option code{font: .9em var(--mono);overflow-wrap:anywhere}
.install-next{display:flex;align-items:center;gap:32px;padding-block:32px}
.install-next > div{flex:1}
.install-next h3{font-size:18px;margin-bottom:6px}
.install-next .btn{flex-shrink:0}
.install-steps{max-width:680px}
.step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--md-hairline)}
.step:last-child{border-bottom:none}
.step .no{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--md-primary-fg);
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--md-primary-fg) 9%,transparent);margin-top:2px;
}
.step h4{font-size:15px;font-weight:600;margin-bottom:4px}
.step p{font-size:14px;color:var(--md-fg-light);line-height:1.75;overflow-wrap:anywhere}
.step p code{
  font-family:var(--mono);font-size:12.5px;color:var(--md-code-fg);
  background:var(--md-bg-alt);padding:1px 6px;border-radius:4px;
}
.step p .link{color:var(--md-link);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.step p .link:hover{color:var(--md-link-hover)}

/* ─── 隐私政策（.legal，内联样式的令牌已重映射） ────────────────────────── */
.legal .back{color:var(--md-link)}
.legal a{color:var(--md-link)}
.legal .back:hover{color:var(--md-link-hover)}
.legal .callout{
  border-left:3px solid var(--md-accent);
  background:var(--md-accent-trans);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ─── 滚动显现：Material 风格不做入场动画，保留类名为兼容旧标记 ───────────── */
.reveal{opacity:1;transform:none}

/* ─── 响应式 ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .hero > .container{grid-template-columns:1fr;gap:36px;max-width:900px}
  .hero-copy{max-width:620px}
  .hero .lead{max-width:600px}
  .hero h1{font-size:52px}
  html[lang="en"] .hero h1{font-size:48px}
  .landing .md-header__topic .sub{display:none}
}
@media (max-width:900px){
  .how-list{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .bili-side,.yt-side{display:none}
  .pg-video,.pg-article,.pg-pdf{min-height:440px}
  .keys-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  section{padding:48px 0}
  .md-header__links .hide-m{display:none}
  .md-header__links{gap:14px;margin-left:8px}
  .md-header__topic .sub{display:none}
  .pg-video,.pg-article,.pg-pdf{display:none}
  .panel{width:100%;border-left:none}
  .container{padding:0 16px}
  .win-bar{gap:10px}
  .landing .container,.landing .md-header__inner{padding-inline:20px}
  .landing .md-header{height:auto}
  .landing .md-header__inner{flex-wrap:wrap;gap:0 12px;padding-top:12px}
  .landing .md-header__links{order:3;width:100%;margin:0;justify-content:space-between;padding-block:12px;gap:10px}
  .landing .md-header__links a{font-size:12px;white-space:nowrap}
  .landing main section[id]{scroll-margin-top:48px}
  .hero{padding:36px 0 48px}
  .hero > .container{gap:32px}
  .hero h1,html[lang="en"] .hero h1{font-size:40px}
  .hero .eyebrow{margin-bottom:16px;font-size:10px}
  .hero .lead{font-size:15px}
  .hero-meta{gap:10px 14px}
  .hero .btn{padding:11px 16px;font-size:13px}
  .scn-tabs{margin:0 0 12px;gap:6px}
  .scn-tab{flex:1;justify-content:center;padding:8px;font-size:12px}
  .window{max-width:none}
  .win-body{flex-direction:column}
  .landing .pg-video,.landing .pg-article,.landing .pg-pdf{display:flex;min-height:0;max-height:140px;overflow:hidden}
  .landing .panel{min-height:310px}
  .landing .art-main{padding:12px 16px}
  .landing .art-title{font-size:16px;line-height:1.5}
  .landing .bili-player,.landing .yt-player{height:80px;aspect-ratio:auto}
  .landing .bili-main,.landing .yt-main{padding:8px 16px}
  .landing .bili-title,.landing .yt-title{font-size:12px;margin-top:6px}
  .landing .pdf-paper{margin:8px;padding:10px}
  .install-options{grid-template-columns:1fr}
  .install-option{padding:22px}
  .install-option.recommended{padding-top:20px}
  .install-next{align-items:flex-start;flex-direction:column;gap:20px}
  .landing .prov-card{padding:10px;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .p-status{animation:none;opacity:.85}
  .p-tool .spin{animation:none}
}

/* ── 演示视频（#demo）────────────────────────────────────────────── */
.demo-video{margin:0 auto;max-width:960px}
.demo-video video{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--md-fg-lightest);background:#0f141a;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.demo-video figcaption{
  margin-top:12px;text-align:center;font-size:12px;color:var(--md-fg-light);line-height:1.7;
}