/* 首屏采用已确认的设置抽屉构图；三档浅色与不等高分组形成拼盘层级。 */
.hero {
  display: grid;
  grid-template-columns: .92fr 1.4fr;
  gap: var(--s8);
  align-items: center;
  padding-top: var(--s10);
  padding-bottom: var(--s10);
}
.hero-copy { padding-bottom: var(--s3); }
.overline { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: var(--small); font-weight: var(--medium); margin-bottom: var(--s6); }
.overline::before { content: ''; width: var(--s6); height: var(--focus); flex-shrink: 0; color: var(--ink); background: var(--blue); }
.hero h1 span { display: block; }
.hero h1 .title-platform { color: var(--blue); margin-top: var(--s2); }
.intro { max-width: var(--intro-width); margin-top: var(--s6); font-size: var(--lead); line-height: var(--wide); color: var(--muted); }
.intro strong {
  color: var(--ink);
  font-weight: var(--bold);
  background: linear-gradient(var(--clear) 55%, var(--yellow) 55%, var(--yellow) 91%, var(--clear) 91%);
}
.platforms { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s6); border-top: var(--rule) solid var(--border); max-width: var(--platform-width); }
.platforms a { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--small); font-weight: var(--medium); }
.platforms a:hover { color: var(--blue); }
.platforms svg { width: var(--s5); height: var(--s5); }
.context-tags, .badge-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.context-tags { margin-top: var(--s6); }
.context-tags span, .tag, .badge {
  display: inline-block;
  max-width: 100%;
  padding: var(--s1) var(--s3);
  border: var(--rule) solid var(--border);
  border-radius: var(--r-pill);
  color: var(--muted);
  background: var(--bg);
  font-size: var(--caption);
  font-weight: var(--medium);
  overflow-wrap: anywhere;
}
.badge-first { color: var(--panel); background: var(--blue); border-color: var(--blue); }
.badge-recommended { color: var(--blue-dark); background: var(--panel-soft); }
.badge-retired { color: var(--ink); background: var(--panel-soft); border-style: dashed; }
.preparation { margin-top: var(--s4); font-size: var(--caption); color: var(--muted); }
.device { position: relative; height: var(--device); min-width: 0; }
.settings-window { width: calc(100% - var(--s6)); height: var(--window); color: var(--ink); background: var(--panel); border: var(--rule) solid var(--border); border-radius: var(--r-window); box-shadow: var(--shadow-window); }
.window-bar { height: var(--s9); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--s5); border-bottom: var(--rule) solid var(--border); border-radius: var(--r-window) var(--r-window) 0 0; color: var(--ink); background: var(--panel); }
.window-title { display: flex; align-items: center; gap: var(--s3); font-weight: var(--bold); font-size: var(--small); }
.window-title svg { width: var(--s4); height: var(--s4); color: var(--blue); }
.chrome { display: flex; gap: var(--s5); align-items: center; color: var(--muted); font-size: var(--caption); }
.chrome svg { width: var(--s3); height: var(--s3); }
.window-body { display: grid; grid-template-columns: var(--index-width) minmax(0, 1fr); height: var(--window-body); }
.settings-index { color: var(--muted); background: var(--bg); border-right: var(--rule) solid var(--border); padding: var(--s5) var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.index-caption { font-size: var(--tiny); color: var(--muted); letter-spacing: var(--tracking); padding: 0 var(--s3) var(--s2); }
.index-item { font-size: var(--caption); padding: var(--s2) var(--s3); color: var(--muted); border-radius: var(--r-button); }
.index-item.active { background: var(--panel-soft); color: var(--blue); font-weight: var(--bold); }
.index-foot { margin-top: auto; padding: var(--s2) var(--s3) 0; font-family: var(--mono); font-size: var(--tiny); color: var(--muted); }
.setting-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-content: start; padding: var(--s5); min-width: 0; }
.setting-group { background: var(--bg); color: var(--ink); border: var(--rule) solid var(--border); border-radius: var(--r-button); padding: var(--s3) var(--s4); min-width: 0; }
.setting-group h3 { font-size: var(--small); font-weight: var(--bold); }
.setting-group p { font-size: var(--tiny); color: var(--muted); line-height: var(--line); margin-top: var(--s1); }
.subscription { grid-column: 1 / -1; background: var(--panel); color: var(--ink); }
.field-strip { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--tiny); }
.field-label { color: var(--muted); }
.field-value { flex: 1; min-width: 0; border-bottom: var(--rule) solid var(--border); padding-bottom: var(--s1); color: var(--muted); }
.text-tool { font-size: var(--tiny); color: var(--blue); background: var(--panel-soft); padding: var(--s1) var(--s2); border-radius: var(--r-button); white-space: nowrap; }
.rule-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); font-family: var(--mono); font-size: var(--tiny); color: var(--blue); }
.rule-tags span { padding-inline: var(--s1); background: var(--panel); color: var(--blue); }
.tun { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: var(--panel); color: var(--ink); gap: var(--s3); }
.condition { font-size: var(--tiny); color: var(--muted); border-left: var(--rule) solid var(--border); padding-left: var(--s3); }
.window-foot { height: var(--window-foot); border-top: var(--rule) solid var(--border); border-radius: 0 0 var(--r-window) var(--r-window); background: var(--bg); display: flex; align-items: center; padding-inline: var(--s5); font-size: var(--caption); color: var(--blue); gap: var(--s2); }
.window-foot svg { width: var(--s4); height: var(--s4); }
.proxy-drawer { position: absolute; right: 0; bottom: 0; width: var(--drawer); max-width: 100%; padding: var(--s4); background: var(--panel); color: var(--ink); border: var(--rule) solid var(--border); border-radius: var(--r-window); box-shadow: var(--shadow-drawer); }
.drawer-title { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding-bottom: var(--s3); border-bottom: var(--rule) solid var(--border); }
.drawer-title h3 { font-size: var(--regular); font-weight: var(--bold); }
.drawer-title span { font-size: var(--tiny); color: var(--muted); }
.proxy-options { list-style: none; margin: var(--s2) 0; padding: 0; }
.proxy-options li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); font-size: var(--small); }
.option-ring { width: var(--s3); height: var(--s3); border: var(--rule) solid var(--border); border-radius: var(--r-pill); flex-shrink: 0; }
.drawer-note { font-size: var(--caption); color: var(--ink); padding-top: var(--s2); border-top: var(--rule) solid var(--border); }
.device-caption { position: absolute; bottom: var(--s3); left: var(--s1); max-width: var(--caption-width); color: var(--muted); font-size: var(--caption); line-height: var(--wide); }
.device-caption strong { display: block; color: var(--ink); font-weight: var(--medium); margin-bottom: var(--s1); }
.facts { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-top: var(--rule) solid var(--border); border-bottom: var(--rule) solid var(--border); padding-top: var(--s6); padding-bottom: var(--s6); gap: var(--s8); }
.fact { display: flex; align-items: center; gap: var(--s5); font-size: var(--small); }
.fact + .fact { border-left: var(--rule) solid var(--border); padding-left: var(--s8); }
.fact-label { font-size: var(--caption); color: var(--muted); white-space: nowrap; }
.fact-value { font-family: var(--mono); font-size: var(--small); color: var(--ink); }
.fact:last-child .fact-value { font-family: var(--body); }
.page-tail { padding-top: var(--s7); padding-bottom: var(--s6); display: flex; justify-content: space-between; gap: var(--s4); color: var(--muted); font-size: var(--caption); }
.page-tail a { margin-right: var(--s10); }

