/* 安装动作首屏：装置坐标来自已确认的桌面稿。 */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: center;
  padding-top: 24px;
  padding-bottom: 32px;
  background: var(--bg);
  color: var(--text);
}
.hero::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -22%;
  width: min(64vw, 1000px);
  height: 820px;
  background: radial-gradient(46% 48% at 36% 40%, var(--halo-apricot) 0%, var(--clear) 100%), radial-gradient(40% 44% at 64% 62%, var(--halo-mint) 0%, var(--clear) 100%);
  opacity: .95;
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; grid-template-columns: auto minmax(0, 500px); gap: 56px; align-items: center; justify-content: center; }
.stage { position: relative; z-index: 1; width: calc(680px * var(--k)); height: calc(660px * var(--k)); }
.stage::before { content: ""; position: absolute; top: calc(556px * var(--k)); left: -100vw; width: 300vw; height: 2000px; background: var(--bg-panel); color: var(--text); z-index: -1; }
.stage__canvas { position: absolute; left: 50%; top: 0; width: 680px; height: 660px; transform: translateX(-50%) scale(var(--k)); transform-origin: top center; }
.dmg { position: absolute; left: 30px; top: 226px; width: 620px; z-index: 2; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-window); overflow: hidden; }
.dmg__bar { position: relative; height: 44px; display: flex; align-items: center; gap: 8px; padding-inline: 16px; background: linear-gradient(var(--bg), var(--bg-panel)); color: var(--text); border-bottom: 1px solid var(--border); }
.tl { width: 12px; height: 12px; flex-shrink: 0; border-radius: var(--r-circle); box-shadow: inset 0 0 0 .5px var(--hairline-ink); }
.tl--r { background: var(--tl-red); color: var(--text); }
.tl--y { background: var(--tl-yellow); color: var(--text); }
.tl--g { background: var(--tl-green); color: var(--text); }
.dmg__title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.dmg__title svg { width: 15px; height: 15px; color: var(--text-faint); }
.dmg__canvas { display: block; width: 100%; height: auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-icon-a { stop-color: var(--icon-a); }
.st-icon-b { stop-color: var(--icon-b); }
.st-folder-a { stop-color: var(--folder-front-a); }
.st-folder-b { stop-color: var(--folder-front-b); }
.fds { flood-color: var(--shadow-ink); flood-opacity: .12; }
.app-bg { fill: url(#appBg); stroke: var(--border); stroke-width: 1; }
.folder-back { fill: var(--folder-back); }
.folder-front { fill: url(#folderGrad); }
.folder-edge { fill: none; stroke: var(--icon-a); stroke-opacity: .55; stroke-width: 1.2; }
.folder-glyph { fill: none; stroke: var(--folder-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svg-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; fill: var(--text); }
.svg-cap { font-family: var(--font-body); font-size: 13px; fill: var(--text-faint); }
.arc { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
.arc-head { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop { fill: var(--sky-bg); stroke: var(--sky-line); stroke-width: 1; opacity: 0; animation: install-drop 5.6s ease-in-out infinite; }
.ghost { opacity: 0; transform-box: fill-box; transform-origin: center; animation: install-drag 5.6s ease-in-out infinite; }
.ghost__bg { fill: url(#appBg); stroke: var(--border-strong); stroke-width: 1; }
.cursor { fill: var(--text); stroke: var(--bg); stroke-width: 1.2; stroke-linejoin: round; }
@keyframes install-drag {
  0%, 8% { transform: translate(0, 0) scale(1); opacity: 0; }
  14% { transform: translate(0, -6px) scale(1.04); opacity: .92; }
  32% { transform: translate(79px, -52px) scale(1.04); opacity: .92; }
  48% { transform: translate(158px, -68px) scale(1.02); opacity: .92; }
  64% { transform: translate(237px, -48px) scale(1); opacity: .92; }
  78% { transform: translate(316px, 8px) scale(.9); opacity: .92; }
  88%, 100% { transform: translate(316px, 8px) scale(.78); opacity: 0; }
}
@keyframes install-drop {
  0%, 62% { opacity: 0; }
  74%, 84% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.obj { position: absolute; padding: 13px 15px 14px; background: var(--c-bg); color: var(--text); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.obj__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--c-ink); line-height: 1.2; }
.obj__ico { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--bg); color: var(--c-ink); border: 1px solid var(--c-line); }
.obj__ico svg { width: 13px; height: 13px; }
.field { margin-top: 10px; display: flex; align-items: center; gap: 2px; height: 34px; padding-inline: 10px; background: var(--bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: 500 11.5px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.field__caret { width: 1.5px; height: 14px; background: var(--accent); color: var(--on-accent); flex-shrink: 0; }
.row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.obj__note { font-size: 12px; color: var(--text-muted); }
.switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--success); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--hairline-ink); }
.switch__knob { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: var(--r-circle); background: var(--bg); color: var(--text); box-shadow: var(--shadow-knob); }
.hint { margin-top: 9px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.hint__dot { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--warn); color: var(--text); flex-shrink: 0; }
.code { margin: 10px 0 0; padding: 9px 11px; background: var(--bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: 500 12px/1.65 var(--font-mono); color: var(--text); white-space: pre; }
.code .k { color: var(--c-ink); }
.code .v, .code .n { color: var(--accent); font-weight: 600; }
.tile { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); box-shadow: var(--shadow-far); transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.tile svg { width: 22px; height: 22px; }
.near { z-index: 4; box-shadow: var(--shadow-near); }
.mid { z-index: 3; }
.far { z-index: 1; opacity: .72; --s: .9; box-shadow: var(--shadow-far); }
.obj--sub { left: 6px; top: 62px; width: 300px; --r: -4deg; }
.obj--proxy { left: 444px; top: 96px; width: 236px; --r: 3.5deg; }
.obj--port { left: -40px; top: 280px; width: 168px; --r: 5deg; }
.obj--tun { left: -10px; top: 574px; width: 220px; --r: 2deg; }
.obj--rule { left: 380px; top: 566px; width: 300px; --r: -3deg; }
.tile--folder { left: 344px; top: 28px; --r: 6deg; }
.tile--gear { left: -30px; top: 430px; --r: -8deg; }
.tile--shield { left: 662px; top: 336px; --r: 7deg; }
.tile--term { left: 282px; top: 598px; --r: -6deg; }
.copy { position: relative; z-index: 2; margin-bottom: calc(80px * var(--k)); }
.copy .badge { min-height: 32px; padding-inline: 12px 14px; }
.copy .h1 { margin: 22px 0 0; }
.h1__line { display: block; }
.mark { position: relative; z-index: 0; white-space: nowrap; }
.mark::after { content: ""; position: absolute; left: -.04em; right: -.06em; bottom: .05em; height: .26em; border-radius: var(--r-xs); background: var(--mint-mark); color: var(--text); transform: rotate(-1deg); z-index: -1; }
.lead { margin: 18px 0 0; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.lead strong { color: var(--text); font-weight: 650; }
.plats { margin-top: 36px; }
.plats__label { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.plats__row { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.plat { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 13px 7px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: border-color var(--duration), color var(--duration); }
.plat svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.plat:hover { border-color: var(--border-strong); color: var(--accent); }
.next { background: var(--bg-panel); color: var(--text); padding-top: 24px; padding-bottom: 120px; text-align: center; }
.next__eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.next__title { margin: 12px 0 0; font-weight: 800; font-size: 30px; line-height: 1.3; letter-spacing: -.02em; }
.next__lead { margin: 14px auto 0; max-width: 36em; font-size: 16px; line-height: 1.75; color: var(--text-muted); }

/* 资料浏览器与通用标签页 */
.tabs { min-width: 0; }
.tab-list, [role="tablist"].tab-list { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); scrollbar-width: thin; }
.tab-list [role="tab"] { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--r-btn); background: var(--clear); color: var(--text-muted); font-size: 14px; text-align: left; }
.tab-list [role="tab"]:hover { background: var(--bg); color: var(--accent); }
.tab-list [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-xs); }
.tab-panel { padding-top: 28px; min-width: 0; }
.tab-panel h3 { margin-top: 0; }
.feature-browser { display: grid; grid-template-columns: 260px minmax(0, 1fr); padding: 12px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg); color: var(--text); box-shadow: var(--shadow-float); }
.feature-browser .tab-list { position: relative; flex-direction: column; align-items: stretch; gap: 6px; border: 0; padding: 22px 10px 10px; background: var(--bg-panel); color: var(--text); }
.feature-browser .tab-list::before { content: ""; position: absolute; top: 10px; left: 14px; right: 14px; height: 2px; border-radius: var(--r-pill); background: var(--border); color: var(--text); }
.feature-browser.is-playing .tab-list::after { content: ""; position: absolute; top: 10px; left: 14px; right: 14px; height: 2px; transform-origin: left; background: var(--accent); color: var(--on-accent); animation: feature-progress 8s linear infinite; }
@keyframes feature-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.feature-browser .tab-list [role="tab"] { justify-content: flex-start; padding: 11px 12px; }
.feature-browser .tab-list [aria-selected="true"] { background: var(--accent-tint); color: var(--accent); box-shadow: none; }
.feature-browser .tab-panel { padding: 32px 36px; }
.feature-browser .tab-panel p { line-height: 1.85; color: var(--text-muted); }
.feature-browser .icon-square { width: 34px; height: 34px; border-radius: var(--r-sm); }
.feature-browser .icon-square svg { width: 18px; height: 18px; }

/* 长页目录：直接放在覆盖全部章节的父容器内。 */
.toc { position: sticky; top: 12px; z-index: 8; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--text); box-shadow: var(--shadow-far); margin-bottom: 36px; }
.toc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-pill); color: var(--text-muted); font-size: 14px; text-decoration: none; }
.toc a:hover, .toc a[aria-current] { background: var(--accent-tint); color: var(--accent); }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); color: var(--text); margin-bottom: 12px; }
.faq-item summary { position: relative; padding: 22px 56px 22px 24px; cursor: pointer; list-style: none; font-weight: 650; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; top: 22px; right: 24px; color: var(--accent); line-height: 1.6; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] { box-shadow: var(--shadow-far); }
.faq-item__body { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.85; }
.term-card { border-top: 3px solid var(--c-line, var(--mint-line)); }
.term-card__alias { display: block; margin-top: 6px; font: 12px/1.5 var(--font-mono); color: var(--text-muted); }
.client-card { position: relative; }
.client-card--first { border-color: var(--mint-line); box-shadow: var(--shadow-float); }
.client-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.client-card__head h3 { margin: 0 0 6px; }
.client-card__meta { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.client-card__downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
[data-rev]:empty { display: none; }
.badge--first { --c-bg: var(--mint-bg); --c-line: var(--mint-line); --c-ink: var(--mint-ink); }
.badge--recommended { --c-bg: var(--sky-bg); --c-line: var(--sky-line); --c-ink: var(--sky-ink); }
.badge--archived { --c-bg: var(--bg-panel-2); --c-line: var(--border); --c-ink: var(--text-muted); }
.post-card { display: flex; flex-direction: column; align-items: flex-start; }
.post-card h3 { font-size: 21px; line-height: 1.5; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 100%; font-size: 13px; color: var(--text-muted); }
.post-card__link { margin-top: auto; padding-top: 24px; font-size: 14px; font-weight: 650; }
.callout { margin: 28px 0; padding: 22px 24px; border: 1px solid var(--c-line, var(--sky-line)); border-left-width: 4px; border-radius: var(--r-md); background: var(--c-bg, var(--sky-bg)); color: var(--c-ink, var(--sky-ink)); line-height: 1.85; }
.callout strong { display: block; margin-bottom: 6px; }
.article-download { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 32px; margin-top: 48px; border: 1px solid var(--mint-line); border-radius: var(--r-xl); background: var(--mint-bg); color: var(--text); box-shadow: var(--shadow-far); }
.article-download h2 { margin: 0 0 10px; font-size: 24px; }
.article-download p { color: var(--text-muted); }
.dl-fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-near); text-decoration: none; font-weight: 650; font-size: 14px; }
.dl-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.dl-fab:hover { background: var(--accent-dark); color: var(--on-accent); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg); color: var(--text); font-size: 14px; 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(--border); vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose table th, .article-body table th { background: var(--bg-panel); color: var(--text); font-weight: 650; }
.data-table tr:last-child td { border-bottom: 0; }
.prose table, .article-body table { display: block; max-width: 100%; min-width: 0; overflow-x: auto; border-collapse: collapse; -webkit-overflow-scrolling: touch; }
.prose table code, .article-body table code { overflow-wrap: anywhere; }

/* 预览页色板：色块与文字分离，浅色令牌不承担文字对比。 */
.palette-grid { 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-md); background: var(--bg); color: var(--text); }
.swatch__paint { height: 52px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--paint); color: var(--text); }
.swatch code { display: block; font-size: 11px; background: var(--bg); color: var(--text); }
.paint-bg { --paint: var(--bg); }
.paint-bg-panel { --paint: var(--bg-panel); }
.paint-bg-panel-2 { --paint: var(--bg-panel-2); }
.paint-border { --paint: var(--border); }
.paint-border-strong { --paint: var(--border-strong); }
.paint-accent { --paint: var(--accent); }
.paint-accent-dark { --paint: var(--accent-dark); }
.paint-accent-soft { --paint: var(--accent-soft); }
.paint-accent-tint { --paint: var(--accent-tint); }
.paint-text { --paint: var(--text); }
.paint-text-muted { --paint: var(--text-muted); }
.paint-text-faint { --paint: var(--text-faint); }
.paint-success { --paint: var(--success); }
.paint-warn { --paint: var(--warn); }
.paint-error { --paint: var(--error); }
.paint-on-accent { --paint: var(--on-accent); }
.paint-butter-bg { --paint: var(--butter-bg); }
.paint-butter-line { --paint: var(--butter-line); }
.paint-butter-ink { --paint: var(--butter-ink); }
.paint-mint-bg { --paint: var(--mint-bg); }
.paint-mint-line { --paint: var(--mint-line); }
.paint-mint-ink { --paint: var(--mint-ink); }
.paint-mint-mark { --paint: var(--mint-mark); }
.paint-sky-bg { --paint: var(--sky-bg); }
.paint-sky-line { --paint: var(--sky-line); }
.paint-sky-ink { --paint: var(--sky-ink); }
.paint-lilac-bg { --paint: var(--lilac-bg); }
.paint-lilac-line { --paint: var(--lilac-line); }
.paint-lilac-ink { --paint: var(--lilac-ink); }
.paint-peach-bg { --paint: var(--peach-bg); }
.paint-peach-line { --paint: var(--peach-line); }
.paint-peach-ink { --paint: var(--peach-ink); }
.paint-halo-apricot { --paint: var(--halo-apricot); }
.paint-halo-mint { --paint: var(--halo-mint); }
.paint-tl-red { --paint: var(--tl-red); }
.paint-tl-yellow { --paint: var(--tl-yellow); }
.paint-tl-green { --paint: var(--tl-green); }
.paint-folder-back { --paint: var(--folder-back); }
.paint-folder-front-a { --paint: var(--folder-front-a); }
.paint-folder-front-b { --paint: var(--folder-front-b); }
.paint-folder-ink { --paint: var(--folder-ink); }
.paint-icon-a { --paint: var(--icon-a); }
.paint-icon-b { --paint: var(--icon-b); }
.paint-clear { --paint: var(--clear); }
.paint-hairline-ink { --paint: var(--hairline-ink); }
.paint-veil { --paint: var(--veil); }
.paint-shadow-ink { --paint: var(--shadow-ink); }
.preview-states { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.preview-caption { margin-top: 24px; font-size: 13px; color: var(--text-muted); }
.preview-header .nav { display: flex; }
.preview-header .header-tools { margin-left: 0; }
@media (max-width: 1320px) {
  .hero { --k: .9; }
  .hero__grid { gap: 48px; }
}
@media (max-width: 1200px) {
  .hero { --k: .8; }
  .hero__grid { gap: 40px; grid-template-columns: auto minmax(0, 460px); }
}
@media (max-width: 1100px) {
  .hero { --k: .86; padding-top: 40px; padding-bottom: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .copy { order: 1; text-align: center; margin-bottom: 0; max-width: 560px; }
  .stage { order: 2; }
  .lead { margin-inline: auto; }
  .copy .actions, .plats__row { justify-content: center; }
}
@media (max-width: 900px) {
  .feature-browser { grid-template-columns: minmax(0, 1fr); }
  .feature-browser .tab-list { flex-direction: row; align-items: center; padding-top: 22px; }
  .feature-browser .tab-list [role="tab"] { border-radius: var(--r-pill); }
  .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-header .top__inner { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-top: 14px; padding-bottom: 10px; row-gap: 10px; }
  .preview-header .nav { order: 3; width: 100%; overflow-x: auto; }
  .preview-header .header-tools { margin-left: auto; }
  .preview-header .nav__list li + li::before { margin-inline: 9px; }
}
@media (max-width: 760px) {
  .hero { --k: .62; }
}
@media (max-width: 640px) {
  .feature-browser .tab-panel { padding: 24px 12px; }
  .feature-browser .tab-list .icon-square { width: 28px; height: 28px; }
  .toc { position: static; flex-wrap: nowrap; overflow-x: auto; }
  .toc a { flex-shrink: 0; }
  .article-download { padding: 24px; }
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obj, .tile { transform: scale(var(--s, 1)); }
  .dl-fab { padding-inline: 16px; min-height: 50px; font-size: 13px; }
}
@media (max-width: 520px) {
  .hero { --k: .5; }
  .lead { font-size: 15.5px; }
  .next__title { font-size: 24px; }
}
@media (max-width: 360px) {
  .hero { --k: .43; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost, .drop { animation: none; opacity: 0; }
  .feature-browser.is-playing .tab-list::after { animation: none; display: none; }
}