/* 首屏橱窗：静态，无自动播放。 */
.showcase { padding-top:40px; padding-bottom:36px; overflow-x:clip }
.rail { display:flex; justify-content:center; gap:20px }
.card {
  flex:0 0 340px; height:392px; display:flex; flex-direction:column;
  padding:24px 22px 0; border-radius:var(--r-card);
  border:1px solid var(--line-on-dark-soft); box-shadow:var(--shadow-card);
  overflow:hidden; color:var(--on-dark);
}
.tier-a { background:var(--accent); color:var(--on-dark) }
.tier-b { background:var(--card-deep); color:var(--on-dark) }
.tier-glass {
  background:linear-gradient(180deg,var(--glass-top),var(--glass-low)); color:var(--on-dark);
  border-color:var(--line-on-dark); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.card--lift { transform:translateY(-24px) }
.card-head { display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:23px; font-weight:var(--weight-regular); line-height:1.2; letter-spacing:-.005em }
.card-head svg { width:24px; height:24px; flex-shrink:0 }
.win {
  margin-top:22px; flex:1; min-width:0; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  border-radius:var(--r-window) var(--r-window) 0 0;
  box-shadow:var(--shadow-window); overflow:hidden;
}
.win-bar { position:relative; flex-shrink:0; height:32px; display:flex; align-items:center; gap:6px; padding:0 12px; background:var(--bg-panel); color:var(--text-muted); border-bottom:1px solid var(--border) }
.win-bar i { width:9px; height:9px; flex-shrink:0; border-radius:var(--r-round); display:block }
.dot-r { background:var(--error); color:var(--on-dark) }
.dot-y { background:var(--warn); color:var(--text) }
.dot-g { background:var(--success); color:var(--text) }
.win-title { position:absolute; left:0; right:0; text-align:center; font-size:11.5px; color:var(--text-muted); pointer-events:none }
.win-body { padding:16px 16px 0; font-size:12.5px; line-height:1.4; min-width:0 }
.field-label { margin:0 0 8px; font-size:11.5px; color:var(--text-muted); letter-spacing:.02em }
.seg { display:flex; gap:2px; padding:3px; border-radius:var(--r-ctl); background:var(--bg-panel-2); color:var(--text-muted) }
.seg span { flex:1; height:28px; line-height:28px; padding:0 8px; text-align:center; border-radius:var(--r-small); color:var(--text-muted); font-size:12.5px; white-space:nowrap }
.seg .on { background:var(--bg); color:var(--accent); font-weight:var(--weight-medium); box-shadow:var(--shadow-knob) }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--bg-panel-2) }
.row:last-child { border-bottom:0 }
.gap-top { margin-top:6px }
.tg { position:relative; flex-shrink:0; width:34px; height:20px; border-radius:var(--r-pill); background:var(--border); color:var(--text) }
.tg::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--r-round); background:var(--bg); color:var(--text); box-shadow:var(--shadow-knob) }
.tg.on { background:var(--accent); color:var(--on-dark) }
.tg.on::after { transform:translateX(14px) }
.input-row { display:flex; gap:8px }
.input { flex:1; min-width:0; min-height:34px; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg); color:var(--text-muted); font-size:12.5px }
.caret { width:1px; height:14px; background:var(--accent); color:var(--on-dark); flex-shrink:0 }
.mini-btn { flex-shrink:0; min-height:34px; padding:7px 15px; display:grid; place-items:center; border-radius:var(--r-ctl); background:var(--accent); color:var(--on-dark); font-size:12.5px; font-weight:var(--weight-medium) }
.note { margin:12px 0 0; font-size:11.5px; line-height:1.55; color:var(--text-muted) }
.code { margin:0; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg-panel); color:var(--text); font-family:var(--font-mono); font-size:11.5px; line-height:1.95; white-space:pre; overflow-x:auto }
.win-body--code { padding:14px 14px 0 }
pre .c-cm,pre .c-p { color:var(--text-muted) }
pre .c-key { color:var(--accent-dark) }
pre .c-type { color:var(--accent) }
pre .c-direct { color:var(--success-ink) }
.check-row { display:flex; align-items:center; gap:10px; padding-top:14px }
.ck { width:18px; height:18px; flex-shrink:0; display:grid; place-items:center; border-radius:var(--r-check); background:var(--accent); color:var(--on-dark) }
.ck svg { width:12px; height:12px }
.opt-list { display:grid; gap:8px }
.opt { display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-ctl) }
.opt.on { border-color:var(--accent); background:var(--accent-tint); color:var(--text) }
.rd { width:16px; height:16px; flex-shrink:0; border-radius:var(--r-round); border:1.5px solid var(--border-strong); background:var(--bg); color:var(--text) }
.rd.on { border-color:var(--accent); background:var(--accent); color:var(--on-dark); box-shadow:inset 0 0 0 3px var(--bg) }
.tag-alpha { display:inline-flex; align-items:center; min-height:18px; padding:2px 7px; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--accent-2a),var(--accent-2b)); color:var(--hero-top); font-size:10.5px; font-weight:var(--weight-strong); letter-spacing:.03em }
.card--l .card-head { justify-content:flex-end }
.card--l .win-title { text-align:right; padding-right:14px }
.card--l .field-label { text-align:right }
.card--l .seg { width:max-content; margin-left:auto }
.card--l .seg span { flex:none }
.card--l .row { flex-direction:row-reverse; justify-content:flex-start }

