/* 晴空场与设置窗是独立静态装置，不对正文长卡片施加倾斜。 */
.hero-scene { overflow-x: clip; }
.sky {
  position: relative; display: flow-root;
  background: linear-gradient(180deg, var(--c-sky-top) 0%, var(--c-sky) 46%, var(--c-sky-bottom) 100%);
  color: var(--c-ink);
}
.sky-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud { position: absolute; filter: blur(8px); }
.cloud--left {
  left: -170px; bottom: 150px; width: 640px; height: 280px; opacity: .9;
  background:
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 0 90px / 340px 190px no-repeat,
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 170px 10px / 310px 230px no-repeat,
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 340px 100px / 300px 170px no-repeat;
}
.cloud--right {
  right: -150px; top: 270px; width: 600px; height: 260px; opacity: .78;
  background:
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 0 100px / 300px 160px no-repeat,
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 150px 20px / 320px 220px no-repeat,
    radial-gradient(closest-side, var(--c-cloud), var(--c-cloud-0)) 320px 80px / 280px 180px no-repeat;
}
.hero-copy { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 28px 24px 0; text-align: center; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px;
  max-width: 100%; padding: 5px 16px 5px 13px;
  border-radius: var(--r-pill); background: var(--c-glass); color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-glass-line), 0 1px 2px var(--sh-tint-1);
  font-size: var(--fs-sm); font-weight: var(--weight-semibold); line-height: 1.5;
  overflow-wrap: anywhere;
}
.badge-dot { width: 8px; height: 8px; flex: none; border-radius: var(--r-circle); background: var(--c-success); box-shadow: 0 0 0 4px var(--c-success-halo); }
.badge-sep { color: var(--c-muted); font-weight: var(--weight-medium); }
.hero-title { margin: 18px 0 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: var(--weight-display); line-height: 1.12; letter-spacing: -.02em; color: var(--c-ink); }
.hero-title > span { display: block; }
.hero-title em { font-style: normal; color: var(--c-accent); }
.hero-desc { max-width: 720px; margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--c-muted); }
.hero-desc strong { color: var(--c-ink); font-weight: var(--weight-bold); }
.platforms { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.platforms li { min-width: 0; }
.platforms a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 15px 5px 12px;
  border-radius: var(--r-pill); background: var(--c-glass); color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-glass-line);
  font-size: var(--fs-sm); font-weight: var(--weight-semibold); line-height: 1.5; text-decoration: none;
}
.platforms svg { width: 15px; height: 15px; flex: none; }
.platforms .ico-tux { width: 14px; height: 16px; }
.rig {
  position: relative; z-index: 3; width: 1098px; height: 520px;
  left: 50%; margin: 30px 0 -136px -549px; line-height: 1.5;
}
.win {
  position: absolute; left: 0; top: 0; width: 880px;
  border-radius: var(--r-win); background: var(--c-panel); color: var(--c-ink); box-shadow: var(--shadow-win);
  transform: perspective(2200px) rotateX(9deg) rotate(-1deg); transform-origin: 50% 100%;
}
.win-bar {
  position: relative; display: flex; align-items: center; height: 44px; padding: 0 18px;
  border-bottom: 1px solid var(--c-border); border-radius: var(--r-win) var(--r-win) 0 0;
  background: linear-gradient(180deg, var(--c-panel), var(--c-panel-2)); color: var(--c-ink);
}
.win-dots { display: flex; gap: 8px; }
.win-dots i { display: block; width: 12px; height: 12px; border-radius: var(--r-circle); flex: none; }
.d-close { background: var(--c-error); }
.d-min { background: var(--c-warn); }
.d-max { background: var(--c-success); }
.win-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-sm); font-weight: var(--weight-bold); letter-spacing: -.005em; }
.win-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.side {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 12px;
  background: var(--c-panel-2); color: var(--c-muted); border-right: 1px solid var(--c-border);
  border-radius: 0 0 0 var(--r-win);
}
.side-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--r-item); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.side-item svg { width: 16px; height: 16px; flex: none; }
.side-item.is-on { background: var(--c-panel); color: var(--c-ink); font-weight: var(--weight-bold); box-shadow: 0 0 0 1px var(--c-border), 0 3px 8px -4px var(--sh-tint-2); }
.side-foot { margin-top: auto; padding: 11px 12px; border-radius: var(--r-medium); background: var(--c-panel); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-border); }
.side-foot small { display: block; font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--c-muted); }
.side-foot b { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold); }
.pane { min-width: 0; padding: 22px 40px 22px 28px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.pane-title { font-size: var(--fs-lead); font-weight: var(--weight-heavy); letter-spacing: -.01em; }
.pane-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--c-panel-2); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-border); }
.pane-tabs span { padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--weight-semibold); }
.pane-tabs .is-on { background: var(--c-panel); color: var(--c-ink); box-shadow: 0 1px 3px var(--sh-tint-2); }
.pane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 16px; margin-top: 18px; align-items: start; }
.fld-label { display: flex; align-items: center; height: 20px; margin-bottom: 8px; font-size: 12.5px; font-weight: var(--weight-bold); letter-spacing: .02em; color: var(--c-muted); }
.opts { padding: 4px; border-radius: var(--r-group); background: var(--c-panel-2); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-border); }
.opt { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: var(--r-item); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.radio { position: relative; flex: none; width: 16px; height: 16px; border-radius: var(--r-circle); background: var(--c-panel); box-shadow: inset 0 0 0 1.5px var(--c-track); }
.opt.is-on { background: var(--c-panel); color: var(--c-ink); font-weight: var(--weight-bold); box-shadow: 0 0 0 1px var(--c-border), 0 3px 8px -4px var(--sh-tint-2); }
.opt.is-on .radio { box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.opt.is-on .radio::after { content: ""; position: absolute; inset: 4px; border-radius: var(--r-circle); background: var(--c-accent); }
.select { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px 0 14px; border-radius: var(--r-field); background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); font-size: var(--fs-sm); font-weight: var(--weight-bold); }
.select svg { width: 14px; height: 14px; color: var(--c-muted); }
.menu { margin-top: 6px; padding: 4px; border-radius: var(--r-medium); background: var(--c-panel); color: var(--c-muted); box-shadow: var(--shadow-menu); }
.menu-item { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border-radius: var(--r-small); font-size: 13.5px; font-weight: var(--weight-medium); }
.menu-item svg { width: 14px; height: 14px; }
.menu-item.is-on { background: var(--c-accent-soft); color: var(--c-ink); font-weight: var(--weight-bold); }
.menu-item.is-on svg { color: var(--c-accent); }
.field, .toggle-row { display: flex; align-items: center; justify-content: space-between; height: 46px; border-radius: var(--r-field); background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-border), 0 1px 2px var(--sh-tint-1); }
.field { padding: 0 8px 0 14px; }
.field-val { font-family: var(--font-mono); font-size: 15px; font-weight: var(--weight-semibold); letter-spacing: .02em; }
.field-tag { padding: 4px 8px; border-radius: var(--r-tag); background: var(--c-panel-2); color: var(--c-muted); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); }
.toggle-row { padding: 0 12px 0 14px; font-size: var(--fs-sm); font-weight: var(--weight-bold); }
.switch { position: relative; flex: none; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--c-track); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--c-panel); box-shadow: 0 1px 3px var(--sh-tint-3); }
.switch.is-on { background: var(--c-accent); }
.switch.is-on::after { transform: translateX(18px); }
.pane-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.mini-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--weight-bold); }
.mini-ghost { color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-border); }
.mini-solid { background: var(--c-ink); color: var(--c-panel); }
.phone {
  position: absolute; left: 846px; top: 50px; width: 252px; height: 470px; padding: 10px 14px 0;
  border-radius: var(--r-phone); background: var(--c-panel); color: var(--c-ink); box-shadow: var(--shadow-phone);
  overflow: hidden; transform: perspective(1800px) rotateX(6deg) rotate(5deg); transform-origin: 50% 60%;
}
.ph-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 22px; padding: 0 6px; }
.ph-cam { width: 9px; height: 9px; border-radius: var(--r-circle); background: var(--c-ink); }
.ph-icons { justify-self: end; display: flex; align-items: center; gap: 5px; color: var(--c-ink); }
.ph-icons svg { display: block; }
.ph-bar { display: flex; align-items: center; gap: 10px; height: 50px; }
.ph-bar svg { width: 18px; height: 18px; flex: none; }
.ph-title { font-size: var(--fs-lead); font-weight: var(--weight-heavy); letter-spacing: -.01em; }
.ph-app { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); color: var(--c-muted); }
.ph-label { margin: 6px 2px 8px; font-size: 11.5px; font-weight: var(--weight-bold); letter-spacing: .04em; color: var(--c-muted); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: var(--r-pill); background: var(--c-panel-2); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-border); }
.seg span { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: var(--r-pill); font-size: 13px; font-weight: var(--weight-semibold); }
.seg .is-on { background: var(--c-accent); color: var(--c-ink); font-weight: var(--weight-bold); box-shadow: 0 6px 12px -6px var(--c-accent-glow); }
.ph-list { margin-top: 16px; padding: 0 12px; border-radius: var(--r-list); background: var(--c-panel-2); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-border); }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; border-bottom: 1px solid var(--c-border); }
.ph-row:last-child { border-bottom: 0; }
.ph-row b { display: block; font-size: 13.5px; font-weight: var(--weight-bold); }
.ph-row small { display: block; margin-top: 2px; font-size: 11px; color: var(--c-muted); }
.ph-val { display: flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); }
.chev { width: 14px; height: 14px; flex: none; color: var(--c-muted); }

