/* 首屏采用已确认的左色柱、右文案静态构图。 */
.crest { padding-top:52px; padding-bottom:118px; border-bottom:1px solid var(--border); overflow:hidden }
.lumen { position:absolute; left:0; top:0; bottom:0; width:calc((100% - var(--wrap))/2 + var(--wrap) - var(--copy-w) - 28px); display:flex; pointer-events:none }
.lumen i { flex:1 1 0; background:var(--grad-field); color:var(--text); -webkit-mask-image:linear-gradient(180deg,var(--clear) var(--t),var(--mask-on) calc(var(--t) + 230px)); mask-image:linear-gradient(180deg,var(--clear) var(--t),var(--mask-on) calc(var(--t) + 230px)) }
.lumen i:nth-child(1) { --t:0px; opacity:.74 }
.lumen i:nth-child(2) { --t:24px; opacity:.66 }
.lumen i:nth-child(3) { --t:8px; opacity:.69 }
.lumen i:nth-child(4) { --t:56px; opacity:.58 }
.lumen i:nth-child(5) { --t:88px; opacity:.5 }
.lumen i:nth-child(6) { --t:118px; opacity:.43 }
.lumen i:nth-child(7) { --t:150px; opacity:.34 }
.lumen i:nth-child(8) { --t:186px; opacity:.26 }
.lumen i:nth-child(9) { --t:222px; opacity:.17 }
.lumen i:nth-child(10) { --t:260px; opacity:.09 }
.crest-head { position:relative; z-index:2; display:flex; justify-content:flex-end }
.sheet { width:var(--copy-w); min-width:0 }
.topic-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none }
.topic-chips li { display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:2px 12px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); border:1px solid var(--border); font-size:var(--fs-chip) }
.topic-chips li:first-child::before { content:""; width:7px; height:7px; flex-shrink:0; border-radius:var(--r-circle); background:var(--grad-accent) }
.crest h1 { margin:0; font-size:var(--fs-hero); line-height:1.14; letter-spacing:-.01em; font-weight:400 }
.crest h1 .row { display:block }
.tint { background:var(--grad-accent); color:var(--clear); -webkit-background-clip:text; background-clip:text }
.lede { margin:18px 0 0; max-width:470px; font-size:var(--fs-hero-lede); line-height:1.7; color:var(--text-muted) }
.lede strong { color:var(--text); font-weight:500 }
.os-row { display:flex; flex-wrap:wrap; gap:6px 20px; margin:26px 0 0; padding:0; list-style:none }
.os-row a { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-os); line-height:22px; color:var(--text-muted); text-decoration:none }
.os-row a:hover { color:var(--text) }
.os-row svg { width:15px; height:15px }
.deck { position:relative; z-index:2; width:var(--wrap); margin:56px auto 0 }
.rim { padding:6px; border-radius:var(--r-rim); background:var(--glass); color:var(--text); border:1px solid var(--glass-edge); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.app { background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-window) }
.app-bar { display:grid; grid-template-columns:120px 1fr 120px; align-items:center; height:50px; padding:0 20px; border-bottom:1px solid var(--border) }
.app-dots { display:flex; gap:8px }
.app-dots i { width:11px; height:11px; flex-shrink:0; border-radius:var(--r-circle); background:var(--dot-gray) }
.app-title { text-align:center; font-size:var(--fs-os); color:var(--text-muted) }
.app-body { display:grid; grid-template-columns:212px minmax(0,1fr) 392px }
.app-side { display:flex; flex-direction:column; gap:2px; padding:18px 14px; background:var(--bg); color:var(--text-muted); border-right:1px solid var(--border) }
.side-item { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:var(--r-sm); font-size:var(--fs-os) }
.side-item svg { width:16px; height:16px }
.side-item.is-here { background:var(--bg-panel-2); color:var(--text) }
.side-core { margin-top:auto; display:flex; align-items:center; gap:9px; padding:12px; font-family:var(--font-mono); font-size:var(--fs-xs); border-top:1px solid var(--border) }
.side-core i { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-circle); background:var(--success); box-shadow:0 0 0 3px var(--success-ring) }
.app-main { padding:26px 30px 32px }
.main-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px }
.main-head b { font-weight:400; font-size:var(--fs-app-head) }
.main-head span { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted) }
.main-head svg { width:13px; height:13px }
.set-group { border:1px solid var(--border); border-radius:var(--r-group); background:var(--bg-panel); color:var(--text) }
.set-group + .set-group { margin-top:14px }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:58px; padding:10px 18px }
.set-row + .set-row { border-top:1px solid var(--border) }
.set-row.is-tall { min-height:76px }
.set-label { display:flex; flex-direction:column; gap:2px; min-width:0 }
.set-label b { display:flex; align-items:center; gap:8px; font-weight:500; font-size:var(--fs-sm) }
.set-label small { font-size:var(--fs-setting); color:var(--text-muted); line-height:1.5 }
.cfg-key { font-family:var(--font-mono); font-weight:400; font-size:var(--fs-key); background:var(--bg-panel-2); color:var(--text-muted); padding:1px 7px; border-radius:var(--r-xs) }
.mode-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:300px; flex-shrink:0; padding:4px; border-radius:var(--r-segment); background:var(--bg-panel-2); color:var(--text-muted) }
.mode-seg span { display:grid; place-items:center; height:34px; border-radius:var(--r-segment-inner); font-size:var(--fs-os) }
.mode-seg .is-on { background:var(--grad-accent); color:var(--bg-panel); box-shadow:0 1px 2px var(--shadow-near),0 6px 14px var(--accent-glow) }
.tog { position:relative; flex-shrink:0; width:42px; height:24px; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border) }
.tog::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:var(--r-circle); background:var(--bg-panel); box-shadow:0 1px 3px var(--shadow-far) }
.tog.is-on { background:var(--grad-accent); color:var(--text); border-color:var(--clear) }
.tog.is-on::after { transform:translateX(18px) }
.val-box { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; width:116px; height:34px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-panel); color:var(--text); font-family:var(--font-mono); font-size:var(--fs-chip) }
.val-box svg { width:14px; height:14px; color:var(--text-muted) }
.app-rules { padding:26px 26px 32px 0 }
.rule-card { height:100%; display:flex; flex-direction:column; padding:18px; border-radius:var(--r-lg); background:var(--bg); color:var(--text); border:1px solid var(--border) }
.rule-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px }
.rule-head b { display:flex; align-items:center; gap:8px; font-weight:500; font-size:var(--fs-sm) }
.rule-legend { display:flex; gap:10px; font-family:var(--font-mono); font-size:var(--fs-legend); color:var(--text-muted) }
.rule-legend span { display:inline-flex; align-items:center; gap:5px }
.rule-legend i { width:6px; height:6px; border-radius:var(--r-circle) }
.lg-p { background:var(--accent) }
.lg-d { background:var(--success) }
.lg-r { background:var(--error) }
.rule-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px }
.rule-list li { padding:8px 10px; border-radius:var(--r-sm); font-family:var(--font-mono); font-size:var(--fs-setting); line-height:1.5; overflow-wrap:anywhere }
.rule-list .arg,.rule-list .dash,.rule-list .sep { color:var(--text-muted) }
.rule-list .to-p { color:var(--accent-dark) }
.rule-list .to-d { color:var(--text-muted) }
.rule-list .is-tail { background:var(--bg-panel); color:var(--text); box-shadow:inset 2px 0 0 var(--accent),0 1px 2px var(--shadow-near) }
.rule-foot { margin-top:auto; padding-top:14px; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:var(--fs-key); color:var(--text-muted) }
.memo { position:absolute; z-index:3; top:-22px; right:-26px; width:254px; padding:14px 16px 14px 20px; border-radius:var(--r-memo); background:var(--bg-panel); color:var(--text); border:1px solid var(--border); box-shadow:0 2px 6px var(--shadow-near),0 18px 44px var(--shadow-far) }
.memo::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:var(--r-xs); background:var(--accent) }
.memo small { display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:var(--fs-tiny); color:var(--accent-dark) }
.memo p { margin:0; font-size:var(--fs-os); line-height:1.55 }
.factline { border-bottom:1px solid var(--border) }
.factline ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; border-left:1px solid var(--border) }
.factline li { padding:24px 26px; border-right:1px solid var(--border); min-width:0 }
.factline small { display:block; font-size:var(--fs-setting); color:var(--text-muted) }
.factline b { display:block; margin-top:4px; font-family:var(--font-mono); font-weight:400; font-size:var(--fs-button) }