/* 资料浏览器及下载平台标签。 */
.tabs { min-width:0 }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; min-width:0 }
[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 20px; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted);
  font:inherit; font-size:15px;
}
[role="tab"]:hover { background:var(--bg-panel); color:var(--text) }
[role="tab"][aria-selected="true"] { border-color:var(--accent); background:var(--accent); color:var(--on-dark) }
[role="tabpanel"] { min-width:0; margin-top:24px }
.canvas { margin-top:36px; display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; padding:36px 40px; border-radius:var(--r-canvas); background:var(--bg-panel); color:var(--text) }
.canvas [role="tablist"] { display:flex; flex-direction:column; align-self:start; gap:4px }
.canvas [role="tab"] { justify-content:flex-start; width:100%; min-height:44px; padding:10px 0 10px 16px; border:0; border-left:3px solid var(--clear); border-radius:0; background:var(--clear); color:var(--text-muted); text-align:left }
.canvas [role="tab"][aria-selected="true"] { border-left-color:var(--accent); background:var(--clear); color:var(--accent) }
.canvas [role="tabpanel"] { margin-top:0 }
.canvas .win { margin-top:0; min-height:280px; border:1px solid var(--border); border-radius:var(--r-window); box-shadow:none }
.canvas .win-body { padding:24px; font-size:14px }
.canvas-text { margin:24px 0 0; max-width:620px; color:var(--text-muted); font-size:15px; line-height:1.8 }
.toc { position:sticky; top:16px; z-index:5; display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--r-window); background:var(--bg); color:var(--text) }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-muted); font-size:14px }
.toc a:hover { background:var(--bg-panel); color:var(--accent); text-decoration:none }
.faq-item { padding:0 24px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text) }
.faq-item summary { position:relative; padding:20px 32px 20px 0; cursor:pointer; list-style:none; font-size:17px }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; color:var(--accent) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { min-width:0; padding:28px; border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.term-card h3 { margin:0 0 8px }
.term-card .term-original { margin-bottom:16px; font:13px var(--font-mono); color:var(--text-muted) }
.term-card p:last-child { margin-bottom:0 }
.client-card { min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text) }
.client-card.is-primary { background:var(--bg-panel); color:var(--text); border-color:var(--bg-panel) }
.client-head { display:flex; align-items:center; flex-wrap:wrap; gap:16px }
.client-head img { width:56px; height:56px; flex-shrink:0 }
.client-head h3 { margin:0; font-size:24px }
.client-card p { margin-top:20px; color:var(--text-muted) }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px }
[data-rev]:empty { display:none }
[data-rev] { font:12px var(--font-mono); color:var(--text-muted) }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted); font-size:12px; overflow-wrap:anywhere; white-space:normal }
.chip--first { background:var(--accent-dark); color:var(--on-dark); border-color:var(--accent-dark) }
.chip--recommended { background:var(--bg-panel-2); color:var(--accent-dark); border-color:var(--border) }
.chip--archived { background:var(--bg-panel); color:var(--text-muted); border-color:var(--border) }
.post-card { min-width:0; padding:28px; border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--text-muted); font-size:13px }
.post-card h3 { margin:20px 0 14px; font-size:23px; line-height:1.45 }
.post-card h3 a { color:var(--text) }
.post-card p { color:var(--text-muted); font-size:15px }
.callout { margin:28px 0; padding:24px 28px; border:0; border-left:3px solid var(--accent); border-radius:0 var(--r-window) var(--r-window) 0; background:var(--bg-panel); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout--warn { border-left-color:var(--warn); color:var(--warn-ink) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--border); border-radius:var(--r-window); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; 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; text-align:left; 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:var(--weight-medium) }
.data-table tr:last-child td { border-bottom:0 }
.prose table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; min-width:0; border-collapse:collapse;
  background:var(--bg); color:var(--text);
}
.prose table code { overflow-wrap:anywhere }
.article-download { margin-top:48px; padding:32px; border-radius:var(--r-canvas); background:var(--bg-panel); color:var(--text) }
.article-download h2 { margin-top:0; font-size:26px }
.article-download p { color:var(--text-muted) }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:15;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  max-width:calc(100% - 32px); min-height:56px; padding:12px 22px;
  border:1px solid var(--line-on-dark); border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-dark); font-size:14px; font-weight:var(--weight-medium);
}
.dl-fab svg { width:20px; height:20px; flex-shrink:0 }
.dl-fab:hover { background:var(--accent-hover); color:var(--on-dark); text-decoration:none }