/* 拼贴下载入口 */
.dl { position: relative; z-index: 1; background: var(--c-panel); color: var(--c-ink); padding: 220px 24px 120px; }
.dl-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.dl-head h2 { margin: 0; }
.dl-head p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--c-muted); }
.dl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.dl-grid > * { min-width: 0; }
.dl-card {
  position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 34px 36px;
  border-radius: var(--r-card); box-shadow: 0 1px 2px var(--sh-tint-1);
  transition: transform var(--duration-normal) var(--ease);
}
.dl-card:hover { transform: translateY(-4px); }
.dl-card--win { grid-column: span 7; background: var(--c-ink-card); color: var(--c-panel); }
.dl-card--and { grid-column: span 5; background: var(--c-accent-soft); color: var(--c-ink); }
.dl-card--mac { grid-column: span 5; background: var(--c-sky-card); color: var(--c-ink); }
.dl-card--lnx { grid-column: span 7; background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-border); }
.dl-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-icon); background: var(--c-panel); color: var(--c-ink); box-shadow: 0 1px 2px var(--sh-tint-2); }
.dl-ico svg { width: 22px; height: 22px; }
.dl-ico .ico-tux { width: 20px; height: 23px; }
.dl-card--win .dl-ico { background: var(--c-on-ink-soft); color: var(--c-panel); box-shadow: none; }
.dl-card--lnx .dl-ico { background: var(--c-panel-2); color: var(--c-ink); box-shadow: none; }
.dl-card h3 { margin: 22px 0 4px; font-size: var(--fs-h3); font-weight: var(--weight-display); }
.dl-client { font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold); color: var(--c-muted); }
.dl-card p { max-width: 460px; margin: 14px 0 26px; font-size: 15.5px; line-height: 1.7; color: var(--c-muted); }
.dl-card--win .dl-client, .dl-card--win p { color: var(--c-on-ink-muted); }

