/* 纯白配置编辑器首屏 */
.hero { padding:28px var(--gutter) 0; overflow-x:clip }
.hero-inner { max-width:1200px; margin:0 auto; position:relative; text-align:center }
.facts { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0; font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted) }
.facts li { display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); line-height:18px }
.pulse { position:relative; flex-shrink:0; width:7px; height:7px; border-radius:var(--r-pill); background:var(--success) }
.pulse::after { content:""; position:absolute; inset:0; border-radius:var(--r-pill); background:var(--success); opacity:.45; animation:quietPulse 2.4s ease-in-out 3 }
.hero-title { margin:0 0 14px; font-family:var(--font-display); font-weight:800; font-size:var(--size-h1); line-height:1.16; letter-spacing:-.012em; color:var(--text); isolation:isolate }
.h1-sep { color:var(--sketch); margin:0 .22em; font-weight:700 }
.kw { position:relative; white-space:nowrap; z-index:0 }
.kw svg { position:absolute; left:-3%; bottom:-.1em; width:106%; height:.36em; z-index:-1; fill:none; stroke:var(--accent-soft); stroke-linecap:round; overflow:visible }
.kw .stroke-main { stroke-width:7 }
.kw .stroke-thin { stroke-width:2.2; opacity:.7 }
.lede { margin:0 auto 26px; max-width:760px; font-size:17px; line-height:1.65; color:var(--text-muted) }
.lede strong { color:var(--text); font-weight:600 }
.cta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:22px }
.platforms { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 30px; list-style:none; margin:0; padding:0 }
.plat { position:relative; display:inline-flex; align-items:center; gap:8px; padding:6px 3px; color:var(--text-muted); font-size:15px; line-height:20px; text-decoration:none; transition:color .2s }
.plat-ico { width:17px; height:17px; color:var(--text); fill:currentColor }
.plat-ico-tux { width:15px }
.plat::after { content:""; position:absolute; left:8%; bottom:-5px; width:84%; height:9px; border-top:2px solid var(--accent-soft); border-radius:50%; opacity:0; transform:translateY(3px) scaleX(.6); transition:opacity .25s,transform .3s var(--ease-out) }
.plat:hover,.plat:focus-visible { color:var(--text) }
.plat:hover::after,.plat:focus-visible::after { opacity:1; transform:none }
.sketch { position:absolute; pointer-events:none; fill:none; stroke:var(--sketch); stroke-linecap:round; stroke-linejoin:round }
.spark-a { width:30px; height:30px; left:7%; top:120px; stroke-width:1.6 }
.spark-b { width:20px; height:20px; right:11%; top:36px; stroke-width:1.5 }
.cloud-a { width:132px; height:58px; left:1%; top:262px; stroke-width:1.5 }
.editor-wrap { position:relative; max-width:1120px; margin:36px auto 0 }
.editor { position:relative; z-index:1; display:grid; grid-template-columns:216px 296px minmax(0,1fr); border-radius:var(--r-xl); overflow:hidden; background:var(--bg); color:var(--text); box-shadow:var(--shadow-window); text-align:left }
.pane-head { height:48px; display:flex; align-items:center; padding:0 16px }
.side { background:var(--chrome-dark); color:var(--chrome-ink); padding-bottom:18px }
.side .pane-head { justify-content:space-between; padding:0 16px 0 18px }
.lights { display:flex; gap:8px }
.lights i { width:12px; height:12px; border-radius:var(--r-pill); display:block; flex-shrink:0 }
.lights i:nth-child(1) { background:var(--tl-close) }
.lights i:nth-child(2) { background:var(--tl-min) }
.lights i:nth-child(3) { background:var(--tl-zoom) }
.side-toggle { width:16px; height:16px; color:var(--chrome-ink-muted); fill:none; stroke:currentColor; stroke-width:1.4 }
.side-label { margin:10px 0 4px; padding:0 22px; font-size:11px; letter-spacing:.06em; color:var(--chrome-ink) }
.side-list { list-style:none; margin:0; padding:0 10px }
.side-item { position:relative; display:flex; align-items:center; gap:10px; height:32px; padding:0 12px; border-radius:var(--r-sm); font-size:13.5px; color:var(--chrome-ink) }
.side-item svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.side-item.is-current { background:var(--chrome-raise); color:var(--chrome-ink) }
.side-item.is-current::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:var(--r-pill); background:var(--accent) }
.fields { border-right:1px solid var(--border); background:var(--bg); color:var(--text) }
.fields .pane-head { justify-content:space-between; padding:0 16px 0 20px }
.fields-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px }
.head-tools { display:flex; gap:14px; color:var(--text-muted) }
.head-tools svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.field-list { list-style:none; margin:0; padding:4px 12px 0 }
.field { position:relative; padding:12px 14px 12px 16px; border-bottom:1px solid var(--border) }
.field:last-child { border-bottom:0 }
.field.is-current { background:var(--bg-panel); color:var(--text); border-radius:var(--r-md); border-bottom-color:var(--clear) }
.field.is-current::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:var(--r-pill); background:var(--accent) }
.field-row { display:flex; align-items:center; justify-content:space-between; gap:10px }
.field-key { margin:0; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text) }
.field-val { font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted); background:var(--bg-panel-2); border-radius:var(--r-xs); padding:1px 7px; line-height:18px }
.field.is-current .field-val { background:var(--bg); color:var(--text-muted); box-shadow:var(--shadow-chip) }
.field-desc { margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-muted) }
.doc { min-width:0; overflow-x:auto }
.doc .pane-head { justify-content:center; position:relative }
.doc-title { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-muted) }
.doc-title b { color:var(--text); font-weight:600 }
.doc-title svg { width:14px; height:14px; fill:none; stroke:var(--text-muted); stroke-width:1.4; stroke-linejoin:round }
.doc-more { position:absolute; right:18px; top:12px; color:var(--text-faint) }
.code { list-style:none; margin:0; padding:18px 28px 18px 14px; counter-reset:ln; font-family:var(--font-mono); font-size:13px; line-height:var(--code-lh); color:var(--text); min-width:max-content }
.code li { counter-increment:ln; display:flex; min-height:var(--code-lh); white-space:pre; border-radius:var(--r-xs); opacity:0; transform:translateY(6px); animation:lineIn .42s var(--ease-out) forwards }
.code li::before { content:counter(ln); flex:none; width:3ch; margin-right:2.2ch; text-align:right; color:var(--sketch) }
.code li.is-active { background:var(--bg-panel); color:var(--text) }
.code li.is-active::before { color:var(--text-muted) }
.code li:nth-child(1) { animation-delay:.04s }
.code li:nth-child(2) { animation-delay:.07s }
.code li:nth-child(3) { animation-delay:.10s }
.code li:nth-child(4) { animation-delay:.13s }
.code li:nth-child(5) { animation-delay:.16s }
.code li:nth-child(6) { animation-delay:.20s }
.code li:nth-child(7) { animation-delay:.23s }
.code li:nth-child(8) { animation-delay:.26s }
.code li:nth-child(9) { animation-delay:.29s }
.code li:nth-child(10) { animation-delay:.33s }
.code li:nth-child(11) { animation-delay:.36s }
.code li:nth-child(12) { animation-delay:.39s }
.code li:nth-child(13) { animation-delay:.42s }
.code li:nth-child(14) { animation-delay:.45s }
.code li:nth-child(15) { animation-delay:.49s }
.code li:nth-child(16) { animation-delay:.52s }
.code li:nth-child(17) { animation-delay:.55s }
.code li:nth-child(18) { animation-delay:.58s }
.code li:nth-child(19) { animation-delay:.61s }
.k,.kr { color:var(--text) }
.kr { font-weight:500 }
.p { color:var(--text-faint) }
.v { color:var(--accent) }
.c { color:var(--text-faint); font-style:italic }
.ind { display:inline-block; width:2ch; height:var(--code-lh); vertical-align:top; border-left:1px solid var(--accent-soft); margin-left:.3ch; padding-left:1.7ch }
.caret { display:inline-block; width:2px; height:15px; margin:3px 0 0 2px; vertical-align:top; background:var(--text); border-radius:var(--r-xs); opacity:0; animation:textCursor 1.1s steps(1) 1.15s infinite }
.sketch-cat { position:absolute; pointer-events:none; right:-60px; top:-128px; width:260px; height:420px; z-index:2; overflow:visible; fill:none; stroke:var(--sketch); stroke-linecap:round; stroke-linejoin:round }
.sketch-cat .w-main { stroke-width:1.8 }
.sketch-cat .w-thin { stroke-width:1 }
.sketch-cat .w-ghost { stroke-width:.9; opacity:.65 }
.sketch-cat .w-cable { stroke-width:2 }
.fact-strip { text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); margin:36px 0 0 }