/* 资料浏览器和平台切换 */
[data-tabs] { min-width:0 }
.tab-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px }
.tab-list [role="tab"] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:var(--fs-sm) }
.tab-list [role="tab"][aria-selected="true"] { background:var(--text); color:var(--bg-panel); border-color:var(--text) }
[role="tabpanel"] { min-width:0; scroll-margin-top:calc(var(--nav-h) + 24px) }
.feature-browser { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:56px; align-items:stretch }
.feature-tabs { display:flex; flex-direction:column; margin:0; gap:0 }
.feature-tabs [role="tab"] { position:relative; display:block; width:100%; text-align:left; padding:22px 24px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--bg); color:var(--text-muted) }
.feature-tabs [role="tab"]::before { content:""; position:absolute; left:0; top:20px; bottom:20px; width:3px; border-radius:var(--r-pill); background:var(--clear) }
.feature-tabs [role="tab"][aria-selected="true"] { background:var(--bg); color:var(--text) }
.feature-tabs [role="tab"][aria-selected="true"]::before { background:var(--grad-tri) }
.feature-tabs b { display:block; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:400; margin-bottom:6px }
.feature-tabs small { display:block; color:var(--text-muted); font-size:var(--fs-sm) }
.tab-progress { position:absolute; left:24px; right:24px; bottom:0; height:2px; background:var(--border); color:var(--text); overflow:hidden }
.tab-progress::after { content:""; display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--grad-accent) }
[data-autoplay-running="true"] [aria-selected="true"] .tab-progress::after { animation:tab-fill var(--tab-cycle) linear forwards }
@keyframes tab-fill { to { transform:scaleX(1) } }
.feature-frame { padding:32px; border-radius:var(--r-xl); background:var(--grad-tri); color:var(--text); display:flex; align-items:center }
.feature-inner { width:100%; min-width:0; padding:32px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-window) }
.feature-inner p { line-height:1.85 }
.feature-inner pre { margin-bottom:0 }

