:root {
  --brand:#0b57d0; --brand-strong:#0847ad; --brand-soft:#eaf2ff;
  --ink:#102a43; --text:#334e68; --muted:#718096; --line:#dfe7f1;
  --surface:#fff; --surface-subtle:#f5f8fc; --surface-raised:#fff;
  --header:#0b1f3a; --code:#101827;
  --shadow-sm:0 1px 2px rgba(16,42,67,.06);
  --shadow-md:0 12px 32px rgba(16,42,67,.10);
}

.learning-link { color:#dfedff; font-size:12px; text-decoration:none; white-space:nowrap; }
.learning-link:hover { text-decoration:underline; }
.vip-access-state { max-width:850px; padding:24px; color:var(--ink); line-height:1.8; }
.vip-access-state h1 { margin:20px 0 14px; font-size:28px; }
.vip-access-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.vip-access-actions a,.vip-access-actions button {
  padding:10px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--brand-soft); color:var(--brand-strong); text-decoration:none; cursor:pointer;
}
body.dark-mode {
  --brand:#6aa9ff; --brand-strong:#8bbcff; --brand-soft:#142d50;
  --ink:#edf5ff; --text:#c5d4e5; --muted:#8fa4bb; --line:#263b53;
  --surface:#0f1b2b; --surface-subtle:#0b1624; --surface-raised:#142337;
  --header:#071321; --code:#07101d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2); --shadow-md:0 14px 36px rgba(0,0,0,.28);
}
html { background:var(--surface-subtle); }
body {
  min-width:320px; height:100vh; overflow:hidden; background:var(--surface-subtle);
  color:var(--text); font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input { font:inherit; }
[hidden] { display:none!important; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid rgba(11,87,208,.28); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.header {
  height:72px; padding:0 28px; background:var(--header); border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 24px rgba(3,12,24,.16);
}
.header-left { gap:14px; }
.brand-mark {
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(145deg,#2f7df6,#0b57d0); color:#fff; font-size:13px; font-weight:800;
  letter-spacing:-.03em; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 18px rgba(22,100,220,.32);
}
.brand-copy { display:flex; align-items:baseline; gap:10px; }
.header-title { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.header-subtitle { color:#9fb4cc; font-size:12px; font-weight:500; }
.version-badge { padding:4px 8px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); color:#bfd2e8; font-size:11px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.api-count { color:#9fb4cc; font-size:12px; }
.theme-toggle {
  min-width:88px; min-height:36px; padding:0 13px; border:1px solid rgba(255,255,255,.16);
  border-radius:9px; background:rgba(255,255,255,.07); color:#f5f9ff; font-size:12px; font-weight:600;
  transition:background .18s ease,border-color .18s ease;
}
.theme-toggle:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28); }

.container { display:grid; grid-template-columns:240px 320px minmax(0,1fr); width:100vw; height:calc(100vh - 72px); background:var(--surface); }
.left-panel,.middle-panel,.right-panel { min-width:0; }
.left-panel { width:auto; padding:22px 16px 18px; background:var(--surface-subtle); border-right:1px solid var(--line); scrollbar-width:thin; }
.search-wrap { position:relative; margin-bottom:22px; }
.search-box {
  height:42px; margin:0; padding:0 64px 0 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-raised); color:var(--ink); box-shadow:var(--shadow-sm); transition:border-color .18s ease,box-shadow .18s ease;
}
.search-box::placeholder { color:var(--muted); }
.search-box:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,87,208,.12); outline:none; }
.search-shortcut { position:absolute; top:9px; right:9px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--surface-subtle); color:var(--muted); font-size:10px; font-weight:700; }
.group-label { margin:0 10px 9px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; }
.group-item { min-height:38px; margin:2px 0; padding:9px 11px; border-radius:8px; color:var(--text); font-size:13px; font-weight:500; line-height:1.35; transition:background .16s ease,color .16s ease,transform .16s ease; }
.group-item:hover { background:var(--brand-soft); color:var(--brand-strong); transform:translateX(2px); }
.group-item.active { background:var(--brand-soft); color:var(--brand-strong); box-shadow:inset 3px 0 0 var(--brand); font-weight:700; }
.source-note { margin:20px 8px 0; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.6; }

