/* 首屏参数窗口：布局与经确认的首屏保持一致。 */
.hero {
  min-height:780px; display:grid;
  grid-template-columns:minmax(0,500px) minmax(0,1fr);
  gap:40px; align-items:center;
}
.hero-copy { padding-bottom:8px; }
.hero-title { font-weight:var(--weight-normal); font-size:var(--fs-h1); line-height:1.16; letter-spacing:-.02em; }
.hero-title > span { display:block; }
.hero-title em {
  font-style:normal; color:var(--c-accent-dark);
  background:linear-gradient(var(--c-clear) 72%,var(--c-accent-soft) 72%,var(--c-accent-soft) 94%,var(--c-clear) 94%);
  padding-inline:.04em;
}
.hero-lead { margin-top:26px; max-width:30em; font-size:var(--fs-lead); line-height:1.78; color:var(--c-muted); }
.hero-lead strong { color:var(--c-text); font-weight:var(--weight-medium); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; list-style:none; }
.chip {
  display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 15px;
  border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text);
  font-size:var(--fs-label); line-height:1.5; max-width:100%; overflow-wrap:anywhere;
  transition:background var(--ease-ui);
}
.chip:hover { background:var(--c-panel-2); color:var(--c-text); }
.chip.is-picked { background:var(--c-accent-soft); color:var(--c-accent-dark); font-weight:var(--weight-medium); }
.chip svg { width:15px; height:15px; }
.ck-bg { fill:var(--c-accent-dark); }
.ck-mk { fill:none; stroke:var(--c-surface); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.platforms { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:36px; }
.platforms-label { font-size:var(--fs-sm); color:var(--c-muted); letter-spacing:.02em; margin-right:2px; }
.plat { display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-label); color:var(--c-text); transition:color var(--ease-ui); }
.plat-badge {
  width:32px; height:32px; flex-shrink:0; border-radius:var(--r-round); display:grid; place-items:center;
  background:var(--c-panel); color:var(--c-text); transition:background var(--ease-ui),color var(--ease-ui);
}
.plat-badge svg { width:15px; height:15px; }
.plat:hover { color:var(--c-accent-dark); }
.plat:hover .plat-badge { background:var(--c-accent-soft); color:var(--c-accent-dark); }
.stage { position:relative; height:690px; }
.stage-plate { position:absolute; left:116px; top:100px; right:0; bottom:0; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-tray); }
.device { position:absolute; left:40px; top:60px; width:calc(100% - 124px); transform:rotate(-1.5deg); transform-origin:50% 50%; }
.win {
  position:relative; display:grid; grid-template-columns:60px minmax(0,1fr);
  background:var(--c-surface); color:var(--c-text); border-radius:var(--r-xl); box-shadow:var(--sh-window); overflow:hidden;
}
.win-rail { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0 16px; background:var(--c-panel); color:var(--c-muted); }
.rail-mark { width:26px; height:26px; border-radius:var(--r-sm); background:var(--grad-accent); color:var(--c-text); margin-bottom:12px; display:grid; place-items:center; }
.rail-mark i { display:block; width:10px; height:10px; border-radius:var(--r-round); border:2px solid var(--c-surface); }
.rail-btn { width:36px; height:36px; border-radius:var(--r-control); display:grid; place-items:center; color:var(--c-muted); }
.rail-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rail-btn.is-on { background:var(--c-surface); color:var(--c-accent-dark); box-shadow:var(--sh-xs); }
.rail-sep { width:20px; height:1px; background:var(--c-border); margin-block:6px; }
.rail-fill { flex:1; }
.win-main { min-width:0; display:flex; flex-direction:column; }
.win-bar { display:flex; align-items:center; justify-content:space-between; padding:17px 24px 6px; }
.win-title { font-size:var(--fs-lead); font-weight:var(--weight-medium); letter-spacing:-.01em; }
.win-ctrl { display:flex; align-items:center; gap:16px; color:var(--c-muted); }
.win-ctrl svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.win-tabs { display:flex; gap:26px; padding-inline:24px; border-bottom:1px solid var(--c-border); }
.win-tab { position:relative; padding-block:12px 11px; font-size:var(--fs-ui); color:var(--c-muted); white-space:nowrap; }
.win-tab.is-on { color:var(--c-text); font-weight:var(--weight-medium); }
.win-tab.is-on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--r-line); background:var(--grad-accent); }
.sheet { --cols:1.32fr 1fr 1.28fr; padding:6px 24px 0; }
.sheet-head { display:grid; grid-template-columns:var(--cols); padding:12px 0 9px 14px; font-size:var(--fs-xs); color:var(--c-muted); letter-spacing:.02em; border-bottom:1px solid var(--c-border); }
.sheet-group { position:relative; padding-left:14px; margin-top:10px; }
.sheet-group::before { content:""; position:absolute; left:0; top:8px; bottom:6px; width:3px; border-radius:var(--r-bar); background:var(--grad-accent-v); }
.sheet-gname { font-size:var(--fs-sm); font-weight:var(--weight-medium); color:var(--c-accent-dark); padding-block:4px 5px; }
.sheet-row { display:grid; grid-template-columns:var(--cols); align-items:center; min-height:40px; font-size:var(--fs-ui); border-bottom:1px solid var(--c-border); }
.sheet-row > * { min-width:0; }
.sheet-group .sheet-row:last-child { border-bottom:0; }
.cell-desc { font-size:var(--fs-code); color:var(--c-muted); padding-right:8px; }
.field { display:inline-flex; align-items:center; gap:10px; padding:3px 10px; border-radius:var(--r-sm); background:var(--c-panel); font-family:var(--font-mono); font-size:var(--fs-code); color:var(--c-text); max-width:100%; overflow-wrap:anywhere; }
.field svg { width:10px; height:10px; fill:none; stroke:var(--c-muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tag { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); background:var(--c-accent-soft); color:var(--c-accent-dark); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--weight-medium); max-width:100%; overflow-wrap:anywhere; }
.switch { position:relative; display:inline-block; width:34px; height:20px; border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text); flex:none; vertical-align:middle; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--r-round); background:var(--c-surface); box-shadow:var(--sh-xs); }
.switch.is-on { background:var(--c-accent); color:var(--c-text); }
.switch.is-on::after { transform:translateX(14px); }
.win-foot { display:flex; justify-content:flex-end; gap:10px; padding:18px 24px 24px; }
.mini-btn { display:inline-flex; align-items:center; min-height:30px; padding:5px 18px; border-radius:var(--r-pill); font-size:var(--fs-sm); background:var(--c-panel); color:var(--c-text); }
.mini-btn.is-main { background:var(--grad-accent); color:var(--c-on-accent); font-weight:var(--weight-medium); }
.float-route {
  position:absolute; left:-56px; bottom:-100px; width:270px; padding:14px 16px 16px;
  border:2px solid var(--c-clear); border-radius:var(--r-lg);
  background:linear-gradient(var(--c-surface),var(--c-surface)) padding-box,var(--grad-accent) border-box;
  color:var(--c-text); box-shadow:var(--sh-float); transform:rotate(1deg);
}
.route-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.route-title { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-ui); font-weight:var(--weight-medium); }
.route-title i { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-success); }
.route-path { font-family:var(--font-mono); font-size:var(--fs-tiny); color:var(--c-muted); }
.route-rule { padding:8px 11px; border-radius:var(--r-md); background:var(--c-accent-softer); color:var(--c-text); font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.78; white-space:nowrap; overflow-x:auto; }
.route-rule + .route-rule { margin-top:8px; }
.route-rule .k { color:var(--c-accent-dark); }
.route-rule .s { color:var(--c-text); }
.route-rule .p { color:var(--c-muted); }
.seal { position:absolute; top:-52px; right:-36px; width:124px; height:124px; border-radius:var(--r-round); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-seal); display:grid; place-items:center; transform:rotate(1.5deg); }
.seal::before {
  content:""; position:absolute; inset:0; border-radius:var(--r-round);
  background:conic-gradient(from -90deg,var(--c-grad-from) 0deg,var(--c-grad-to) 180deg,var(--c-panel-2) 180deg,var(--c-panel-2) 360deg);
  -webkit-mask:radial-gradient(farthest-side,var(--c-clear) calc(100% - 7px),var(--c-text) calc(100% - 6.5px));
  mask:radial-gradient(farthest-side,var(--c-clear) calc(100% - 7px),var(--c-text) calc(100% - 6.5px));
  animation:seal-turn 30s linear infinite;
}
.seal::after { content:""; position:absolute; inset:15px; border-radius:var(--r-round); border:1px dashed var(--c-border); }
.seal-core { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.seal-cap { font-size:var(--fs-micro); color:var(--c-muted); letter-spacing:.16em; margin-bottom:2px; }
.seal-k { font-family:var(--font-mono); font-size:var(--fs-nav); font-weight:var(--weight-semibold); line-height:1.2; letter-spacing:-.01em; }
.seal-rule { width:18px; height:2px; border-radius:var(--r-line); background:var(--grad-accent); margin-block:2px; }
@keyframes seal-turn { to { transform:rotate(360deg); } }
.float-protos { position:absolute; right:-34px; bottom:-30px; display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-strip); }
.proto { padding:6px 11px; border-radius:var(--r-pill); background:var(--c-panel); font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-text); white-space:nowrap; }
.proto-sep { width:1px; height:18px; flex-shrink:0; background:var(--c-border); margin-inline:6px; }
.proto-flag { display:inline-flex; align-items:center; gap:8px; padding-inline:2px 6px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--weight-semibold); color:var(--c-accent-dark); }