/* 资料浏览器：纵向 tab 与对应配置示例。 */
.tabs { min-width:0 }
.tablist,[role="tablist"] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:8px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text) }
[role="tab"] {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 20px; border:0; border-radius:var(--r-md);
  background:var(--clear); color:var(--text-secondary); text-align:left; line-height:1.5;
}
[role="tab"] svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5 }
[role="tab"][aria-selected="true"] { background:var(--bg); color:var(--text); box-shadow:var(--shadow-chip); font-weight:600 }
[role="tab"][aria-selected="true"]::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:var(--r-pill); background:var(--accent) }
[role="tabpanel"] { min-width:0; outline-offset:6px }
.notebook { display:grid; grid-template-columns:250px minmax(0,1fr); border-radius:var(--r-2xl); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float); overflow:hidden }
.notebook [role="tablist"] { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:0; padding:24px 16px; border-radius:0; background:var(--bg-panel); color:var(--text) }
.notebook [role="tab"] { width:100%; justify-content:flex-start; padding:16px; overflow:hidden }
.notebook [role="tabpanel"] { padding:40px }
.notebook [role="tabpanel"] p { color:var(--text-secondary); line-height:1.85 }
.tab-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--border) }
.tab-progress::after { content:""; display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left }
.is-playing [role="tab"][aria-selected="true"] .tab-progress::after { animation:tabClock var(--tab-cycle) linear forwards }