/* 平台切换：未执行脚本时面板可连续阅读。 */
.tabs { min-width: 0; }
[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-bottom: var(--s4);
  margin-bottom: var(--s6);
  border-bottom: var(--rule) solid var(--border);
}
[role="tab"] {
  flex: 0 1 auto;
  min-height: var(--touch);
  padding: var(--s2) var(--s5);
  border: var(--rule) solid var(--border);
  border-radius: var(--r-button);
  color: var(--muted);
  background: var(--panel);
  font-size: var(--regular);
  font-weight: var(--bold);
}
[role="tab"]:hover { color: var(--blue-dark); background: var(--panel-soft); }
[role="tab"][aria-selected="true"] { color: var(--panel); background: var(--blue); border-color: var(--blue); }
[role="tabpanel"] { min-width: 0; scroll-margin-top: var(--s6); }
[role="tabpanel"] + [role="tabpanel"] { margin-top: var(--s6); }
.tabs-ready [role="tabpanel"] { margin-top: 0; }
.toc {
  position: sticky;
  top: var(--s3);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s7);
  border: var(--rule) solid var(--border);
  border-radius: var(--r-window);
  color: var(--ink);
  background: var(--bg);
}
.toc a { display: flex; align-items: center; min-height: var(--touch); padding: var(--s2) var(--s3); font-size: var(--small); }
.toc a:hover, .toc a[aria-current="location"] { color: var(--blue-dark); background: var(--panel-soft); border-radius: var(--r-button); }
.toc-static { position: static; }
.faq-item { border-bottom: var(--rule) solid var(--border); }
.faq-item:first-child { border-top: var(--rule) solid var(--border); }
.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  min-height: var(--touch);
  padding-block: var(--s5);
  padding-right: var(--s8);
  font-weight: var(--bold);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: var(--s3); top: var(--s5); color: var(--blue); }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding-bottom: var(--s6); max-width: var(--reading); color: var(--muted); }