/* Tab 的 data-tabs 根限定作用域，可在同一页放置多组。 */
.tab-toolbar { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 32px; }
[role="tablist"] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
[role="tab"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px;
  border: 0; border-radius: var(--r-pill); background: var(--c-panel-2); color: var(--c-ink);
  font-size: var(--fs-sm); font-weight: var(--weight-semibold); line-height: 1.5;
}
[role="tab"][aria-selected="true"] { background: var(--c-accent); color: var(--c-ink); font-weight: var(--weight-bold); }
[role="tabpanel"] { min-width: 0; }
.tab-arrows { display: flex; gap: 8px; flex: none; margin-left: auto; }
.round-control { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-circle); background: var(--c-panel-2); color: var(--c-ink); font-size: var(--fs-h3); }
.feature-rail {
  display: flex; gap: 20px; overflow-x: auto; max-width: 100%; padding: 6px 2px 24px;
  scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: thin;
}
.feature-card {
  display: flex; flex-direction: column; flex: 0 0 420px; min-width: 0; padding: 36px;
  border-radius: var(--r-card); box-shadow: var(--shadow-soft); scroll-snap-align: start;
  background: var(--c-panel); color: var(--c-ink);
  transition: transform var(--duration-normal) var(--ease);
}
.feature-card:hover { transform: translateY(-4px); }
.feature-card:nth-child(4n+1) { background: var(--c-ink-card); color: var(--c-panel); }
.feature-card:nth-child(4n+2) { background: var(--c-sky-card); color: var(--c-ink); }
.feature-card:nth-child(4n+3) { background: var(--c-accent-soft); color: var(--c-ink); }
.feature-card:nth-child(4n) { background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-border); }
.feature-card > svg { width: 32px; height: 32px; margin-bottom: 24px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card .feature-sub { font-weight: var(--weight-semibold); }
.feature-card p { font-size: 15px; line-height: 1.8; }
.feature-card .pill-link { margin-top: auto; }
.toc {
  position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; margin-bottom: 32px; border: 1px solid var(--c-border); border-radius: var(--r-group);
  background: var(--c-panel); color: var(--c-ink); box-shadow: var(--shadow-soft);
}
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-sm); }
.toc a:hover, .toc a[aria-current="location"] { background: var(--c-panel-2); color: var(--c-ink); }
.faq-item { margin-bottom: 12px; padding: 0 24px; border: 1px solid var(--c-border); border-radius: var(--r-win); background: var(--c-panel); color: var(--c-ink); }
.faq-item summary { position: relative; padding: 22px 32px 22px 0; font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 18px; font-size: var(--fs-h3); color: var(--c-muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: 24px; color: var(--c-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { padding: 28px; border-radius: var(--r-card); background: var(--c-sky-card); color: var(--c-ink); }
.term-card h3 { margin-bottom: 8px; }
.term-card .term-en { display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-muted); }
.term-card p { margin-bottom: 18px; }
.tag, .status {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--c-panel-2); color: var(--c-muted);
  font-size: var(--fs-xs); font-weight: var(--weight-bold); line-height: 1.6;
  overflow-wrap: anywhere; white-space: normal;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-circle); flex-shrink: 0; background: var(--c-success); }