/* 分段控件。每组由 data-tabs 划定，面板可以不紧邻 tablist。 */
.seg { display:flex; justify-content:center; margin-top:36px; min-width:0; }
.seg-list,[role="tablist"].tab-list {
  display:inline-flex; align-items:center; gap:4px; padding:6px; max-width:100%; overflow-x:auto;
  border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-soft);
}
.seg-tab,.tab-list [role="tab"] {
  flex-shrink:0; border:0; background:var(--c-clear); color:var(--c-muted); cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-nav); padding:10px 22px;
  border-radius:var(--r-pill); white-space:nowrap; min-height:44px;
  transition:color var(--ease-ui),background var(--ease-ui);
}
.seg-tab:hover,.tab-list [role="tab"]:hover { color:var(--c-text); }
.seg-tab[aria-selected="true"],.tab-list [aria-selected="true"] { background:var(--c-accent-soft); color:var(--c-accent-dark); font-weight:var(--weight-medium); }
[role="tabpanel"] { min-width:0; }
.feat { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:72px; align-items:center; margin-top:64px; }
.feat-title { font-size:var(--fs-feature); font-weight:var(--weight-normal); line-height:1.35; letter-spacing:-.015em; }
.feat-title em { color:var(--c-accent-dark); }
.feat-text { margin-top:18px; font-size:var(--fs-body); line-height:1.8; color:var(--c-muted); }
.feat-link { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:var(--fs-nav); font-weight:var(--weight-medium); color:var(--c-accent-dark); }
.feat-link svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--ease-ui); }
.feat-link:hover svg { transform:translateX(3px); }
.feature-tray { padding:32px; border-radius:var(--r-tray); background:var(--c-panel); color:var(--c-text); }
.mini { background:var(--c-surface); color:var(--c-text); border-radius:var(--r-xl); box-shadow:var(--sh-soft); padding:22px 24px 12px; }
.mini-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--c-border); }
.mini-head b { font-size:var(--fs-nav); font-weight:var(--weight-medium); }
.mini-head span { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted); }
.mini-row { display:flex; align-items:center; gap:14px; min-height:52px; padding-block:8px; border-bottom:1px solid var(--c-border); }
.mini-row:last-child { border-bottom:0; }
.radio { width:18px; height:18px; border-radius:var(--r-round); border:1.5px solid var(--c-border); flex:none; display:grid; place-items:center; }
.radio.is-on { border-color:var(--c-accent); }
.radio.is-on::after { content:""; width:8px; height:8px; border-radius:var(--r-round); background:var(--c-accent); }
.mini-name { font-family:var(--font-mono); font-size:var(--fs-ui); width:116px; flex:none; overflow-wrap:anywhere; }
.mini-note { font-size:var(--fs-ui); color:var(--c-muted); }

