/* 已确认首屏：自然高度、居中排版、三张客户端入口卡。 */
.hero { isolation:isolate; overflow:hidden; padding-top:64px; padding-bottom:56px; text-align:center; background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 58%,var(--bg-soft) 100%); color:var(--text); }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:30px; max-width:100%; margin-bottom:24px; padding:5px 14px 5px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text-muted); box-shadow:var(--shadow-xs); font-size:13px; font-weight:500; line-height:1.4; }
.badge b { font-weight:600; color:var(--text); }
.badge__dot { position:relative; width:7px; height:7px; border-radius:var(--r-dot); background:var(--accent); flex-shrink:0; }
.hero__title { margin:0 auto 18px; font-family:var(--font-display); font-size:clamp(26px,1rem + 2.3vw,48px); font-weight:900; line-height:1.1; letter-spacing:-.02em; color:var(--text); }
.hero__title>span { display:block; }
.hero__lead { margin:0 auto 28px; max-width:780px; font-size:17px; line-height:1.6; color:var(--text-muted); }
.hero__lead strong { color:var(--text); font-weight:600; }
.hero__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:24px; }
.platforms { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; list-style:none; padding:0; margin:0 0 52px; row-gap:12px; }
.platforms li { display:flex; align-items:center; }
.platforms li+li::before { content:""; width:1px; height:14px; margin-inline:18px; background:var(--border); flex-shrink:0; }
.platforms a { display:inline-flex; align-items:center; gap:8px; padding-top:2px; padding-bottom:2px; color:var(--text-muted); font-size:13.5px; font-weight:500; line-height:18px; text-decoration:none; }
.platforms a:hover { color:var(--text); }
.platforms svg { width:16px; height:16px; flex-shrink:0; }
.device { position:relative; }
.horizon { position:absolute; z-index:-1; pointer-events:none; width:1600px; height:600px; left:50%; top:-190px; transform:translateX(-50%); opacity:.8; mask-image:radial-gradient(ellipse at center,var(--mask-show) 10%,var(--mask-hide) 72%); }
.horizon svg { width:100%; height:100%; }
.horizon path { fill:none; stroke:var(--grid-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.horizon .g-horizon { stroke:var(--grid-horizon); }
.entry-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:left; }
.entry { position:relative; display:block; height:228px; padding:26px 24px 24px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); transform:translateY(0); transition:transform .3s var(--ease-ui); text-decoration:none; }
.entry::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:var(--shadow-card-hover); opacity:0; transition:opacity .3s ease; }
.entry:hover { transform:translateY(-4px); text-decoration:none; }
.entry:hover::before { opacity:1; }
.entry__body { position:relative; display:flex; flex-direction:column; width:calc(100% - 197px); height:100%; min-width:0; }
.entry__name { font-family:var(--font-display); font-weight:800; font-size:21px; line-height:1.15; letter-spacing:-.02em; color:var(--text); }
.entry__note { margin-top:7px; font-size:12px; font-weight:500; line-height:1.45; color:var(--text-muted); }
.entry__desc { margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--text-muted); }
.entry__go { display:inline-flex; align-items:center; gap:6px; margin-top:auto; color:var(--accent-dark); font-size:13px; font-weight:600; line-height:18px; }
.entry__go svg { width:14px; height:14px; flex-shrink:0; }
.mw { position:absolute; top:22px; right:20px; bottom:0; width:184px; overflow:hidden; border:1px solid var(--border); border-bottom:0; border-radius:var(--r-float) var(--r-float) 0 0; background:var(--surface); color:var(--text); box-shadow:var(--shadow-window); }
.mw__bar { position:relative; display:flex; align-items:center; gap:5px; height:26px; padding-inline:9px; border-bottom:1px solid var(--border); background:var(--bg-soft); color:var(--text-muted); }
.mw__dot { width:7px; height:7px; border-radius:var(--r-dot); flex-shrink:0; }
.mw__dot--r { background:var(--error); }
.mw__dot--y { background:var(--warn); }
.mw__dot--g { background:var(--success); }
.mw__title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--font-mono); font-size:10px; line-height:1; color:var(--text-muted); }
.mw__body { padding:10px 12px; }
.mw__cap { margin-bottom:2px; color:var(--text-muted); font-size:10px; font-weight:600; line-height:14px; letter-spacing:.04em; }
.mw__row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; padding-bottom:8px; border-bottom:1px solid var(--bg-panel-2); color:var(--text); font-size:11.5px; font-weight:500; line-height:16px; }
.mw__row:last-child { border-bottom:0; }
.mw__row--stack { flex-direction:column; align-items:stretch; gap:6px; }
.mw__select { display:flex; align-items:center; justify-content:space-between; min-height:24px; padding:3px 7px 3px 8px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg); color:var(--text); font-size:11px; font-weight:500; }
.sw { position:relative; width:26px; height:15px; border-radius:var(--r-pill); background:var(--border-strong); flex-shrink:0; }
.sw::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:var(--r-dot); background:var(--surface); box-shadow:var(--shadow-knob); }
.sw--on { background:var(--ink); }
.sw--on::after { transform:translateX(11px); }
.op { position:absolute; right:-12px; bottom:24px; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; background:var(--ink); color:var(--ink-text); border:1px solid var(--ink-line); border-radius:var(--r-float); box-shadow:var(--shadow-float); font-size:12.5px; font-weight:500; line-height:16px; }
.op__check { display:grid; place-items:center; width:15px; height:15px; border-radius:var(--r-check); background:var(--accent); color:var(--on-accent); flex-shrink:0; }
.op__check svg { width:10px; height:10px; }
.hotline { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:32px; }
.hotline__label { margin-right:4px; color:var(--text-muted); font-size:13px; font-weight:500; }
.chip,.tag { display:inline-flex; align-items:center; min-height:30px; max-width:100%; padding:5px 13px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:12.5px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.chip:hover { border-color:var(--border-strong); color:var(--accent-dark); text-decoration:none; }
.band { padding-top:24px; padding-bottom:80px; background:var(--ink); color:var(--ink-text); }
.band h2,.band h3 { color:var(--ink-text); }
.band__win { max-width:1120px; margin-inline:auto; overflow:hidden; border:1px solid var(--ink-line); border-radius:var(--r-card); background:var(--ink-2); color:var(--ink-text); box-shadow:var(--shadow-band); }
.band__bar { display:flex; align-items:center; gap:7px; min-height:38px; padding-inline:14px; border-bottom:1px solid var(--ink-line); }
.band__bar .mw__dot { width:9px; height:9px; }
.band__menu { display:flex; flex-wrap:wrap; gap:20px; margin-left:18px; font-size:12.5px; color:var(--ink-muted); }
.band__menu span:first-child { color:var(--ink-text); }
.band__cols { display:grid; grid-template-columns:80px 1.4fr 1.6fr 70px 1fr 1fr 1fr; gap:12px; padding:10px 18px; border-bottom:1px solid var(--ink-line); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-muted); }
.band__empty { display:grid; place-items:center; min-height:240px; padding:24px; text-align:center; font-size:13px; color:var(--ink-muted); }