.tag--first, .tag--recommended { background: var(--c-ink); color: var(--c-panel); }
.tag--retired { background: var(--c-panel-2); color: var(--c-muted); border: 1px dashed var(--c-border); }
.client-card { padding: 32px; border-radius: var(--r-card); background: var(--c-panel-2); color: var(--c-ink); box-shadow: var(--shadow-soft); }
.client-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.client-head > div { min-width: 0; }
.client-head h3 { margin: 0 0 6px; }
.app-icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-notes { margin-top: 20px; color: var(--c-muted); font-size: var(--fs-sm); }
.article-card { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); background: var(--c-panel-2); color: var(--c-ink); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-size: var(--fs-xs); color: var(--c-muted); }
.article-card h3 { font-size: var(--fs-h3); line-height: 1.4; }
.article-card h3 a { text-decoration: none; }
.article-card p { color: var(--c-muted); }
.article-card > .pill-link { margin-top: auto; }
.callout { margin: 28px 0; padding: 24px 28px; border-left: 4px solid var(--c-border); border-radius: var(--r-group); background: var(--c-sky-card); color: var(--c-ink); }
.callout p:last-child { margin-bottom: 0; }
.callout--warning { background: var(--c-panel-2); color: var(--c-ink); border-left-color: var(--c-warn); }
.callout--error { background: var(--c-panel-2); color: var(--c-ink); border-left-color: var(--c-error); }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; overscroll-behavior-inline: contain; border: 1px solid var(--c-border); border-radius: var(--r-group); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.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(--c-border);
  overflow-wrap: normal; word-break: normal; white-space: normal; vertical-align: top;
}
.data-table th, .prose table th, .article-body table th { background: var(--c-panel-2); color: var(--c-ink); font-weight: var(--weight-bold); }
.data-table td, .prose table td, .article-body table td { background: var(--c-panel); color: var(--c-ink); }
.data-table tr:last-child td { border-bottom: 0; }
.prose table, .article-body table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0; border-collapse: collapse; text-align: left;
  overscroll-behavior-inline: contain;
}
.download-guide {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  margin-top: 48px; padding: 28px 32px; border-radius: var(--r-card);
  background: var(--c-sky-card); color: var(--c-ink);
}
.download-guide > div { flex: 1 1 240px; min-width: 0; }
.download-guide h2, .download-guide h3 { margin-bottom: 8px; font-size: var(--fs-h3); }
.download-guide p { margin: 0; color: var(--c-muted); }
.dl-fab {
  position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 20px 10px 16px;
  border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-panel);
  font-size: 15px; font-weight: var(--weight-bold); line-height: 1.5; text-decoration: none;
  box-shadow: 0 2px 0 var(--c-ink-soft), 0 16px 30px -14px var(--sh-tint-3);
  transition: transform var(--duration-fast) var(--ease);
}
.dl-fab svg { width: 17px; height: 17px; flex: none; }
.dl-fab:hover { transform: translateY(-2px); }