/* 长页分类锚点：直接置于覆盖所有章节的父容器中。 */
.toc { position:sticky; top:16px; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:8px; overflow-x:visible; max-width:100%; padding:10px; margin:0 0 40px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); overscroll-behavior-inline:contain }
.toc a { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; padding:10px 16px; color:var(--text); text-decoration:none; border-radius:var(--r-md); white-space:nowrap }
.toc a:hover,.toc a[aria-current] { background:var(--bg); color:var(--text) }
.faq-item { margin-bottom:12px; padding:0 24px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text) }
.faq-item summary { position:relative; cursor:pointer; padding:22px 30px 22px 0; font-weight:600; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font-size:22px; color:var(--text-secondary) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--text-secondary) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { padding:28px; border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text) }
.term-card h3 { margin-bottom:4px }
.term-en { display:block; margin-bottom:16px; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary) }
.term-card p { color:var(--text-secondary) }
.client-card { position:relative; padding:32px; border-radius:var(--r-2xl); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float) }
.client-head { display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:20px }
.client-head h3 { margin:0 }
.client-logo { width:56px; height:56px; flex-shrink:0 }
.client-version { display:block; margin-top:6px; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary) }
[data-version]:empty { display:none }
.client-card p { color:var(--text-secondary) }
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.badge,.tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; max-width:100%; padding:4px 10px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-secondary); font-size:12px; line-height:1.5; overflow-wrap:anywhere; white-space:normal }
.badge-first { background:var(--bg-panel); color:var(--accent-dark); font-weight:700 }
.badge-recommended { background:var(--bg-panel-2); color:var(--text); font-weight:600 }
.badge-archived { background:var(--bg-panel-2); color:var(--text-secondary) }
.post-card { padding:28px; border-radius:var(--r-xl); background:var(--bg); color:var(--text); box-shadow:var(--shadow-float) }
.post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; font-size:12px; color:var(--text-secondary) }
.post-card h3 { font-size:20px; margin-bottom:12px }
.post-card h3 a { color:var(--text); text-decoration:none }
.post-card h3 a:hover { color:var(--accent-dark) }
.post-card p { color:var(--text-secondary); font-size:14px }
.post-link { font-size:14px; font-weight:600; color:var(--accent-dark) }
.callout { margin:28px 0; padding:24px 28px; border:0; border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout-title { display:block; margin-bottom:8px; font-weight:700 }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:64px; padding:32px; border-radius:var(--r-2xl); background:var(--bg-panel); color:var(--text) }
.article-download h2 { font-size:24px; margin:0 0 8px }
.article-download p { margin:0; color:var(--text-secondary) }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:25; display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:calc(100vw - 36px); min-height:56px; padding:14px 20px; border-radius:var(--r-lg); background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-cta); text-decoration:none; font-size:14px; font-weight:600 }
.dl-fab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-accent) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border-radius:var(--r-lg); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--bg); color:var(--text); font-size:14px }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; vertical-align:top;
  border-bottom:1px solid var(--border);
  overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th { background:var(--bg-panel); color:var(--text); font-weight:600 }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse }
.prose table code,.data-table code { overflow-wrap:anywhere; white-space:normal }
@keyframes lineIn { to { opacity:1; transform:none } }
@keyframes textCursor { 0%,100% { opacity:1 } 50% { opacity:0 } }
@keyframes quietPulse { 0% { transform:scale(1); opacity:.45 } 70%,100% { transform:scale(2.6); opacity:0 } }
@keyframes tabClock { to { transform:scaleX(1) } }

/* 仅用于静态风格预览的令牌展板。 */
.preview-section { padding-top:120px; padding-bottom:40px }
.preview-section:last-child { padding-bottom:120px }
.preview-label { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); margin-bottom:12px }
.token-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.token-grid > * { min-width:0 }
.token { padding:12px; border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text) }
.token code { display:block; margin-top:10px; font-size:11px }
.swatch { display:block; height:64px; border-radius:var(--r-md); box-shadow:var(--shadow-chip) }
.sw-bg { background:var(--bg) }
.sw-panel { background:var(--bg-panel) }
.sw-panel2 { background:var(--bg-panel-2) }
.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }
.sw-accent-dark { background:var(--accent-dark) }
.sw-soft { background:var(--accent-soft) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-secondary { background:var(--text-secondary) }
.sw-faint { background:var(--text-faint) }
.sw-sketch { background:var(--sketch) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-white { background:var(--on-accent) }
.sw-dark { background:var(--chrome-dark) }
.sw-raise { background:var(--chrome-raise) }
.sw-ink { background:var(--chrome-ink) }
.sw-ink-muted { background:var(--chrome-ink-muted) }
.sw-label { background:var(--chrome-label) }
.sw-close { background:var(--tl-close) }
.sw-min { background:var(--tl-min) }
.sw-zoom { background:var(--tl-zoom) }
.sw-clear { background:var(--clear) }
.sw-veil { background:var(--veil) }
.type-display { font-family:var(--font-display); font-size:var(--size-h1); font-weight:800; line-height:1.16 }
.preview-stack { display:grid; gap:24px }
.preview-language summary { list-style:none }
.preview-language summary::-webkit-details-marker { display:none }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden }
@media (max-width:1240px) { .sketch-cat .tail { display:none } }
@media (max-width:1080px) {
  .editor { grid-template-columns:200px minmax(0,1fr) }
  .fields { display:none }
}
@media (max-width:860px) {
  .sketch,.sketch-cat { display:none }
  .lede { font-size:16px }
  .notebook { grid-template-columns:210px minmax(0,1fr) }
  .notebook [role="tabpanel"] { padding:28px }
}
@media (max-width:640px) {
  .hero { padding:20px var(--gutter) 0 }
  .editor { grid-template-columns:minmax(0,1fr) }
  .side { display:none }
  .code { font-size:12px; padding:14px 16px 14px 6px }
  .platforms { gap:4px 18px }
  .notebook { grid-template-columns:minmax(0,1fr) }
  .notebook [role="tablist"] { flex-direction:row; flex-wrap:wrap; padding:12px }
  .notebook [role="tab"] { width:auto; min-height:48px; padding:12px }
  .notebook [role="tabpanel"] { padding:24px }
  .client-card { padding:24px }
  .token-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preview-section { padding-top:80px }
  .dl-fab { right:18px; bottom:18px; padding:12px 16px }
}
@media (prefers-reduced-motion:reduce) {
  .code li { opacity:1; transform:none; animation:none }
  .caret { opacity:1; animation:none }
  .pulse::after { animation:none; opacity:0 }
  .tab-progress { display:none }
}