/* Tab 所有权以 data-tabs 边界划分。 */
.tabs { min-width:0; }
.tabs__list,[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
[role="tab"] { min-height:44px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--text-muted); font-weight:600; text-align:left; }
[role="tab"]:hover { background:var(--bg-panel); color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--accent-soft); color:var(--accent-dark); border-color:var(--accent); }
[role="tabpanel"] { min-width:0; scroll-margin-top:96px; }
.feature-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:40px; align-items:start; }
.feature-tabs { display:flex; flex-direction:column; gap:0; }
.feature-tabs [role="tab"] { position:relative; width:100%; padding:22px 20px; border:0; border-left:3px solid var(--clear); border-radius:var(--r-check); background:var(--bg); color:var(--text-muted); font-size:28px; font-weight:800; }
.feature-tabs [role="tab"][aria-selected="true"] { border-left-color:var(--accent); background:var(--bg); color:var(--text); }
.feature-canvas { min-width:0; padding:36px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); }
.setting-window { margin:12px auto 32px; max-width:400px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-float); box-shadow:var(--shadow-window); overflow:hidden; }
.setting-window .mw__bar { height:34px; }
.setting-window__body { padding:20px; }
.setting-window .mw__row { font-size:14px; padding-top:14px; padding-bottom:14px; }
.feature-canvas p { margin-bottom:0; color:var(--text-muted); font-size:15px; line-height:1.85; }
.toc { position:sticky; top:var(--header-height); z-index:20; padding-top:12px; padding-bottom:12px; border-block:1px solid var(--border); background:var(--bg); color:var(--text); }
.toc ul { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.toc a { display:block; padding:8px 12px; border-radius:var(--r-control); color:var(--text-muted); font-size:14px; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--accent-soft); color:var(--accent-dark); text-decoration:none; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary { position:relative; display:block; padding:22px 36px 22px 0; font-size:17px; font-weight:700; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:22px; color:var(--text-muted); font-size:20px; line-height:1.4; }
.faq-item[open] summary::after { content:"−"; }
.faq-item__body { padding-bottom:24px; max-width:800px; color:var(--text-muted); }
.faq-item__body p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.term-card__category { display:block; margin-bottom:16px; color:var(--text-muted); font-size:12px; }
.term-card__name { font-family:var(--font-mono); font-size:22px; }
.term-card p { margin-bottom:0; color:var(--text-muted); }
.client-card { padding:30px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.client-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:20px; }
.client-card__icon { width:56px; height:56px; flex-shrink:0; }
.client-card__head h3 { margin:0; }
.client-card__version { margin-left:auto; font-family:var(--font-mono); color:var(--text-muted); font-size:13px; overflow-wrap:anywhere; }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.status-badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 9px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--text-muted); font-size:12px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.status-badge--primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.status-badge--recommended { background:var(--accent-soft); color:var(--accent-dark); border-color:var(--border); }
.status-badge--retired { background:var(--bg-panel-2); color:var(--text-muted); }
.article-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px; min-width:0; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; color:var(--text-muted); font-size:12px; }
.article-card h3 { font-size:21px; line-height:1.5; }
.article-card h3 a { color:var(--text); }
.article-card p { color:var(--text-muted); font-size:14px; }
.article-card>.card__link { margin-top:auto; }
.callout { margin:28px 0; padding:22px 24px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-control); background:var(--bg-panel); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout__title { display:block; margin-bottom:8px; font-weight:700; }
.callout--warning { border-left-color:var(--warn); }
.callout--error { border-left-color:var(--error); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-control); }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:14px 18px; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; vertical-align:top; }
.data-table th,.prose table th { background:var(--bg-panel-2); color:var(--text); font-weight:600; }
.data-table td,.prose table td { background:var(--surface); color:var(--text); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; text-align:left; }
.prose table code,.data-table code { overflow-wrap:anywhere; }
.article-download { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.article-download__text { min-width:0; flex:1 1 260px; }
.article-download h2 { margin-bottom:8px; font-size:22px; }
.article-download p { margin:0; color:var(--text-muted); font-size:14px; }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:35; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:8px 16px 8px 11px; border:1px solid var(--ink-line); border-radius:var(--r-float); background:var(--ink); color:var(--ink-text); box-shadow:var(--shadow-float); font-size:14px; font-weight:600; line-height:1; text-decoration:none; transition:transform .2s ease; }
.dl-fab:hover { transform:translateY(-2px); text-decoration:none; }
.dl-fab__ico { display:grid; place-items:center; width:22px; height:22px; border-radius:var(--r-icon); background:var(--accent); color:var(--on-accent); flex-shrink:0; }
.dl-fab__ico svg { width:13px; height:13px; }
html.nav-open .dl-fab { visibility:hidden; }