/* 无脚本设计预览：色板映射全部通过令牌，不写行内样式。 */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.swatch { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-group); background: var(--c-panel); color: var(--c-ink); }
.swatch-chip { height: 64px; border-radius: var(--r-small); box-shadow: inset 0 0 0 1px var(--c-border); }
.swatch figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.swatch-sky { background: var(--c-sky); }
.swatch-sky-top { background: var(--c-sky-top); }
.swatch-sky-bottom { background: var(--c-sky-bottom); }
.swatch-panel { background: var(--c-panel); }
.swatch-panel-2 { background: var(--c-panel-2); }
.swatch-border { background: var(--c-border); }
.swatch-accent { background: var(--c-accent); }
.swatch-accent-dark { background: var(--c-accent-dark); }
.swatch-accent-soft { background: var(--c-accent-soft); }
.swatch-accent-glow { background: var(--c-accent-glow); }
.swatch-ink { background: var(--c-ink); }
.swatch-ink-soft { background: var(--c-ink-soft); }
.swatch-ink-card { background: var(--c-ink-card); }
.swatch-sky-card { background: var(--c-sky-card); }
.swatch-muted { background: var(--c-muted); }
.swatch-faint { background: var(--c-faint); }
.swatch-success { background: var(--c-success); }
.swatch-success-halo { background: var(--c-success-halo); }
.swatch-warn { background: var(--c-warn); }
.swatch-error { background: var(--c-error); }
.swatch-edge { background: var(--c-edge); }
.swatch-edge-deep { background: var(--c-edge-deep); }
.swatch-track { background: var(--c-track); }
.swatch-glass { background: linear-gradient(var(--c-glass), var(--c-glass)), var(--c-sky); }
.swatch-glass-line { background: linear-gradient(var(--c-glass-line), var(--c-glass-line)), var(--c-sky); }
.swatch-cloud { background: linear-gradient(var(--c-cloud), var(--c-cloud)), var(--c-sky); }
.swatch-cloud-0 { background: var(--c-cloud-0); }
.swatch-on-ink-muted { background: linear-gradient(var(--c-on-ink-muted), var(--c-on-ink-muted)), var(--c-ink); }
.swatch-on-ink-soft { background: linear-gradient(var(--c-on-ink-soft), var(--c-on-ink-soft)), var(--c-ink); }
.swatch-veil { background: var(--c-veil); }
.swatch-clear { background: var(--c-clear); }
.swatch-shadow-1 { background: var(--sh-tint-1); }
.swatch-shadow-2 { background: var(--sh-tint-2); }
.swatch-shadow-3 { background: var(--sh-tint-3); }
.demo-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-block: 12px; }
.type-sample { padding-block: 24px; border-bottom: 1px solid var(--c-border); }
.type-display { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--weight-display); line-height: 1.2; }
.type-mono { font-family: var(--font-mono); }
.demo-tabs { margin-bottom: 24px; }
.demo-label { color: var(--c-muted); font-size: var(--fs-sm); }

@media (max-width: 1240px) {
  .rig { transform: scale(.84); transform-origin: 50% 0; margin-bottom: -219px; }
}
@media (max-width: 1020px) {
  .rig { transform: scale(.62); transform-origin: 50% 0; margin-bottom: -334px; }
  .dl-card--win, .dl-card--and, .dl-card--mac, .dl-card--lnx { grid-column: span 12; }
}
@media (max-width: 768px) {
  .hero-title { font-size: 28px; }
  .tab-toolbar { align-items: flex-start; gap: 12px; }
  .tab-arrows { margin-left: 0; }
}
@media (max-width: 640px) {
  .hero-copy { padding-inline: var(--gutter); }
  .hero-desc { font-size: 15.5px; }
  .hero-title { font-size: 28px; }
  .rig { transform: scale(.33); transform-origin: 50% 0; margin-bottom: -388px; }
  .win, .phone { transform: none; }
  .dl { padding-top: 120px; padding-inline: var(--gutter); padding-bottom: 64px; }
  .dl-card { padding: 28px 24px; }
  .platforms { gap: 8px; }
  .platforms a { padding-inline: 12px; font-size: var(--fs-xs); }
  .badge { gap: 8px; font-size: var(--fs-xs); }
  .tab-toolbar { flex-wrap: wrap; }
  [role="tablist"] { justify-content: center; }
  [role="tab"] { padding-inline: 14px; }
  .feature-card { flex-basis: min(420px, 88vw); padding: 28px; }
  .toc { position: static; }
  .faq-item { padding-inline: 20px; }
  .client-card, .article-card, .term-card { padding: 24px; }
  .callout { padding: 20px; }
  .download-guide { padding: 24px; }
  .dl-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .rig { transform: scale(.275); margin-bottom: -405px; }
}