/* 拍板首屏：分屏托板与静态订阅窗口。 */
.hero { position:relative; z-index:3; min-height:640px; height:calc(100vh - var(--nav-h) - var(--peek)); background:var(--panel); color:var(--ink); overflow-x:clip; overflow-y:visible; }
.hero-copy { position:relative; z-index:2; width:calc(50% + 24px); height:100%; padding:0 56px 24px var(--hero-gutter); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.eyebrow { display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:32px; padding:4px 14px; border:var(--line) solid var(--border); background:var(--bg); color:var(--ink); border-radius:var(--radius); font-size:13px; font-weight:var(--weight-semibold); letter-spacing:0.02em; }
.eyebrow-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--radius-dot); background:var(--accent); }
.eyebrow-sep { color:var(--border); }
.hero-title { margin:26px 0 0; font-size:clamp(34px,3.4vw,48px); line-height:1.14; }
.hero-title .t-light { display:block; font-weight:var(--weight-light); letter-spacing:0.01em; }
.hero-title .t-heavy { display:block; font-weight:var(--weight-heavy); letter-spacing:-0.005em; color:var(--accent); }
.hero .btn { height:50px; }
.hero .btn-primary:hover { background:var(--accent); color:var(--on-dark); border-color:var(--accent); }
.hero-desc { margin:26px 0 0; max-width:540px; font-size:17px; line-height:1.72; color:var(--muted); }
.hero-desc strong { color:var(--ink); font-weight:var(--weight-semibold); }
.chip-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.row-label { margin-right:6px; font-size:12px; font-weight:var(--weight-semibold); letter-spacing:0.06em; color:var(--muted); }
.chip { display:inline-flex; align-items:center; min-height:28px; max-width:100%; padding:2px 10px; font-family:var(--font-mono); font-size:12.5px; font-weight:var(--weight-medium); color:var(--ink); background:var(--panel); border:var(--line) solid var(--border); border-radius:var(--radius); overflow-wrap:anywhere; }
.platform-row { display:flex; flex-wrap:wrap; align-items:center; gap:26px; width:100%; max-width:540px; margin:24px 0 0; padding:18px 0 0; border-top:var(--line) solid var(--border); list-style:none; }
.platform-row .row-label { margin-right:-4px; }
.platform-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--weight-medium); color:var(--muted); }
.platform-link:hover { color:var(--ink); }
.platform-link svg { width:17px; height:17px; flex-shrink:0; }
.platform-link .tux { width:16px; height:18px; }
.plate { position:absolute; z-index:4; top:0; right:0; bottom:calc(var(--ride) * -1); left:calc(50% + 24px); background:var(--panel-2); color:var(--ink); }
.plate-path { position:absolute; top:34px; left:44px; right:24px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.plate-path-mark { width:8px; height:8px; background:var(--accent); flex-shrink:0; }
.plate-path b { font-weight:var(--weight-semibold); color:var(--ink); }
.plate-path .gt { color:var(--border); }
.device { position:absolute; left:50%; bottom:72px; width:500px; transform:translateX(calc(-50% - 8px)); isolation:isolate; }
.offset-blue { position:absolute; z-index:2; top:10px; left:10px; right:-10px; bottom:-10px; background:var(--accent); }
.offset-mint { position:absolute; z-index:1; right:-22px; bottom:-22px; width:46%; height:64px; background:var(--mint); }
.win { position:relative; z-index:3; background:var(--panel); color:var(--ink); border:var(--stroke) solid var(--ink); border-radius:var(--radius); }
.win-bar { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 16px; border-bottom:var(--stroke) solid var(--ink); }
.win-title { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:var(--weight-bold); color:var(--ink); }
.win-title-glyph { width:12px; height:12px; border:var(--stroke) solid var(--ink); background:var(--accent); flex-shrink:0; }
.win-ctrls { display:flex; gap:6px; }
.win-ctrl { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:var(--stroke) solid var(--ink); color:var(--ink); }
.win-ctrl svg { width:10px; height:10px; }
.win-body { padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.field-label { display:block; margin-bottom:8px; font-size:13px; line-height:18px; font-weight:var(--weight-semibold); color:var(--ink); }
.field-box { height:40px; display:flex; align-items:center; gap:2px; padding:0 12px; background:var(--panel); color:var(--ink); border:var(--stroke) solid var(--border); border-radius:var(--radius); min-width:0; }
.field-box.is-focus { border-color:var(--accent); }
.field-caret { width:1.5px; height:18px; background:var(--accent); margin-right:2px; flex-shrink:0; }
.field-ph { font-family:var(--font-mono); font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.toggle-row { height:40px; display:flex; align-items:center; justify-content:space-between; }
.toggle-row .field-label { margin:0; }
.toggle { display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:var(--weight-semibold); color:var(--accent-dark); }
.switch { position:relative; width:46px; height:24px; background:var(--accent); border:var(--stroke) solid var(--ink); flex-shrink:0; }
.switch-knob { position:absolute; top:3px; right:3px; width:15px; height:15px; background:var(--panel); border:var(--stroke) solid var(--ink); }
.win-submit { display:flex; align-items:center; justify-content:space-between; height:54px; padding:0 24px; background:var(--ink); color:var(--on-dark); font-size:15px; font-weight:var(--weight-semibold); letter-spacing:0.02em; }
.win-submit svg { width:64px; height:16px; }
.tag-clip { position:absolute; z-index:5; top:-17px; left:-26px; display:inline-flex; align-items:center; gap:8px; min-height:32px; max-width:calc(100% + 10px); padding:4px 12px; background:var(--yellow); color:var(--ink); border:var(--stroke) solid var(--ink); border-radius:var(--radius); font-size:12.5px; font-weight:var(--weight-bold); }
.tag-clip svg { width:14px; height:14px; }
.band { position:relative; z-index:1; background:var(--indigo); color:var(--on-dark); padding:40px var(--hero-gutter) 160px; }
.band-title { margin:0; font-size:30px; line-height:1.25; font-weight:var(--weight-light); letter-spacing:0.01em; }
.band-title b { font-weight:var(--weight-heavy); color:var(--mint); letter-spacing:0; }
.band-sub { margin:14px 0 0; max-width:480px; font-size:16px; color:var(--on-indigo-soft); }

/* Tab：先在 HTML 中给出可读的初始状态，再由 tabs.js 增强。 */
.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; flex-wrap:wrap; gap:var(--space-1); margin:0 0 var(--space-3); padding:0; }
.tab,[role="tab"] { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:48px; padding:12px 20px; border:var(--stroke) solid var(--ink); border-radius:var(--radius); background:var(--panel); color:var(--muted); font-weight:var(--weight-semibold); }
.tab[aria-selected="true"],[role="tab"][aria-selected="true"] { background:var(--ink); color:var(--on-dark); }
.tab:hover { border-color:var(--accent); }
.tab-panel { min-width:0; }
.feature-tabs { display:grid; grid-template-columns:minmax(240px,0.8fr) minmax(0,1.4fr); gap:var(--space-5); align-items:start; }
.feature-tabs [role="tablist"] { flex-direction:column; gap:0; margin:0; }
.feature-tabs [role="tab"] { position:relative; width:100%; border:0; border-top:var(--line) solid var(--muted); padding:24px 20px; background:var(--clear); color:var(--ink); text-align:left; font-size:18px; }
.feature-tabs [role="tab"]:last-child { border-bottom:var(--line) solid var(--muted); }
.feature-tabs [role="tab"][aria-selected="true"] { font-weight:var(--weight-heavy); background:var(--clear); color:var(--ink); }
.feature-tabs [role="tab"][aria-selected="true"]::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); }
.tab-chevron { width:12px; height:12px; flex-shrink:0; border-right:var(--stroke) solid var(--ink); border-bottom:var(--stroke) solid var(--ink); transform:rotate(45deg); margin-right:4px; }
.flow-board { border:var(--stroke) solid var(--ink); background:var(--panel); color:var(--ink); }
.flow-bar { min-height:36px; padding:6px 20px; background:var(--mint); color:var(--ink); font-size:var(--text-sm); font-weight:var(--weight-bold); border-bottom:var(--stroke) solid var(--ink); }
.tone-mint { --template-tone:var(--mint); }
.tone-yellow { --template-tone:var(--yellow); }
.tone-orange { --template-tone:var(--orange); }
.tone-pink { --template-tone:var(--pink); }
.tone-green { --template-tone:var(--green); }
.flow-board.tone-yellow .flow-bar { background:var(--yellow); color:var(--ink); }
.flow-board.tone-orange .flow-bar { background:var(--orange); color:var(--ink); }
.flow-board.tone-pink .flow-bar { background:var(--pink); color:var(--ink); }
.flow-body { padding:var(--space-4); }
.flow-svg { width:100%; height:auto; margin-bottom:var(--space-3); color:var(--ink); }
.flow-svg .node { fill:var(--panel); stroke:var(--ink); stroke-width:1.5; }
.flow-svg .decision { fill:var(--mint); stroke:var(--ink); stroke-width:1.5; }
.flow-svg .connection { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-dasharray:5 5; }
.flow-svg text { fill:var(--ink); font-family:var(--font-body); font-size:14px; text-anchor:middle; dominant-baseline:middle; }
.template-card { min-width:0; padding:var(--space-4); background:var(--template-tone,var(--mint)); color:var(--ink); border:var(--stroke) solid var(--ink); }
.template-card .chip { background:var(--panel); color:var(--ink); }
.template-card h3 { font-family:var(--font-mono); }