/* 预览色板：文字永远在色块之外，浅灰与语义色不作正文文字色。 */
.palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; padding:10px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--text); }
.swatch__paint { display:block; height:56px; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r-check); }
.swatch code { font-size:12px; }
.paint-bg { background:var(--bg); }
.paint-soft { background:var(--bg-soft); }
.paint-panel { background:var(--bg-panel); }
.paint-panel2 { background:var(--bg-panel-2); }
.paint-glass { background:var(--bg-glass); }
.paint-surface { background:var(--surface); }
.paint-border { background:var(--border); }
.paint-strong { background:var(--border-strong); }
.paint-accent { background:var(--accent); }
.paint-dark { background:var(--accent-dark); }
.paint-accentsoft { background:var(--accent-soft); }
.paint-onaccent { background:var(--on-accent); }
.paint-text { background:var(--text); }
.paint-muted { background:var(--text-muted); }
.paint-faint { background:var(--text-faint); }
.paint-success { background:var(--success); }
.paint-warn { background:var(--warn); }
.paint-error { background:var(--error); }
.paint-ink { background:var(--ink); }
.paint-ink2 { background:var(--ink-2); }
.paint-inkline { background:var(--ink-line); }
.paint-inktext { background:var(--ink-text); }
.paint-inkmuted { background:var(--ink-muted); }
.paint-grid { background:var(--grid-line); }
.paint-horizon { background:var(--grid-horizon); }
.paint-show { background:var(--mask-show); }
.paint-hide { background:var(--mask-hide); }
.paint-clear { background:var(--clear); }
.paint-veil { background:var(--veil); }

@media (max-width:1100px) {
  .entry-cards { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}
@media (max-width:900px) {
  .band__cols { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .band__cols span:nth-child(n+5) { display:none; }
  .feature-layout { grid-template-columns:1fr; gap:24px; }
  .feature-tabs { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .feature-tabs [role="tab"] { width:auto; padding:12px 16px; font-size:20px; }
  .palette { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .hero__title { font-size:clamp(24px,4vw,30px); }
}
@media (max-width:640px) {
  .hero { padding-top:44px; padding-bottom:48px; }
  .hero__title { font-size:clamp(24px,7vw,30px); }
  .hero__lead { font-size:15px; }
  .hero__actions { flex-direction:column; align-items:stretch; max-width:320px; margin-inline:auto; }
  .platforms { column-gap:20px; row-gap:12px; }
  .platforms li+li::before { display:none; }
  .entry { height:auto; min-height:244px; padding:24px 18px; }
  .entry__body { width:46%; }
  .entry__note { overflow-wrap:break-word; }
  .mw { width:46%; right:12px; }
  .mw__body { padding:10px 8px; }
  .op { right:-4px; }
  .badge { font-size:11px; gap:8px; }
  .band__menu { gap:12px; }
  .band__menu span:nth-child(n+4) { display:none; }
  .band__cols { grid-template-columns:repeat(3,minmax(0,1fr)); font-size:10px; gap:8px; padding-inline:12px; }
  .band__cols span:nth-child(n+4) { display:none; }
  .feature-canvas { padding:20px; }
  .client-card,.term-card,.article-card { padding:22px; }
  .client-card__actions { flex-direction:column; align-items:stretch; }
  .palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dl-fab { right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .entry:hover,.dl-fab:hover { transform:none; }
}