.faq-answer > * + * { margin-top: var(--s3); }
.term-card { border-left: var(--s1) solid var(--blue); }
.term-card .term-family { font-family: var(--mono); font-size: var(--caption); color: var(--muted); margin-bottom: var(--s2); }
.term-card p { line-height: var(--wide); }
.client-card { padding: var(--s7); border: var(--rule) solid var(--border); border-radius: var(--r-window); background: var(--panel); color: var(--ink); }
.client-card + .client-card { margin-top: var(--s6); }
.client-card--first { box-shadow: var(--shadow-window); border-top: var(--s1) solid var(--blue); }
.client-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.client-card p { margin-top: var(--s4); color: var(--muted); }
.client-meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); font-family: var(--mono); font-size: var(--caption); color: var(--muted); }
.package-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.article-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s7); border-top: var(--rule) solid var(--border); }
.article-card h3 { font-size: var(--subheading); }
.article-card p { color: var(--muted); line-height: var(--wide); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); color: var(--muted); font-size: var(--caption); }
.article-card a { text-underline-offset: var(--s1); }
.article-card a:hover { text-decoration: underline; }
.callout { margin-inline: 0; padding: var(--s5) var(--s6); border-left: var(--s1) solid var(--blue); border-radius: 0 var(--r-window) var(--r-window) 0; background: var(--panel-soft); color: var(--ink); }
.callout > * + * { margin-top: var(--s3); }
.callout strong { font-weight: var(--bold); }
.download-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6); margin-top: var(--s8); padding: var(--s6); border: var(--rule) solid var(--border); border-radius: var(--r-window); color: var(--ink); background: var(--panel); }
.download-guide h2 { font-size: var(--subheading); }
.download-guide p { margin-top: var(--s2); font-size: var(--regular); color: var(--muted); }
.dl-fab {
  position: fixed;
  right: var(--s6);
  bottom: var(--s6);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--touch);
  max-width: calc(100% - var(--gutter) * 2);
  padding: var(--s3) var(--s4);
  border: var(--rule) solid var(--border);
  background: var(--panel);
  color: var(--blue);
  border-radius: var(--r-button);
  box-shadow: var(--shadow-button);
  font-size: var(--small);
  font-weight: var(--bold);
}
.dl-fab:hover { color: var(--blue-dark); background: var(--panel-soft); }
.dl-fab svg { width: var(--s4); height: var(--s4); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--regular); text-align: left; }
.data-table caption { text-align: left; color: var(--muted); margin-bottom: var(--s3); }
.data-table th, .data-table td { padding: var(--s4); border-bottom: var(--rule) solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.data-table th { color: var(--ink); background: var(--panel-soft); font-weight: var(--bold); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.feature-table { border-top: var(--rule) solid var(--border); }
.feature-row { display: grid; grid-template-columns: .65fr 2fr 1.2fr; gap: var(--s7); padding-top: var(--s6); padding-bottom: var(--s6); border-bottom: var(--rule) solid var(--border); }
.feature-row h3 { font-size: var(--lead); }
.feature-row p { color: var(--muted); line-height: var(--wide); }
.feature-head { font-size: var(--caption); color: var(--muted); padding-top: var(--s3); padding-bottom: var(--s3); }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.swatch { border: var(--rule) solid var(--border); border-radius: var(--r-window); overflow-wrap: anywhere; }
.swatch-chip { height: var(--s11); border-radius: var(--r-window) var(--r-window) 0 0; }
.swatch code { display: block; padding: var(--s3); font-size: var(--caption); }
.swatch-bg { background: var(--bg); color: var(--ink); }
.swatch-panel { background: var(--panel); color: var(--ink); }
.swatch-soft { background: var(--panel-soft); color: var(--ink); }
.swatch-border { background: var(--border); color: var(--ink); }
.swatch-blue { background: var(--blue); color: var(--panel); }
.swatch-dark { background: var(--blue-dark); color: var(--panel); }
.swatch-ink { background: var(--ink); color: var(--panel); }
.swatch-muted { background: var(--muted); color: var(--panel); }
.swatch-yellow { background: var(--yellow); color: var(--ink); }
.swatch-clear { background: var(--clear); color: var(--ink); }
.swatch-veil { background: var(--veil); color: var(--ink); }
.type-display { font-family: var(--display); font-size: var(--hero-size); font-weight: var(--heavy); line-height: var(--tight); }
.state-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s5); }
@media (min-width: 1500px) {
  .hero { padding-top: var(--s11); padding-bottom: var(--s11); }
}
@media (max-width: 1150px) {
  .hero { grid-template-columns: .9fr 1.2fr; gap: var(--s6); }
  .setting-groups { padding: var(--s3); gap: var(--s2); }
  .setting-group { padding: var(--s3); }
  .device-caption { max-width: calc(var(--s11) * 2); }
  .platforms { gap: var(--s2); }
  .platforms a { font-size: var(--caption); gap: var(--s1); }
  .fact { gap: var(--s3); }
  .facts { gap: var(--s6); }
  .fact + .fact { padding-left: var(--s6); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--s8); gap: var(--s8); }
  .hero-copy { max-width: calc(var(--s11) * 7.5); }
  .hero h1 span { display: inline; }
  .hero h1 .title-platform { margin-left: var(--s2); }
  .intro { max-width: calc(var(--s11) * 7); font-size: var(--body-size); }
  .platforms { max-width: calc(var(--platform-width) + var(--s5)); }
  .platforms a { font-size: var(--small); gap: var(--s2); }
  .device { max-width: calc(var(--s11) * 9); width: 100%; }
  .device-caption { max-width: var(--caption-width); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .fact + .fact { border: 0; padding: 0; }
  .feature-row { grid-template-columns: .7fr 2fr; gap: var(--s5); }
  .feature-row > :last-child { grid-column: 2; }
  .feature-head { display: none; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .toc { position: static; }
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .feature-row > :last-child { grid-column: auto; }
  .download-guide { grid-template-columns: minmax(0, 1fr); }
  .client-card, .article-card { padding: var(--s5); }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-tags, .badge-row { flex-direction: row; flex-wrap: wrap; }
  .dl-fab { right: var(--gutter); bottom: var(--s4); }
}
@media (max-width: 560px) {
  .hero h1 span { display: block; }
  .hero h1 .title-platform { margin-left: 0; margin-top: 0; }
  .hero .actions { gap: var(--s5); margin-top: var(--s6); }
  .hero .primary { padding: var(--s3) var(--s5); }
  .overline { margin-bottom: var(--s4); }
  .platforms { gap: var(--s2); }
  .platforms a { font-size: var(--tiny); gap: var(--s1); }
  .platforms svg { width: var(--s4); height: var(--s4); }
  .device { height: auto; }
  .settings-window { width: 100%; height: auto; }
  .window-bar { padding-inline: var(--s3); }
  .window-body { height: auto; display: block; }
  .settings-index { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: var(--rule) solid var(--border); padding: var(--s2); }
  .index-caption, .index-foot { display: none; }
  .index-item { padding: var(--s1) var(--s2); font-size: var(--tiny); }
  .setting-groups { grid-template-columns: minmax(0, 1fr); padding: var(--s3); gap: var(--s3); }
  .subscription, .tun { grid-column: auto; }
  .setting-group { padding: var(--s3); }
  .setting-group p, .rule-tags { font-size: var(--caption); }
  .proxy-drawer { position: relative; width: calc(100% - var(--s3)); margin: calc(var(--s3) * -1) 0 0 var(--s3); }
  .device-caption { position: static; max-width: none; margin-top: var(--s6); }
  .device-caption strong { display: inline; margin-right: var(--s2); }
  .page-tail { align-items: flex-start; }
  .page-tail a { margin: 0; }
}