/* 目录由覆盖全部章节的父容器约束；默认不吸顶。 */
.toc { padding:var(--space-3); border:var(--stroke) solid var(--ink); background:var(--panel); color:var(--ink); }
.toc-title { display:block; font-size:var(--text-sm); margin-bottom:var(--space-2); }
.toc ul { display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0; }
.toc a { display:block; padding:8px 0; color:var(--accent-dark); text-decoration:underline; text-underline-offset:4px; }
.toc-sticky { position:sticky; top:var(--space-2); z-index:8; }
.faq-item { border-top:var(--line) solid var(--muted); background:var(--panel); color:var(--ink); }
.faq-item:last-child { border-bottom:var(--line) solid var(--muted); }
.faq-item summary { position:relative; cursor:pointer; list-style:none; min-height:60px; padding:18px 48px 18px 20px; font-weight:var(--weight-bold); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:20px; top:16px; font-family:var(--font-mono); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 20px 24px; color:var(--muted); }
.term-card { border-left:4px solid var(--accent); }
.term-name { margin-bottom:var(--space-1); font-family:var(--font-mono); }
.term-category { display:block; color:var(--muted); font-size:var(--text-xs); margin-bottom:var(--space-2); }
.client-card { position:relative; }
.client-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-3); }
.client-heading h3 { margin:0; }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--space-3); }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:var(--space-2); color:var(--muted); font-size:var(--text-sm); }
.client-secondary { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); font-size:var(--text-sm); }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 9px; border:var(--line) solid var(--ink); border-radius:var(--radius); background:var(--panel-2); color:var(--ink); font-size:var(--text-xs); font-weight:var(--weight-bold); overflow-wrap:anywhere; }
.badge-primary { background:var(--accent-dark); color:var(--on-dark); border-color:var(--accent-dark); }
.badge-recommended { background:var(--ink); color:var(--on-dark); }
.badge-retired { background:var(--panel-2); color:var(--muted); border-style:dashed; }
.article-card { display:flex; flex-direction:column; align-items:flex-start; }
.article-card h3 { margin-top:var(--space-3); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:var(--text-xs); }
.article-card .card-footer { width:100%; margin-top:auto; }
.article-card p { margin-bottom:var(--space-3); color:var(--muted); }
.callout { margin:var(--space-3) 0; padding:var(--space-3); border:var(--stroke) solid var(--ink); border-left:4px solid var(--accent); background:var(--panel-2); color:var(--ink); }
.callout-title { display:block; margin-bottom:var(--space-1); font-weight:var(--weight-bold); }
.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; -webkit-overflow-scrolling:touch; border:var(--line) solid var(--border); }
.data-table { width:100%; border-collapse:collapse; background:var(--panel); color:var(--ink); text-align:left; }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em;
  padding:14px 18px;
  border-bottom:var(--line) solid var(--border);
  vertical-align:top;
  overflow-wrap:normal;
  word-break:normal;
}
.data-table th,.prose table th { background:var(--panel-2); color:var(--ink); font-weight:var(--weight-bold); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; background:var(--panel); color:var(--ink); }
.prose table code,.data-table code { overflow-wrap:anywhere; }
.prose table caption { text-align:left; font-weight:var(--weight-bold); margin-bottom:var(--space-2); }
.download-endcard { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-5); padding:var(--space-4); border:var(--stroke) solid var(--ink); border-left:4px solid var(--accent); background:var(--panel-2); color:var(--ink); }
.download-endcard > div { min-width:0; flex:1 1 260px; }
.download-endcard h2 { font-size:var(--title-3); margin-bottom:var(--space-1); }
.dl-fab { position:fixed; right:var(--space-3); bottom:var(--space-3); z-index:15; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); padding:14px 20px; border:var(--stroke) solid var(--ink); border-radius:var(--radius); background:var(--ink); color:var(--on-dark); }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.dl-fab strong { display:block; font-size:var(--text-sm); }
.dl-fab small { display:block; font-size:var(--text-xs); }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-dark); border-color:var(--accent-dark); }
.has-dl-fab { padding-bottom:100px; }