/* 长文与内容组件 */
.toc {
  position:sticky; top:16px; z-index:10; display:flex; gap:8px; align-items:center;
  max-width:100%; overflow-x:auto; padding:10px;
  border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-soft);
}
.toc a { display:block; flex-shrink:0; padding:10px 16px; min-height:44px; border-radius:var(--r-pill); color:var(--c-muted); font-size:var(--fs-label); white-space:nowrap; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-accent-soft); color:var(--c-accent-dark); }
.faq-item { border-radius:var(--r-lg); background:var(--c-panel); color:var(--c-text); margin-bottom:12px; }
.faq-item summary { position:relative; list-style:none; padding:22px 56px 22px 24px; cursor:pointer; font-weight:var(--weight-medium); min-height:64px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:20px; font-size:var(--fs-large); color:var(--c-accent-dark); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--c-muted); }
.faq-answer p + p { margin-top:12px; }
.term-card { padding:28px; border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-text); }
.term-card dt { font-family:var(--font-mono); font-size:var(--fs-large); }
.term-card dd { margin-top:14px; color:var(--c-muted); }
.term-card .tag { margin-top:18px; }
.client-card { padding:32px; border-radius:var(--r-xl); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-soft); }
.client-head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.app-logo { width:56px; height:56px; flex-shrink:0; }
.client-card p { margin-top:16px; color:var(--c-muted); }
.client-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; font-size:var(--fs-label); color:var(--c-muted); }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.badge {
  display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:5px 12px;
  border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text);
  font-size:var(--fs-xs); line-height:1.6; overflow-wrap:anywhere;
}
.badge-top,.badge-recommended { background:var(--c-accent-soft); color:var(--c-accent-dark); }
.badge-top::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-accent-dark); }
.badge-retired { background:var(--c-panel-2); color:var(--c-muted); }
.article-card { padding:30px; border-radius:var(--r-xl); background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-soft); transition:transform var(--ease-ui); }
.article-card:hover { transform:translateY(-3px); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px; font-size:var(--fs-sm); color:var(--c-muted); }
.article-card h3 { font-size:var(--fs-large); line-height:1.5; }
.article-card h3 a:hover { color:var(--c-accent-dark); }
.article-card p { margin-top:14px; color:var(--c-muted); }
.article-card .text-link { display:inline-block; margin-top:20px; }
.callout { padding:24px 28px; border-left:3px solid var(--c-accent); border-radius:var(--r-lg); background:var(--c-accent-softer); color:var(--c-text); }
.callout p + p { margin-top:12px; }
.callout-title { display:block; margin-bottom:8px; font-weight:var(--weight-medium); color:var(--c-accent-dark); }
.callout-warn { border-left-color:var(--c-warn); background:var(--c-panel); color:var(--c-text); }
.callout-error { border-left-color:var(--c-error); background:var(--c-panel); color:var(--c-text); }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); }
.data-table { border-collapse:collapse; width:100%; text-align:left; background:var(--c-surface); color:var(--c-text); }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--c-border);
  overflow-wrap:normal; word-break:normal; vertical-align:top;
}
.data-table th,.prose table th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-medium); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; }
.prose table :where(th,td) code { overflow-wrap:anywhere; }
.article-download { padding:32px; margin-top:48px; border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-text); }
.article-download p { margin-top:12px; color:var(--c-muted); }
.article-download .btn { margin-top:22px; }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:var(--z-fab);
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px);
  padding:14px 22px; border-radius:var(--r-pill); background:var(--grad-accent);
  color:var(--c-on-accent); box-shadow:var(--sh-strip); font-size:var(--fs-label); font-weight:var(--weight-medium);
}
.dl-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dl-fab:hover { box-shadow:var(--sh-float); }