.middle-panel { width:auto; padding:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border-right:1px solid var(--line); }
.panel-heading { height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:700; }
.panel-heading span { color:var(--muted); font-size:11px; font-weight:600; }
#functionList { flex:1; overflow-y:auto; padding:12px; scrollbar-width:thin; }
.function-item { min-height:64px; margin:0 0 5px; padding:11px 12px; border-radius:9px; color:var(--text); transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.function-item:hover { background:var(--surface-subtle); color:var(--ink); transform:translateX(2px); }
.function-item.active { background:var(--brand-soft); border-color:rgba(11,87,208,.24); color:var(--brand-strong); box-shadow:inset 3px 0 0 var(--brand); }
.function-name { margin-bottom:5px; color:inherit; font-family:"Cascadia Code",Consolas,monospace; font-size:13px; font-weight:700; letter-spacing:-.02em; }
.function-desc { overflow:hidden; color:var(--muted); font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }

.right-panel { position:relative; padding:44px clamp(32px,5vw,76px) 80px; background:var(--surface); color:var(--text); scrollbar-width:thin; }
.right-panel>* { max-width:980px; }
.api-title { margin-bottom:10px; color:var(--ink); font-family:"Cascadia Code",Consolas,monospace; font-size:clamp(30px,3vw,42px); font-weight:760; letter-spacing:-.045em; }
.api-description { margin-bottom:30px; color:var(--muted); font-size:15px; line-height:1.7; }
.tabs { position:sticky; top:-44px; z-index:8; gap:4px; margin:0 0 28px; padding:12px 0 0; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--surface); }
.tab { padding:10px 13px 12px; border-radius:8px 8px 0 0; color:var(--muted); font-size:13px; font-weight:650; }
.tab:hover { background:var(--surface-subtle); color:var(--ink); }
.tab.active { margin:0 0 -1px; padding:10px 13px 12px; border-bottom:2px solid var(--brand); color:var(--brand-strong); }
.tab-content.active { padding:4px 0 24px; animation:content-in .22s ease-out; }
@keyframes content-in { from { opacity:.35; transform:translateY(3px); } to { opacity:1; transform:none; } }
.content-text { max-width:860px; color:var(--text); font-size:14px; line-height:1.85; }
.content-text strong { color:var(--ink); }
.param-table { overflow:hidden; border:1px solid var(--line); border-radius:10px; border-collapse:separate; border-spacing:0; background:var(--surface-raised); box-shadow:var(--shadow-sm); }
.param-table th,.param-table td { padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--text); line-height:1.55; }
.param-table th:last-child,.param-table td:last-child { border-right:0; }
.param-table tr:last-child td { border-bottom:0; }
.param-table th { background:var(--surface-subtle); color:var(--ink); font-size:12px; letter-spacing:.02em; }

