/* 配置叠合工作台：静态教学装置，不模拟运行状态。 */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  padding: var(--s6) var(--gutter) var(--s8);
  overflow-x: clip;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 32% 0 0;
  background: radial-gradient(ellipse at 34% 67%, var(--halo-blue), var(--clear) 61%), radial-gradient(ellipse at 72% 69%, var(--halo-mint), var(--clear) 57%);
  color: var(--text);
  pointer-events: none;
}
.intro { position: relative; text-align: center; max-width: 100%; }
.hero h1 .accent { color: var(--accent); }
.title-divider { display: inline-block; width: var(--s6); }
.description { margin-top: var(--s3); font-size: var(--text-body); color: var(--muted); }
.description strong { color: var(--text); }
.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.platforms li { min-width: 0; }
.platforms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--platform-height);
  padding: var(--s1) var(--s3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--panel);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
}
.platforms a:hover { border-color: var(--accent); color: var(--accent-dark); }
.platforms svg { width: var(--text-ui); height: var(--text-ui); }
.workbench { width: var(--bench-width); max-width: 100%; margin-top: var(--s6); }
.stage { position: relative; height: var(--stage-height); }
.settings-window {
  position: absolute;
  left: var(--window-left);
  top: var(--s5);
  width: var(--window-width);
  height: var(--window-height);
  background: var(--panel);
  color: var(--text);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
}
.window-bar {
  height: var(--window-bar);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s6);
  border-bottom: var(--line) solid var(--border);
}
.window-dots { display: flex; gap: var(--dot-gap); }
.window-dots i {
  display: block;
  flex-shrink: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--text);
}
.window-dots i:first-child { background: var(--subtle); color: var(--panel); }
.window-title { font-size: var(--text-ui); font-weight: var(--weight-semibold); }
.demo-chip {
  margin-left: auto;
  color: var(--accent-dark);
  background: var(--mint);
  font-size: var(--text-xs);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-pill);
}
.settings-layout { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); height: calc(100% - var(--window-bar)); }
.settings-layout > * { min-width: 0; }
.settings-rail {
  padding: var(--s5) var(--s3);
  background: var(--code-bg);
  color: var(--muted);
  border-right: var(--line) solid var(--border);
  border-bottom-left-radius: var(--radius-window);
}
.rail-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
  padding: 0 var(--s3);
  margin-bottom: var(--s4);
}
.rail-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s2);
  font-size: var(--text-note);
  color: var(--muted);
  border-radius: var(--radius-small);
}
.rail-item .line-icon { width: var(--s4); height: var(--s4); }
.rail-selected { color: var(--accent-dark); background: var(--mint); font-weight: var(--weight-semibold); }
.settings-main { padding: var(--s6) var(--s7); }
.settings-heading { font-size: var(--text-nav); font-weight: var(--weight-semibold); }
.settings-subtitle { font-size: var(--text-sm); color: var(--muted); margin-top: var(--s1); }
.setting-rows { margin-top: var(--s4); max-width: var(--setting-safe-width); }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--setting-height);
  border-bottom: var(--line) solid var(--border);
  gap: var(--s4);
}
.setting-label { font-size: var(--text-note); }
.setting-key { font-family: var(--mono); color: var(--muted); font-size: var(--text-xs); margin-left: var(--s2); }
.setting-value { font-family: var(--mono); font-size: var(--text-note); color: var(--accent-dark); flex-shrink: 0; }
.example-note { max-width: var(--note-width); margin-top: var(--s5); font-size: var(--text-sm); color: var(--muted); }
.sheet {
  position: absolute;
  background: var(--panel);
  color: var(--text);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.override-sheet { right: var(--s6); top: 0; width: var(--override-width); padding: var(--s5); }
.sheet-heading { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-ui); font-weight: var(--weight-semibold); }
.sheet-icon {
  width: var(--s7);
  height: var(--s7);
  display: grid;
  place-items: center;
  border-radius: var(--radius-small);
  background: var(--mint);
  color: var(--accent-dark);
  flex-shrink: 0;
}
.sheet-icon .line-icon { width: var(--s4); height: var(--s4); }
.sheet-meta { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); margin-top: var(--s3); }
.code { font-family: var(--mono); font-size: var(--text-note); line-height: var(--leading-code); color: var(--text); }
.code b { font-weight: var(--weight-normal); color: var(--accent-dark); }
.override-sheet .code { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--code-bg); color: var(--text); border-radius: var(--radius-small); }
.merge-sheet { right: 0; bottom: 0; width: var(--merge-width); padding: var(--s5) var(--s6); }
.merge-sheet .sheet-heading { justify-content: space-between; }
.yaml-label { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--muted); }
.merge-code { margin-top: var(--s3); padding: var(--s2) 0; background: var(--code-bg); color: var(--text); border-radius: var(--radius-small); }
.code-line { display: block; padding: 0 var(--s3); border-left: var(--line-strong) solid var(--clear); }
.code-line.is-overridden { border-left-color: var(--accent); }
.merge-note { margin-top: var(--s2); font-size: var(--text-xs); color: var(--muted); }
.workbench-caption { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: var(--text-sm); color: var(--muted); }
.workbench-caption .line-icon { width: var(--text-ui); height: var(--text-ui); color: var(--accent); }
.next-edge {
  border-top: var(--line) solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: var(--s8) max(var(--gutter), calc((100% - var(--content)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}
.next-edge h2 { font-size: var(--text-section); }
.next-edge p { font-size: var(--text-ui); color: var(--muted); }
.next-edge a { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-ui); color: var(--accent-dark); }

/* 设置项—配置字段长卷：说明先于代码，第三行只改变桌面视觉位置。 */
.field-scroll { border-top: var(--line) solid var(--border); }
.field-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--s11);
  align-items: center;
  padding-top: var(--s10);
  padding-bottom: var(--s10);
  border-bottom: var(--line) solid var(--border);
}
.field-row > * { min-width: 0; }
.field-row p { margin-top: var(--s3); color: var(--muted); }
.field-row:nth-child(3) .field-description { grid-column: 2; grid-row: 1; }
.field-row:nth-child(3) .field-example { grid-column: 1; grid-row: 1; }