/* 长页、问答、卡片 */
.toc { position:sticky; top:calc(var(--nav-h) + 12px); z-index:10; display:flex; gap:8px; flex-wrap:wrap; padding:12px; margin-bottom:32px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-panel) }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 14px; font-size:var(--fs-sm); border-radius:var(--r-pill); text-decoration:none }
.toc a:hover { background:var(--bg-panel-2); color:var(--text) }
.faq-item { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); margin-bottom:12px }
.faq-item summary { position:relative; list-style:none; cursor:pointer; padding:22px 56px 22px 24px; font-weight:500 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:20px; font-size:var(--fs-h3); font-weight:400; color:var(--text-muted) }
.faq-item[open] summary::after { content:"−" }
.faq-body { padding:0 24px 24px; color:var(--text-muted) }
.faq-body p:last-child { margin-bottom:0 }
.term-card { border-top:3px solid var(--grape-soft) }
.term-card dt { font-size:var(--fs-h3); font-family:var(--font-display); margin-bottom:8px }
.term-card dd { margin:0; color:var(--text-muted) }
.term-key { display:block; margin-bottom:16px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent-dark) }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.badge,.tag { display:inline-block; max-width:100%; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text-muted); font-size:var(--fs-xs); line-height:1.6; overflow-wrap:anywhere; vertical-align:middle }
.badge-lead { background:var(--text); color:var(--bg-panel); border-color:var(--text) }
.badge-recommended { background:var(--bg-panel); color:var(--accent-dark); border-color:var(--accent) }
.badge-archived { background:var(--bg-panel-2); color:var(--text-muted); border-style:dashed }
.client-card { display:flex; flex-direction:column; gap:20px }
.client-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.client-head > div { min-width:0 }
.client-head h3 { margin-bottom:6px }
.client-icon { width:56px; height:56px; flex-shrink:0 }
.client-card p { color:var(--text-muted); margin:0 }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto }
.client-meta { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted) }
[data-version]:empty { display:none }
.post-card { display:flex; flex-direction:column; gap:16px }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:var(--fs-xs); color:var(--text-muted) }
.post-card h3 { margin:0; line-height:1.5 }
.post-card p { margin:0; color:var(--text-muted) }
.post-link { margin-top:auto; color:var(--accent-dark); font-size:var(--fs-sm) }
.callout { margin:24px 0; padding:22px 24px; border:1px solid var(--border); 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:500; color:var(--accent-dark) }
.callout-warning { border-left-color:var(--warn) }
.callout-error { border-left-color:var(--error) }
.callout-success { border-left-color:var(--success) }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--border); border-radius:var(--r-lg) }
.data-table { width:100%; border-collapse:collapse; background:var(--bg-panel); color:var(--text); font-size:var(--fs-sm) }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel-2); color:var(--text); font-weight:500 }
.data-table tr:last-child td { border-bottom:0 }
.prose table,.article-body table { display:block; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; border-collapse:collapse }
.prose table code,.article-body table code { overflow-wrap:anywhere }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-panel) }
.article-download h2 { margin:0 0 10px; font-size:var(--fs-h3) }
.article-download p { margin:0; color:var(--text-muted) }
.article-download > * { min-width:0 }
.article-download .pill-btn { flex-shrink:0 }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:25; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:calc(100% - 32px); padding:12px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--text); color:var(--bg-panel); box-shadow:var(--shadow-window); text-decoration:none; font-size:var(--fs-sm) }
.dl-fab svg { width:20px; height:20px }
.dl-fab:hover { background:var(--accent-dark); color:var(--bg-panel) }