/* 预览页专用展示家具，仍使用同一套令牌。 */
.preview-section { padding-top:80px; padding-bottom:80px; }
.preview-section h2 { margin-bottom:28px; }
.preview-stack > * + * { margin-top:24px; }
.preview-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.swatch { min-width:0; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-surface); color:var(--c-text); }
.swatch-sample { display:block; height:72px; }
.swatch code { display:block; padding:12px; font-size:var(--fs-xs); }
.sw-bg { background:var(--c-bg); }
.sw-surface { background:var(--c-surface); }
.sw-panel { background:var(--c-panel); }
.sw-panel-2 { background:var(--c-panel-2); }
.sw-border { background:var(--c-border); }
.sw-accent { background:var(--c-accent); }
.sw-accent-dark { background:var(--c-accent-dark); }
.sw-accent-soft { background:var(--c-accent-soft); }
.sw-accent-softer { background:var(--c-accent-softer); }
.sw-grad-from { background:var(--c-grad-from); }
.sw-grad-to { background:var(--c-grad-to); }
.sw-text { background:var(--c-text); }
.sw-on-accent { background:var(--c-on-accent); }
.sw-muted { background:var(--c-muted); }
.sw-success { background:var(--c-success); }
.sw-warn { background:var(--c-warn); }
.sw-error { background:var(--c-error); }
.sw-clear { background:var(--c-clear); }
.sw-veil { background:var(--c-veil); }
@media (max-width:1240px) {
  .hero { grid-template-columns:minmax(0,440px) minmax(0,1fr); }
}
@media (max-width:960px) {
  .hero { grid-template-columns:1fr; min-height:0; gap:44px; padding-top:28px; padding-bottom:64px; }
  .hero-title { font-size:clamp(26px,6.4vw,30px); line-height:1.22; }
  .hero-lead { font-size:var(--fs-body); }
  .stage { height:auto; padding:20px; border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-text); }
  .stage-plate { display:none; }
  .device { position:static; width:auto; transform:none; display:flex; flex-direction:column; gap:14px; }
  .float-route,.seal,.float-protos { position:static; transform:none; }
  .float-route { width:auto; }
  .seal { align-self:center; margin-top:6px; flex-shrink:0; }
  .float-protos { flex-wrap:wrap; border-radius:var(--r-lg); row-gap:6px; }
  .feat { grid-template-columns:1fr; gap:36px; }
  .swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .hero { padding-inline:var(--gutter); }
  .device,.float-route,.seal { transform:none; }
  .win { grid-template-columns:1fr; }
  .win-rail { display:none; }
  .win-tabs { gap:18px; overflow-x:auto; }
  .sheet { --cols:1.5fr 1fr; padding:6px 16px 0; }
  .sheet-head span:nth-child(3),.cell-desc { display:none; }
  .win-bar,.win-foot { padding-left:16px; padding-right:16px; }
  .sheet-row { gap:6px; }
  .sheet-row .tag { padding-inline:6px; font-size:var(--fs-tiny); }
  .mini-name { width:96px; }
  .mini { padding-inline:18px; }
  .mini-row { flex-wrap:wrap; gap:10px; }
  .feature-tray { padding:18px; }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-card,.article-card,.article-download { padding:24px; }
  .dl-fab { right:16px; bottom:16px; }
  .platforms { gap:8px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .seal::before { animation:none; }
}