.tabs { min-width: 0; }
.tab-list, [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s2);
  margin-bottom: var(--s6);
  background: var(--panel-blue);
  color: var(--text);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-card);
}
[role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  gap: var(--s2);
  padding: var(--s2) var(--s5);
  border: var(--line) solid var(--clear);
  border-radius: var(--radius-button);
  background: var(--clear);
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
}
[role="tab"]:hover { color: var(--accent-dark); }
[role="tab"][aria-selected="true"] { background: var(--panel); color: var(--accent-dark); border-color: var(--border); box-shadow: var(--shadow-button); }
[role="tabpanel"] { min-width: 0; scroll-margin-top: var(--s6); }
.toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--text);
}
.toc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-small);
  font-size: var(--text-ui);
}
.toc a:hover { background: var(--mint); color: var(--accent-dark); }
.document-layout { display: grid; grid-template-columns: var(--toc-width) minmax(0, 1fr); gap: var(--s10); align-items: start; }
.document-layout > .toc {
  position: sticky;
  top: var(--s6);
  display: block;
  max-height: calc(100dvh - var(--s10));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.document-layout > .toc a { display: flex; justify-content: flex-start; }
.document-layout > * { min-width: 0; }
.faq-item { border-bottom: var(--line) solid var(--border); }
.faq-item summary {
  padding: var(--s5) var(--s8) var(--s5) 0;
  position: relative;
  cursor: pointer;
  font-weight: var(--weight-semibold);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: var(--s2); top: var(--s5); color: var(--accent-dark); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: var(--s5); color: var(--muted); }
.term-card {
  padding: var(--s6);
  background: var(--panel);
  color: var(--text);
  border: var(--line) solid var(--border);
  border-left: var(--s1) solid var(--accent);
  border-radius: var(--radius-card);
}
.term-card dt { font-size: var(--text-brand); font-weight: var(--weight-semibold); }
.term-card dd { margin-top: var(--s3); color: var(--muted); }
.term-key { display: block; font: var(--text-note)/var(--leading-body) var(--mono); color: var(--muted); margin-top: var(--s1); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.badge, .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  max-width: 100%;
  padding: var(--s1) var(--s3);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: normal;
  overflow-wrap: anywhere;
}
.badge-first { background: var(--accent); color: var(--panel); border-color: var(--accent); }
.badge-recommended { background: var(--mint); color: var(--accent-dark); border-color: var(--border); }
.badge-archived { background: var(--panel); color: var(--warn); border-color: var(--border); }
.badge-error { background: var(--panel); color: var(--error); }
.badge-success { background: var(--panel); color: var(--success); }
.status-dot { width: var(--s2); height: var(--s2); flex-shrink: 0; border-radius: var(--radius-pill); background: var(--success); color: var(--panel); }
.download-card { position: relative; }
.download-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow-card); }
.download-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); font-size: var(--text-ui); }
.download-details dt { color: var(--muted); }
.download-details dd { overflow-wrap: anywhere; }
.download-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
[data-rev]:empty { display: none; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; }
.post-card h3 { font-size: var(--text-brand); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--text-sm); color: var(--muted); }
.post-card p { color: var(--muted); }
.post-card > .text-link { margin-top: auto; padding-top: var(--s5); }
.callout {
  padding: var(--s5) var(--s6);
  border: var(--line) solid var(--border);
  border-left: var(--s1) solid var(--accent);
  border-radius: var(--radius-button);
  background: var(--mint);
  color: var(--text);
}
.callout > * + * { margin-top: var(--s2); }
.callout-warning { background: var(--panel); color: var(--text); border-left-color: var(--warn); }
.callout-error { background: var(--panel); color: var(--text); border-left-color: var(--error); }
.article-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  padding: var(--s8);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-window);
  background: linear-gradient(115deg, var(--panel-blue), var(--mint));
  color: var(--text);
}
.article-download h2 { font-size: var(--text-section); }
.article-download p { margin-top: var(--s2); color: var(--muted); font-size: var(--text-ui); }
.dl-fab {
  position: fixed;
  right: var(--s6);
  bottom: max(var(--s6), env(safe-area-inset-bottom));
  z-index: var(--layer-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  background: var(--panel);
  color: var(--accent-dark);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
  font-size: var(--text-note);
  font-weight: var(--weight-semibold);
}
.dl-fab:hover { border-color: var(--accent); color: var(--accent-dark); }
html.nav-open .dl-fab { visibility: hidden; }
.table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--line) solid var(--border); border-radius: var(--radius-card); }
.data-table { width: 100%; min-width: var(--table-width); background: var(--panel); color: var(--text); font-size: var(--text-ui); }
.data-table caption { text-align: left; padding: var(--s4) var(--s5); color: var(--muted); }
.data-table th, .data-table td { padding: var(--s4) var(--s5); border-bottom: var(--line) solid var(--border); vertical-align: top; }
.data-table th { background: var(--panel-blue); color: var(--text); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.swatch { border: var(--line) solid var(--border); border-radius: var(--radius-button); background: var(--panel); color: var(--text); overflow: hidden; }
.swatch-tone { height: var(--swatch-height); border-bottom: var(--line) solid var(--border); }
.swatch code { display: block; padding: var(--s3); font-size: var(--text-sm); }
.tone-bg { background: var(--bg); color: var(--text); }
.tone-panel { background: var(--panel); color: var(--text); }
.tone-blue { background: var(--panel-blue); color: var(--text); }
.tone-border { background: var(--border); color: var(--text); }
.tone-accent { background: var(--accent); color: var(--panel); }
.tone-dark { background: var(--accent-dark); color: var(--panel); }
.tone-text { background: var(--text); color: var(--panel); }
.tone-muted { background: var(--muted); color: var(--panel); }
.tone-subtle { background: var(--subtle); color: var(--text); }
.tone-mint { background: var(--mint); color: var(--text); }
.tone-code { background: var(--code-bg); color: var(--text); }
.tone-success { background: var(--success); color: var(--panel); }
.tone-warn { background: var(--warn); color: var(--panel); }
.tone-error { background: var(--error); color: var(--panel); }
.tone-halo-blue { background: var(--halo-blue); color: var(--text); }
.tone-halo-mint { background: var(--halo-mint); color: var(--text); }
.tone-clear { background: var(--clear); color: var(--text); }
.tone-veil { background: var(--veil); color: var(--text); }
.preview-states { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.type-display { font: var(--weight-display) var(--text-title)/var(--leading-title) var(--display); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (min-width: 1500px) {
  .hero { padding-top: var(--s9); padding-bottom: var(--s9); }
  .workbench { margin-top: var(--s8); }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .stage { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
  .settings-window { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 100%; }
  .sheet { position: relative; right: auto; top: auto; bottom: auto; width: 100%; }
  .setting-rows { max-width: none; }
}
@media (max-width: 900px) {
  .document-layout { grid-template-columns: minmax(0, 1fr); }
  .document-layout > .toc { position: static; display: flex; max-height: none; }
  .field-row { gap: var(--s8); }
}
@media (max-width: 700px) {
  :root { --window-bar: 54px; --rail-width: 80px; --setting-height: 54px; }
  .hero { min-height: 0; padding: var(--s8) var(--gutter); }
  .hero h1 .accent { display: block; margin-top: var(--s1); }
  .title-divider { display: none; }
  .description { max-width: var(--setting-safe-width); margin: var(--s4) auto 0; font-size: var(--text-ui); }
  .platforms { gap: var(--s1); margin-top: var(--s5); flex-wrap: nowrap; }
  .platforms a { font-size: var(--text-micro); gap: var(--s1); padding-inline: var(--dot-gap); min-height: var(--s8); }
  .platforms svg { width: var(--s3); height: var(--s3); }
  .workbench { margin-top: var(--s8); }
  .stage { height: auto; display: grid; gap: var(--s3); }
  .settings-window { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .window-bar { padding-inline: var(--s4); gap: var(--s3); }
  .settings-layout { height: auto; }
  .settings-rail { padding: var(--s4) var(--s2); }
  .rail-label { font-size: var(--text-micro); padding-inline: var(--s1); }
  .rail-item { padding: var(--s2) var(--s1); font-size: var(--text-xs); }
  .rail-item .line-icon { display: none; }
  .settings-main { padding: var(--s5) var(--s4); }
  .setting-key { display: block; margin: 0; font-size: var(--text-micro); }
  .example-note { margin-top: var(--s4); margin-bottom: var(--s2); font-size: var(--text-xs); }
  .sheet { position: relative; right: auto; top: auto; bottom: auto; width: 100%; }
  .override-sheet, .merge-sheet { padding: var(--s5); }
  .override-sheet .code { padding: var(--s3); }
  .workbench-caption { font-size: var(--text-xs); align-items: flex-start; text-align: center; }
  .workbench-caption .line-icon { margin-top: var(--s1); }
  .next-edge { padding: var(--s6) var(--gutter); align-items: flex-start; }
  .next-edge h2 { font-size: var(--text-body); }
  .next-edge p, .next-edge a { font-size: var(--text-sm); }
  .next-edge a { flex-shrink: 0; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .field-row:nth-child(3) .field-description,
  .field-row:nth-child(3) .field-example { grid-column: auto; grid-row: auto; }
  .article-download { grid-template-columns: minmax(0, 1fr); padding: var(--s5); }
  .article-download .action { justify-self: start; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fab { right: var(--s3); bottom: max(var(--s3), env(safe-area-inset-bottom)); font-size: var(--text-sm); padding: var(--s2) var(--s3); }
}