/* 预览专用展示家具，不改变正式页组件语义。 */
.spec-heading { margin-bottom:var(--space-4); }
.spec-heading p { color:var(--muted); max-width:720px; }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-2); }
.swatch { border:var(--line) solid var(--border); padding:var(--space-2); background:var(--panel); color:var(--ink); font-size:var(--text-sm); }
.swatch::before { content:""; display:block; height:64px; margin-bottom:var(--space-2); border:var(--line) solid var(--border); background:var(--swatch-color); }
.sw-bg { --swatch-color:var(--bg); }
.sw-panel { --swatch-color:var(--panel); }
.sw-panel-2 { --swatch-color:var(--panel-2); }
.sw-border { --swatch-color:var(--border); }
.sw-ink { --swatch-color:var(--ink); }
.sw-muted { --swatch-color:var(--muted); }
.sw-on-dark { --swatch-color:var(--on-dark); }
.sw-indigo-soft { --swatch-color:var(--on-indigo-soft); }
.sw-accent { --swatch-color:var(--accent); }
.sw-accent-dark { --swatch-color:var(--accent-dark); }
.sw-indigo { --swatch-color:var(--indigo); }
.sw-mint { --swatch-color:var(--mint); }
.sw-yellow { --swatch-color:var(--yellow); }
.sw-orange { --swatch-color:var(--orange); }
.sw-pink { --swatch-color:var(--pink); }
.sw-green { --swatch-color:var(--green); }
.sw-success { --swatch-color:var(--success); }
.sw-warn { --swatch-color:var(--warn); }
.sw-error { --swatch-color:var(--error); }
.sw-clear { --swatch-color:var(--clear); }
.type-display { font-size:var(--title-1); font-weight:var(--weight-heavy); line-height:1.14; }
.state-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.preview-menu summary { list-style:none; cursor:pointer; }
.preview-menu summary::-webkit-details-marker { display:none; }
.preview-menu .language-menu { display:block; }
@media (max-width:1100px) {
  .hero { height:auto; min-height:0; }
  .hero-copy { width:100%; padding:56px 24px 48px; }
  .plate { position:relative; left:auto; right:auto; top:auto; bottom:auto; height:640px; margin-bottom:calc(var(--ride) * -1); }
  .band { padding-top:calc(var(--ride) + 40px); }
  .device { width:min(500px,calc(100% - 64px)); }
  .feature-tabs { gap:var(--space-3); grid-template-columns:minmax(200px,0.8fr) minmax(0,1.4fr); }
}
@media (max-width:768px) {
  .hero-title { font-size:clamp(24px,4vw,30px); }
  .feature-tabs { grid-template-columns:minmax(0,1fr); }
  .feature-tabs [role="tablist"] { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:4px; }
  .feature-tabs [role="tab"] { flex:0 0 auto; width:auto; font-size:var(--text-sm); padding:16px; border-bottom:var(--line) solid var(--muted); }
  .flow-body { padding:var(--space-3); }
}
@media (max-width:640px) {
  .hero-copy { padding-inline:var(--gutter); }
  .device { bottom:56px; }
  .field-ph { font-size:11.5px; }
  .platform-row { flex-wrap:wrap; gap:16px; }
  .band { padding-inline:var(--gutter); }
  .band-title { font-size:24px; }
  .win-body { padding-inline:16px; }
  .tag-clip { left:-10px; font-size:11.5px; padding-inline:8px; }
  .win-title { gap:6px; font-size:12px; }
  .win-ctrls { gap:4px; }
  .win-ctrl { width:22px; height:22px; }
  .win-submit { padding-inline:16px; font-size:14px; }
  .win-submit svg { width:42px; }
  .plate-path { left:24px; right:24px; }
  .badge-row,.chip-row { flex-direction:row; flex-wrap:wrap; }
  .dl-fab { right:16px; bottom:16px; padding:12px 16px; }
  .download-endcard { padding:var(--space-3); }
}