/* 预览页的色板仅映射令牌，不新增颜色。 */
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--r-window); background:var(--bg); color:var(--text) }
.swatch::before { content:""; display:block; height:64px; margin-bottom:10px; border-radius:var(--r-ctl); border:1px solid var(--border); background:var(--swatch-color); color:var(--text) }
.swatch code { font-size:12px }
.sw-bg { --swatch-color:var(--bg) }
.sw-panel { --swatch-color:var(--bg-panel) }
.sw-panel2 { --swatch-color:var(--bg-panel-2) }
.sw-border { --swatch-color:var(--border) }
.sw-border-strong { --swatch-color:var(--border-strong) }
.sw-accent { --swatch-color:var(--accent) }
.sw-hover { --swatch-color:var(--accent-hover) }
.sw-dark { --swatch-color:var(--accent-dark) }
.sw-tint { --swatch-color:var(--accent-tint) }
.sw-text { --swatch-color:var(--text) }
.sw-muted { --swatch-color:var(--text-muted) }
.sw-success { --swatch-color:var(--success) }
.sw-success-ink { --swatch-color:var(--success-ink) }
.sw-ring { --swatch-color:var(--success-ring) }
.sw-warn { --swatch-color:var(--warn) }
.sw-warn-ink { --swatch-color:var(--warn-ink) }
.sw-error { --swatch-color:var(--error) }
.sw-top { --swatch-color:var(--hero-top) }
.sw-mid { --swatch-color:var(--hero-mid) }
.sw-low { --swatch-color:var(--hero-low) }
.sw-a2a { --swatch-color:var(--accent-2a) }
.sw-a2b { --swatch-color:var(--accent-2b) }
.sw-deep { --swatch-color:var(--card-deep) }
.sw-white { --swatch-color:var(--on-dark) }
.sw-white-muted { --swatch-color:var(--on-dark-muted) }
.sw-white-faint { --swatch-color:var(--on-dark-faint) }
.sw-line { --swatch-color:var(--line-on-dark) }
.sw-line-soft { --swatch-color:var(--line-on-dark-soft) }
.sw-fill { --swatch-color:var(--fill-on-dark) }
.sw-fill-hover { --swatch-color:var(--fill-on-dark-hover) }
.sw-glass-top { --swatch-color:var(--glass-top) }
.sw-glass-low { --swatch-color:var(--glass-low) }
.sw-pill { --swatch-color:var(--pill-soft) }
.sw-pill-hover { --swatch-color:var(--pill-soft-hover) }
.sw-clear { --swatch-color:var(--clear) }
.preview-states { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-block:12px }
.type-display { font-size:46px; font-family:var(--font-display); font-weight:var(--weight-regular); line-height:1.18 }
.preview-language summary { list-style:none; cursor:pointer }
.preview-language summary::-webkit-details-marker { display:none }
@media (max-width:860px) {
  .showcase { padding-top:30px; padding-bottom:28px }
  .rail { justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px; padding:0 20px 6px; gap:14px; scrollbar-width:none }
  .rail::-webkit-scrollbar { display:none }
  .card { flex:0 0 min(300px,80vw); height:372px; scroll-snap-align:start }
  .card--lift { transform:none }
  .card--l .card-head { justify-content:flex-start }
  .card--l .win-title { text-align:center; padding-right:0 }
  .card--l .field-label { text-align:left }
  .card--l .seg { width:auto; margin-left:0 }
  .card--l .seg span { flex:1 }
  .card--l .row { flex-direction:row; justify-content:space-between }
  .canvas { grid-template-columns:minmax(0,1fr); gap:20px; padding:24px; border-radius:var(--r-card) }
  .canvas [role="tablist"] { flex-direction:row; flex-wrap:wrap; gap:4px 12px }
  .canvas [role="tab"] { width:auto; padding:10px 12px; border-left:0; border-bottom:3px solid var(--clear) }
  .canvas [role="tab"][aria-selected="true"] { border-bottom-color:var(--accent) }
}
@media (max-width:640px) {
  .client-card,.term-card,.post-card { padding:24px }
  .toc { position:static }
  .callout { padding:20px }
  .faq-item { padding-inline:16px }
  .dl-fab { right:16px; bottom:16px; min-height:48px; padding:10px 18px }
  .article-download { padding:24px }
  .type-display { font-size:30px }
  .canvas .win-body { padding:16px }
}