.code-block,.example-detail .code-block { border:1px solid #26344a; border-radius:12px; background:var(--code); box-shadow:0 14px 32px rgba(3,12,24,.18); }
.code-content,.code-block pre,.example-detail .code-block pre { background:var(--code); }
.code-content { white-space:normal; }
.code-content .hljs-keyword { color:#569cd6; font-weight:600; }
.code-content .hljs-comment { color:#6a9955; font-style:normal; }
.copy-button { top:10px; right:10px; padding:6px 11px; border:1px solid #41516a; border-radius:7px; background:#1d2a3f; color:#d8e4f4; box-shadow:none; }
.copy-button:hover { background:#2a3a53; transform:none; }

.welcome-state { max-width:920px; padding:8px 0 36px; }
.welcome-eyebrow { margin-bottom:16px; color:var(--brand-strong); font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.welcome-state h1 { max-width:720px; margin-bottom:18px; color:var(--ink); font-size:clamp(34px,4vw,54px); line-height:1.12; letter-spacing:-.045em; }
.welcome-lead { max-width:720px; color:var(--muted); font-size:16px; line-height:1.8; }
.welcome-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:30px 0; }
.stat-card { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface-subtle); }
.stat-value { display:block; margin-bottom:5px; color:var(--brand-strong); font-size:24px; font-weight:800; }
.stat-label { color:var(--muted); font-size:12px; line-height:1.5; }
.welcome-guide { padding:20px 22px; border:1px solid #bad3f8; border-radius:12px; background:var(--brand-soft); }
.welcome-guide h2 { margin-bottom:10px; color:var(--ink); font-size:15px; }
.welcome-guide ol { margin-left:19px; color:var(--text); font-size:13px; line-height:1.9; }
.doc-notice { margin-top:16px; color:var(--muted); font-size:12px; line-height:1.65; }

.faq-container,.examples-container,.example-detail { padding:0; }
.faq-container h2,.examples-container h2,.example-detail h2 { color:var(--ink)!important; font-size:28px; letter-spacing:-.025em; }
.container.examples-mode { grid-template-columns:minmax(0,1fr); }
.container.examples-mode .right-panel { grid-column:1 / -1; width:100%; padding:40px clamp(28px,5vw,72px) 80px; }
.container.examples-mode .right-panel>* { width:100%; max-width:1400px; margin-left:auto; margin-right:auto; }
.container.examples-mode .examples-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.container.examples-mode .examples-category { margin-bottom:34px; }
.container.examples-mode .example-card { min-height:104px; padding:18px 20px; }
.faq-item,.example-card { background:var(--surface-raised); border-color:var(--line); border-radius:11px; box-shadow:var(--shadow-sm); }
.faq-item:hover,.example-card:hover { border-color:rgba(11,87,208,.48); box-shadow:var(--shadow-md); }
.faq-question,.faq-answer strong,.example-title,.category-title { color:var(--ink); }
.faq-answer,.examples-intro,.example-meta { color:var(--muted); }
.faq-number,.badge,.back-button { background:var(--brand); }
body.dark-mode .left-panel { background:var(--surface-subtle); border-right-color:var(--line); }
body.dark-mode .middle-panel { background:var(--surface); border-right-color:var(--line); }
body.dark-mode .right-panel { background:var(--surface); }
body.dark-mode .search-box { background:var(--surface-raised); border-color:var(--line); color:var(--ink); }
body.dark-mode .group-label,body.dark-mode .group-item,body.dark-mode .function-item { color:var(--text); }
body.dark-mode .group-item:hover,body.dark-mode .function-item:hover { background:var(--brand-soft); color:var(--brand-strong); }
body.dark-mode .group-item.active,body.dark-mode .function-item.active { background:var(--brand-soft); color:var(--brand-strong); }
body.dark-mode .function-desc,body.dark-mode .api-description,body.dark-mode .content-text { color:var(--muted); }
body.dark-mode .api-title,body.dark-mode .content-text strong { color:var(--ink); }
body.dark-mode .tabs { border-bottom-color:var(--line); }
body.dark-mode .tab { color:var(--muted); }
body.dark-mode .tab:hover { color:var(--ink); }
body.dark-mode .tab.active { color:var(--brand-strong); }
body.dark-mode .param-table th { background:var(--surface-subtle); color:var(--ink); }
body.dark-mode .param-table td { color:var(--text); }
body.dark-mode .param-table th,body.dark-mode .param-table td { border-color:var(--line); }
body.dark-mode .faq-item,body.dark-mode .example-card { background:var(--surface-raised); border-color:var(--line); }
body.dark-mode .faq-question,body.dark-mode .faq-answer strong,body.dark-mode .example-title,body.dark-mode .category-title { color:var(--ink); }
body.dark-mode .faq-answer,body.dark-mode .examples-intro,body.dark-mode .example-meta { color:var(--muted); }
* { scrollbar-color:#9eb0c4 transparent; scrollbar-width:thin; }

@media (max-width:1080px) {
  .container { grid-template-columns:210px 280px minmax(0,1fr); }
  .right-panel { padding-left:30px; padding-right:30px; }
  .api-count { display:none; }
}
@media (max-width:820px) {
  .container.examples-mode { grid-template-rows:auto; }
  body { height:auto; min-height:100vh; overflow:auto; }
  .header { position:sticky; height:64px; padding:0 16px; }
  .header-subtitle,.version-badge { display:none; }
  .theme-toggle { min-width:74px; }
  .container { display:grid; grid-template-columns:1fr; grid-template-rows:auto 320px minmax(520px,auto); width:100%; height:auto; }
  .left-panel { display:flex; gap:8px; align-items:center; padding:12px; overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--line); }
  .search-wrap { min-width:230px; margin:0; }
  .group-label,.source-note { display:none; }
  .group-item { min-width:max-content; margin:0; padding:9px 12px; }
  .group-item:hover { transform:none; }
  .group-item.active { box-shadow:inset 0 -3px 0 var(--brand); }
  .middle-panel { border-right:0; border-bottom:1px solid var(--line); }
  .right-panel { min-height:520px; overflow:visible; padding:34px 22px 64px; }
  .tabs { top:64px; }
}
@media (max-width:560px) {
  .vip-access-state h1 { font-size:24px; line-height:1.5; text-wrap:balance; }
  .header { height:auto; min-height:108px; flex-wrap:wrap; align-content:center; gap:10px; padding-top:10px; padding-bottom:10px; }
  .header-left { width:100%; }
  .header-actions { width:100%; justify-content:space-between; }
  .tabs,.examples-toolbar { top:108px; }
  .brand-mark { width:34px; height:34px; }
  .header-title { font-size:15px; }
  .header-actions { gap:6px; }
  .theme-toggle { min-width:auto; padding:0 10px; }
  .welcome-stats { grid-template-columns:1fr; }
  .panel-heading { height:52px; flex-basis:52px; }
  .param-table { display:block; overflow-x:auto; white-space:nowrap; }
  .tabs { margin-left:-6px; margin-right:-6px; }
}

/* 2026 content and code-reading refinement */
.api-detail-page { width:100%; max-width:1040px; }
.api-kicker,.examples-eyebrow {
  margin-bottom:10px; color:var(--brand-strong); font-size:11px; font-weight:800;
  letter-spacing:.12em;
}
.api-detail-page .api-title {
  margin:0 0 8px; font-size:clamp(32px,3.2vw,46px); line-height:1.08;
}
.api-detail-page .api-description { margin-bottom:24px; font-size:15px; }
.api-meta-bar {
  display:flex; align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap;
  margin:-8px 0 24px; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-subtle);
}
.api-meta-items,.api-scene-group { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.api-meta-chip,.api-scene-group>span {
  display:inline-flex; align-items:center; min-height:27px; padding:4px 9px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface-raised); color:var(--muted); font-size:11px; font-weight:700;
}
.api-scene-group>span.is-supported {
  border-color:rgba(25,135,84,.24); background:rgba(25,135,84,.10); color:#137a4b;
}
.api-scene-group>span.is-disabled {
  border-color:rgba(113,128,150,.22); background:rgba(113,128,150,.07); color:var(--muted); opacity:.72;
}
.api-source-link,.strategy-source-link {
  display:inline-flex; align-items:center; min-height:29px; padding:5px 10px; border-radius:8px;
  color:var(--brand-strong); font-size:11px; font-weight:750; text-decoration:none;
}
.api-source-link:hover,.strategy-source-link:hover { background:var(--brand-soft); text-decoration:underline; }
.api-detail-page .content-text {
  max-width:900px; padding:2px 0; font-size:14px; line-height:1.9;
}
.api-detail-page .content-text strong {
  display:inline; margin:0; color:var(--ink); font-weight:750;
}
.api-detail-page .content-text ul { margin:0; padding-left:20px; }
.api-detail-page .content-text li { margin:0 0 10px; padding-left:3px; }
.api-detail-page .param-table {
  width:100%; min-width:680px; table-layout:auto; border-radius:12px;
}
.api-detail-page #tab-1 { max-width:100%; overflow-x:auto; padding-bottom:18px; }
.api-detail-page .param-table tbody tr:nth-child(even) { background:rgba(113,128,150,.055); }
.api-detail-page .param-table tbody tr:hover { background:var(--brand-soft); }
.api-detail-page .param-table th:first-child,
.api-detail-page .param-table td:first-child {
  width:20%; color:var(--ink); font-family:"Cascadia Code",Consolas,monospace;
  font-size:12px; font-weight:650; overflow-wrap:anywhere;
}
.api-detail-page .param-table th:nth-child(2),
.api-detail-page .param-table td:nth-child(2) { width:14%; }
.api-detail-page .param-table th:nth-child(3),
.api-detail-page .param-table td:nth-child(3) { width:10%; text-align:center; }
.api-detail-page .param-table th:nth-child(4),
.api-detail-page .param-table td:nth-child(4) {
  width:12%; font-family:"Cascadia Code",Consolas,monospace; font-size:12px;
}
.signature-card {
  display:flex; flex-direction:column; gap:9px; margin-top:22px; padding:17px 18px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-subtle);
}
.signature-card span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.signature-card code {
  overflow-x:auto; padding-bottom:2px; color:var(--ink); font-family:"Cascadia Code",Consolas,monospace;
  font-size:13px; font-weight:650; white-space:pre-wrap; overflow-wrap:anywhere;
}
.return-content { display:flex; flex-direction:column; gap:12px; max-width:900px; }
.return-content p { color:var(--text); font-size:14px; line-height:1.8; }
.return-code {
  max-width:100%; overflow:auto; margin:0; padding:16px 18px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface-subtle); color:var(--ink);
  font-family:"Cascadia Code",Consolas,monospace; font-size:12px; line-height:1.7; white-space:pre-wrap;
}
.parameter-empty {
  display:flex; flex-direction:column; gap:5px; max-width:620px; padding:20px;
  border:1px dashed var(--line); border-radius:11px; background:var(--surface-subtle);
}
.parameter-empty strong { color:var(--ink); font-size:14px; }
.parameter-empty span { color:var(--muted); font-size:12px; line-height:1.65; }
.official-example-stack { display:flex; flex-direction:column; gap:22px; }
.official-example-title {
  margin:4px 0 -10px; color:var(--ink); font-size:15px; font-weight:760; letter-spacing:-.01em;
}
.strategy-source-link {
  width:max-content; margin:0 0 12px; border:1px solid var(--line); background:var(--surface-subtle);
}

.code-note {
  display:flex; align-items:flex-start; gap:12px; margin:2px 0 14px; padding:12px 14px;
  border:1px solid #c9daf3; border-radius:10px; background:#f2f7ff; color:#49627d;
  font-size:12px; line-height:1.65;
}
.code-note strong {
  flex:0 0 auto; display:inline!important; margin:0!important; color:#174f9e!important;
  font-weight:750;
}
.code-viewer {
  width:100%; overflow:hidden; border:1px solid #27344a; border-radius:14px;
  background:#0b1220; color:#d6deeb; box-shadow:0 18px 42px rgba(3,12,24,.22);
}
.code-toolbar {
  min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:8px 12px 8px 14px; border-bottom:1px solid #263348; background:#111a2b;
}
.code-file,.code-actions { display:flex; align-items:center; min-width:0; gap:9px; }
.code-language {
  min-width:27px; padding:4px 5px; border:1px solid #33547d; border-radius:6px;
  background:#172943; color:#82b8ff; font-size:9px; font-weight:850; text-align:center;
  letter-spacing:.08em;
}
.code-filename {
  overflow:hidden; color:#e7eef8; font-family:"Cascadia Code",Consolas,monospace;
  font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap;
}
.code-status {
  max-width:210px; overflow:hidden; color:#8fa4bb; font-size:11px; font-weight:600;
  text-overflow:ellipsis; white-space:nowrap;
}
.code-copy {
  min-height:32px; padding:0 11px; border:1px solid #3b4b63; border-radius:7px;
  background:#1a2639; color:#e2ebf6; font-size:11px; font-weight:700; cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.code-copy:hover { border-color:#5d7698; background:#25344b; color:#fff; }
.code-copy.is-copied { border-color:#2f855a; background:#163d2e; color:#9ae6b4; }
.code-scroll {
  max-width:100%; max-height:min(66vh,720px); overflow:auto; overscroll-behavior:contain;
  background:#0b1220; scrollbar-color:#3e506a #0b1220; scrollbar-width:thin;
}
.code-scroll:focus-visible { outline:2px solid #6aa9ff; outline-offset:-2px; }
.code-lines { min-width:max-content; padding:15px 0 18px; counter-reset:code-line; }
.code-row {
  display:grid; grid-template-columns:56px minmax(max-content,1fr); min-height:24px;
  align-items:start; font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace;
  font-size:13px; line-height:1.72;
}
.code-row:hover { background:rgba(106,169,255,.055); }
.code-row .code-line-number {
  position:sticky; left:0; z-index:1; display:block; min-height:24px; padding:0 14px 0 8px;
  border-right:1px solid #1d293b; background:#0b1220; color:#53647b; font-size:11px;
  text-align:right; user-select:none;
}
.code-line-text {
  display:block; min-height:24px; padding:0 24px 0 18px; color:#d6deeb;
  font:inherit; white-space:pre; tab-size:4;
}
.token-keyword { color:#82aaff; font-weight:650; }
.token-function { color:#7fdbca; }
.token-string { color:#ecc48d; }
.token-number { color:#f78c6c; }
.token-comment { color:#6f9d76; font-style:italic; }
.token-plain { color:#d6deeb; }

.welcome-state { max-width:980px; }
.welcome-guide { margin-bottom:16px; }
.welcome-quickstart {
  margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface-raised); box-shadow:var(--shadow-sm);
}
.quickstart-heading {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px;
}
.quickstart-heading span {
  display:block; margin-bottom:4px; color:var(--brand-strong); font-size:10px; font-weight:800;
  letter-spacing:.12em;
}
.quickstart-heading h2 { margin:0; color:var(--ink); font-size:18px; }
.quickstart-heading>button {
  min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-subtle); color:var(--brand-strong); font-size:11px; font-weight:700;
  cursor:pointer;
}
.quickstart-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.quickstart-grid button {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; padding:14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-subtle);
  color:var(--text); text-align:left; cursor:pointer; transition:border-color .16s ease,transform .16s ease;
}
.quickstart-grid button:hover {
  border-color:rgba(11,87,208,.45); transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.quickstart-grid code {
  color:var(--brand-strong); font-family:"Cascadia Code",Consolas,monospace;
  font-size:12px; font-weight:750;
}
.quickstart-grid span { color:var(--muted); font-size:11px; }

.container.examples-mode .right-panel { padding-top:32px; }
.examples-container,.faq-container,.example-detail { width:100%; max-width:1320px!important; }
.back-button {
  min-height:36px; margin:0 0 26px; padding:0 13px; border:1px solid #0a4aaa;
  border-radius:8px; background:var(--brand); color:#fff; font-size:12px; font-weight:700;
  cursor:pointer; box-shadow:0 5px 14px rgba(11,87,208,.18);
}
.back-button:hover { background:var(--brand-strong); transform:none; }
.examples-hero { max-width:760px; margin-bottom:26px; }
.examples-hero h1,.example-detail-heading h1 {
  margin:0 0 10px; color:var(--ink); font-size:clamp(32px,4vw,48px); line-height:1.12;
  letter-spacing:-.045em;
}
.examples-hero p {
  margin:0; color:var(--muted); font-size:15px; line-height:1.75;
}
.examples-toolbar {
  position:sticky; top:-32px; z-index:10; margin:0 0 30px; padding:14px;
  border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(12px);
}
.example-search { display:block; margin-bottom:12px; }
.example-search input {
  width:100%; height:40px; padding:0 13px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface-raised); color:var(--ink); font-size:13px;
}
.example-search input:focus { border-color:var(--brand); outline:3px solid rgba(11,87,208,.1); }
.example-filters { display:flex; gap:7px; overflow-x:auto; padding:1px 0 5px; }
.example-filter {
  flex:0 0 auto; min-height:30px; padding:0 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-subtle); color:var(--muted); font-size:11px; font-weight:650;
  cursor:pointer;
}
.example-filter:hover { border-color:rgba(11,87,208,.4); color:var(--brand-strong); }
.example-filter.active { border-color:var(--brand); background:var(--brand); color:#fff; }
.example-result-summary { margin-top:7px; color:var(--muted); font-size:11px; }
.examples-results .examples-category { margin:0 0 38px; }
.category-heading {
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px;
  padding-bottom:11px; border-bottom:1px solid var(--line);
}
.category-heading .category-title { margin:0; font-size:19px; }
.category-heading>span { color:var(--muted); font-size:11px; font-weight:650; }
.container.examples-mode .examples-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px;
}
.container.examples-mode .example-card {
  display:flex; flex-direction:column; align-items:flex-start; min-height:150px; padding:18px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-raised);
  color:var(--text); text-align:left; cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.container.examples-mode .example-card:hover {
  border-color:rgba(11,87,208,.5); box-shadow:var(--shadow-md); transform:translateY(-2px);
}
.example-card-type {
  margin-bottom:18px; padding:4px 7px; border-radius:6px; background:var(--brand-soft);
  color:var(--brand-strong); font-size:10px; font-weight:750;
}
.example-card[data-example-category="进阶学习"] .example-card-type {
  background:rgba(8,145,178,.12); color:#0e7490;
}
.example-card[data-example-category="扩展示例"] .example-card-type {
  background:rgba(124,58,237,.11); color:#6d28d9;
}
body.dark-mode .example-card[data-example-category="进阶学习"] .example-card-type { color:#67e8f9; }
body.dark-mode .example-card[data-example-category="扩展示例"] .example-card-type { color:#c4b5fd; }
.example-card .example-title {
  display:block; margin-bottom:7px; color:var(--ink); font-size:15px; font-weight:750;
}
.example-card .example-meta { display:block; color:var(--muted); font-size:11px; }
.example-card .example-open {
  display:block; margin-top:auto; padding-top:14px; color:var(--brand-strong);
  font-size:11px; font-weight:700;
}
.example-detail-heading { margin-bottom:18px; }
.example-description {
  max-width:760px; margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.7;
}
.example-detail .example-meta-info { display:flex; align-items:center; gap:10px; margin:12px 0 0; }
.example-detail .badge {
  padding:5px 8px; border-radius:6px; background:var(--brand-soft); color:var(--brand-strong);
  font-size:10px; font-weight:750;
}
.example-detail .line-count { color:var(--muted); font-size:11px; }
.example-detail .code-viewer { margin-bottom:50px; }
.faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.faq-item { margin:0; padding:20px; }
.faq-question { align-items:flex-start; margin-bottom:11px; }
.faq-question-text { margin:2px 0 0; color:var(--ink); font-size:15px; line-height:1.55; }
.faq-number { flex:0 0 auto; min-width:27px; height:27px; border-radius:7px; font-size:11px; }
.faq-answer { padding-left:38px; font-size:13px; line-height:1.8; }

body.dark-mode .code-note {
  border-color:#294663; background:#11263d; color:#9fb4cc;
}
body.dark-mode .code-note strong { color:#8bbcff!important; }
body.dark-mode .welcome-quickstart,
body.dark-mode .examples-toolbar { background:var(--surface-raised); }
body.dark-mode .api-detail-page .param-table tbody tr:nth-child(even) { background:rgba(255,255,255,.025); }
body.dark-mode .api-scene-group>span.is-supported { color:#70d6a4; }

@media (max-width:1000px) {
  .container.examples-mode .examples-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq-list { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .code-toolbar { align-items:flex-start; }
  .code-actions { flex-direction:column; align-items:flex-end; gap:5px; }
  .code-status { max-width:130px; }
  .code-row { grid-template-columns:44px minmax(max-content,1fr); font-size:12px; }
  .code-row .code-line-number { padding-right:10px; }
  .code-line-text { padding-left:13px; padding-right:16px; }
  .code-note { flex-direction:column; gap:3px; }
  .quickstart-heading { align-items:flex-start; flex-direction:column; }
  .quickstart-grid,.container.examples-mode .examples-grid { grid-template-columns:1fr; }
  .container.examples-mode .right-panel { padding:26px 18px 60px; }
  .examples-toolbar { top:64px; }
  .api-meta-bar { align-items:flex-start; }
  .api-meta-items,.api-scene-group { width:100%; }
}
@media (max-width:560px) {
  .tabs,.examples-toolbar { top:108px; }
}