/* 仅预览使用的令牌展示。 */
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:16px }
.swatch { padding:12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text) }
.swatch-sample { display:block; height:72px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text) }
.swatch code { color:var(--text-muted); background:var(--bg-panel) }
.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-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-faint { background:var(--text-faint) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-grape { background:var(--grape) }
.sw-grape-soft { background:var(--grape-soft) }
.sw-apricot { background:var(--apricot) }
.sw-dot { background:var(--dot-gray) }
.sw-near { background:var(--shadow-near) }
.sw-far { background:var(--shadow-far) }
.sw-glow { background:var(--accent-glow) }
.sw-ring { background:var(--success-ring) }
.sw-glass { background:var(--glass) }
.sw-glass-edge { background:var(--glass-edge) }
.sw-nav { background:var(--nav-veil) }
.sw-mask { background:var(--mask-on) }
.sw-clear { background:var(--clear) }
.sw-scrim { background:var(--scrim) }
.sw-gradient { background:var(--grad-accent) }
.sw-tri { background:var(--grad-tri) }
.sw-field { background:var(--grad-field) }
.preview-type { display:grid; gap:24px }
.preview-type p { margin:0 }
.preview-title { font-size:var(--fs-h1); font-family:var(--font-display); font-weight:400; line-height:1.2 }
.preview-small { font-size:var(--fs-sm); color:var(--text-muted) }
@media (max-width:1240px) {
  :root { --copy-w:450px }
  .app-body { grid-template-columns:180px minmax(0,1fr) 330px }
}
@media (max-width:1100px) {
  .app-body { grid-template-columns:minmax(0,1fr) }
  .app-side,.app-rules,.memo { display:none }
}
@media (max-width:980px) {
  :root { --copy-w:100% }
  .lumen { width:100%; opacity:.55 }
  .crest-head { justify-content:flex-start }
  .app-bar { grid-template-columns:70px 1fr 70px }
  .factline ul { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .factline li { border-bottom:1px solid var(--border) }
  .feature-browser { grid-template-columns:minmax(0,1fr); gap:24px }
}
@media (max-width:768px) {
  .crest h1 { font-size:var(--fs-mobile-h1) }
}
@media (max-width:640px) {
  .crest { padding-top:32px; padding-bottom:72px }
  .lede { font-size:var(--fs-button) }
  .deck { margin-top:40px }
  .rim { border-radius:var(--r-xl); padding:4px }
  .app { border-radius:var(--r-mobile-app) }
  .app-main { padding:20px 16px 24px }
  .set-row { flex-wrap:wrap; padding:12px 14px; gap:12px }
  .set-row.is-tall .mode-seg { width:100% }
  .set-label small { display:none }
  .set-label b { flex-wrap:wrap }
  .main-head { gap:12px }
  .factline li { padding:20px 12px }
  .feature-frame { padding:18px }
  .feature-inner { padding:20px }
  .feature-tabs [role="tab"] { padding:18px 20px }
  .article-download { flex-direction:column; align-items:flex-start; padding:22px }
  .dl-fab { right:16px; bottom:16px; bottom:calc(16px + env(safe-area-inset-bottom)) }
}