/* 已确认首屏：自然高度、静态窗口、独立平台链接。 */
.hero { position: relative; overflow: hidden; padding: 22px 24px 36px; text-align: center; }
.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.horizon { position: absolute; left: 50%; bottom: -760px; width: 2400px; height: 1100px; transform: translateX(-50%); border-radius: var(--radius-round); background: var(--c-horizon); color: var(--c-text); }
.glow { position: absolute; border-radius: var(--radius-round); }
.glow--pink { left: -220px; bottom: -260px; width: 760px; height: 640px; background: radial-gradient(closest-side, var(--glow-pink), var(--c-clear)); color: var(--c-text); }
.glow--lemon { right: -200px; bottom: -120px; width: 640px; height: 560px; background: radial-gradient(closest-side, var(--glow-lemon), var(--c-clear)); color: var(--c-text); }
.glow--mint { right: 60px; bottom: -300px; width: 620px; height: 520px; background: radial-gradient(closest-side, var(--glow-mint), var(--c-clear)); color: var(--c-text); }
.hero-inner { position: relative; z-index: 1; max-width: var(--page-max); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 15px 6px 11px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-muted); box-shadow: var(--shadow-chip); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; }
.eyebrow-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-round); background: var(--c-success); color: var(--c-text); box-shadow: 0 0 0 3px var(--c-success-ring); }
.eyebrow b { color: var(--c-text); }
.hero-title { margin: 18px auto; font-size: clamp(30px, 3.6vw, 48px); font-weight: var(--weight-black); line-height: 1.12; letter-spacing: -.02em; }
.hero-title .line { display: block; }
.hero-title em { font-style: normal; color: var(--c-accent); }
.lede { max-width: 780px; margin: 16px auto 0; font-size: var(--text-lede); line-height: 26px; color: var(--c-muted); }
.lede strong { color: var(--c-text); font-weight: var(--weight-bold); }
.proto-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.proto-label { margin-right: 4px; font-family: var(--font-mono); font-size: var(--text-rule); font-weight: var(--weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.proto-chip { display: inline-block; max-width: 100%; padding: 4px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-accent); box-shadow: var(--shadow-chip); font-family: var(--font-mono); font-size: var(--text-chip); font-weight: var(--weight-semibold); line-height: 18px; overflow-wrap: anywhere; }
.platform-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; margin: 16px 0 0; padding: 0; }
.platform-row li + li { border-left: 1px solid var(--c-border); }
.plat { display: inline-flex; align-items: center; gap: 8px; padding: 2px 20px; color: var(--c-muted); font-size: var(--text-ui); font-weight: var(--weight-semibold); line-height: 22px; }
.plat:hover { color: var(--c-accent); }
.plat svg { width: 17px; height: 17px; flex-shrink: 0; }
.plat .tux { width: 15px; }
.device { position: relative; width: min(980px, 88vw); margin: 28px auto 14px; }
.device::before { content: ""; position: absolute; inset: 14px 0 -14px; border-radius: var(--radius-window); background: var(--c-accent-dark); color: var(--c-panel); box-shadow: var(--shadow-window); }
.window { position: relative; z-index: 1; padding: 0 10px 10px; border-radius: var(--radius-window); background: var(--c-accent); color: var(--c-lilac); text-align: left; }
.titlebar { display: grid; grid-template-columns: 190px 1fr 190px; align-items: center; height: 46px; padding: 0 8px; }
.titlebar-left { display: flex; align-items: center; gap: 14px; }
.lights { display: flex; gap: 7px; flex-shrink: 0; }
.light { width: 12px; height: 12px; flex-shrink: 0; border-radius: var(--radius-round); }
.light--r { background: var(--c-error); color: var(--c-text); }
.light--y { background: var(--c-warn); color: var(--c-text); }
.light--g { background: var(--c-success); color: var(--c-text); }
.win-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--c-lilac); }
.searchbar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: var(--radius-btn); background: var(--c-frame-glass); color: var(--c-lilac); font-size: var(--text-xs); }
.searchbar svg { width: 14px; height: 14px; }
.titlebar-right { display: flex; justify-content: flex-end; }
.core-chip { padding: 2px 10px; border: 1px solid var(--c-frame-glass); border-radius: var(--radius-pill); background: var(--c-frame-glass-soft); color: var(--c-lilac); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-semibold); }
.window-body { display: grid; grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; height: 326px; }
.rail { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.rail-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; border-radius: var(--radius-rail); font-size: var(--text-rule); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--c-lilac); }
.rail-item svg { width: 22px; height: 22px; }
.rail-item--on { background: var(--c-frame-glass); color: var(--c-panel); }
.pane { min-width: 0; padding: 18px 18px 16px; border-radius: var(--radius-pane); background: var(--c-panel); color: var(--c-text); }
.pane-head { display: flex; align-items: center; justify-content: space-between; }
.pane-title { margin: 0; font-size: var(--text-body); font-weight: var(--weight-heavy); line-height: 22px; letter-spacing: -.01em; }
.pane-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--c-border); border-radius: var(--radius-btn); color: var(--c-muted); }
.pane-icon svg { width: 14px; height: 14px; }
.group-tabs { display: flex; gap: 8px; margin: 14px 0; }
.group-chip { padding: 5px 14px; border-radius: var(--radius-pill); background: var(--c-panel-2); color: var(--c-text); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 20px; }
.group-chip--on { background: var(--c-accent-dark); color: var(--c-panel); }
.field-label { display: block; color: var(--c-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 18px; }
.field-box { display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--c-accent-ring); border-radius: var(--radius-field); background: var(--c-panel); color: var(--c-text); box-shadow: 0 0 0 3px var(--c-accent-soft); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field-box svg { width: 14px; height: 14px; color: var(--c-muted); }
.field-caret { width: 2px; height: 16px; margin-left: -6px; border-radius: var(--radius-tiny); background: var(--c-accent); color: var(--c-panel); }
.btn-shape { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin-top: 12px; padding: 4px 14px; border-radius: var(--radius-btn); background: var(--c-accent-soft); color: var(--c-accent); font-size: var(--text-chip); font-weight: var(--weight-bold); }
.btn-shape svg { width: 14px; height: 14px; }
.rows { margin: 14px 0 0; padding: 0; list-style: none; }
.row { display: flex; align-items: center; gap: 10px; height: 28px; border-top: 1px solid var(--c-skeleton-soft); }
.radio { width: 12px; height: 12px; flex-shrink: 0; border: 1.5px solid var(--c-border); border-radius: var(--radius-round); }
.radio--on { border: 3.5px solid var(--c-accent); }
.bar { height: 8px; border-radius: var(--radius-bar); background: var(--c-skeleton); color: var(--c-text); }
.bar--soft { margin-left: auto; background: var(--c-skeleton-soft); color: var(--c-text); }
.bar--w1 { width: 44%; } .bar--w2 { width: 36%; } .bar--w3 { width: 50%; }
.bar--s1 { width: 16%; } .bar--s2 { width: 22%; } .bar--s3 { width: 13%; }
.tabs { display: flex; gap: 22px; margin-top: 8px; border-bottom: 1px solid var(--c-border); }
.tab { position: relative; padding: 8px 0; color: var(--c-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 20px; }
.tab--on { color: var(--c-accent); }
.tab--on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: var(--radius-tiny); background: var(--c-accent); color: var(--c-panel); }
.rules { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 4px 8px 4px 12px; border-radius: var(--radius-field); background: var(--c-panel-2); color: var(--c-text); font-family: var(--font-mono); font-size: var(--text-chip); font-weight: var(--weight-medium); }
.rule > code { min-width: 0; }
.rule-out { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rule-arrow { color: var(--c-muted); }
.tag { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: var(--radius-tag); font-size: var(--text-rule); font-weight: var(--weight-bold); line-height: 18px; overflow-wrap: anywhere; }
.tag--direct { background: var(--c-success-soft); color: var(--c-success-ink); }
.tag--block { background: var(--c-error-soft); color: var(--c-error-ink); }
.toggles { margin: 10px 0 0; padding: 0; list-style: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-text); }
.toggle + .toggle { border-top: 1px solid var(--c-skeleton-soft); }
.switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--c-border); color: var(--c-text); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--radius-round); background: var(--c-panel); color: var(--c-text); box-shadow: var(--shadow-knob); }
.switch--on { background: var(--c-success); color: var(--c-text); }
.switch--on::after { left: 17px; }

/* 通用切换：未初始化时保留 HTML 指定的默认面板。 */
.features-intro { padding: 24px var(--gutter) 56px; text-align: center; }
.seg, .tab-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.seg { max-width: 980px; margin-inline: auto; }
.seg-item, .tab-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 10px 26px; border: 1px solid var(--c-border);
  border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-accent-dark);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-heavy);
  line-height: 1.5; letter-spacing: -.01em;
}
.seg-item[aria-selected="true"], .tab-button[aria-selected="true"], .seg-item.is-selected { border-color: var(--c-accent-dark); background: var(--c-accent-dark); color: var(--c-panel); }
.tab-panel { margin-top: 24px; min-width: 0; }
.band { position: relative; overflow: hidden; padding: 96px var(--gutter) 180px; background: var(--c-accent-dark); color: var(--c-panel); }
.band::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -1px; height: 110px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--c-bg); color: var(--c-text); }
.band-inner { position: relative; z-index: 1; max-width: 1180px; margin-inline: auto; }
.band-title { margin: 0 auto; max-width: 760px; text-align: center; font-size: var(--text-h2); }
.band-lede { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: var(--text-lede); line-height: 1.7; color: var(--c-on-dark-muted); }
.feature-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; margin-top: 56px; }
.feature-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.feature-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 24px; border: 0; border-radius: var(--radius-pill); background: var(--c-clear); color: var(--c-panel); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); text-align: left; }
.feature-tab[aria-selected="true"] { background: var(--c-lilac); color: var(--c-accent-dark); font-weight: var(--weight-heavy); }
.feature-panel { min-width: 0; padding: 28px; border-radius: var(--radius-card); background: var(--c-panel-cool); color: var(--c-text); }
.panel-kicker { margin: 0; color: var(--c-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .12em; text-transform: uppercase; }
.code { margin: 14px 0 0; padding: 18px 20px; }
.code .k { color: var(--code-key); font-weight: var(--weight-semibold); }
.code .s { color: var(--code-str); }
.code .p { color: var(--code-punc); }
.panel-text { margin: 16px 0 0; color: var(--c-muted); font-size: var(--text-button); line-height: 1.75; }
.panel-text code { color: var(--c-accent); }
.spark { position: absolute; z-index: 0; color: var(--c-panel); line-height: 1; font-size: var(--text-h2); }
.spark--1 { left: 6%; top: 18%; }
.spark--2 { left: 13%; top: 30%; font-size: var(--text-lg); }
.spark--3 { right: 7%; bottom: 26%; }
.spark--4 { right: 4%; top: 12%; font-size: var(--text-xl); }
.dot { position: absolute; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--c-panel); color: var(--c-accent-dark); }
.dot--1 { left: 9%; top: 26%; } .dot--2 { right: 11%; bottom: 24%; }

/* 跨页内容组件 */
.toc { position: sticky; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-panel); color: var(--c-text); }
.toc a { display: block; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-pill); font-size: var(--text-ui); font-weight: var(--weight-semibold); }
.toc a:hover, .toc a[aria-current] { background: var(--c-panel-2); color: var(--c-accent); }
.toc--static { position: static; }
.faq-item { margin-block: 12px; border: 1px solid var(--c-border); border-radius: var(--radius-pane); background: var(--c-panel); color: var(--c-text); }
.faq-item summary { position: relative; padding: 20px 54px 20px 22px; 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: 22px; top: 17px; color: var(--c-accent); font-size: var(--text-xl); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 22px 22px; color: var(--c-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { border-top: 4px solid var(--c-accent); }
.term-name { margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--text-xl); color: var(--c-accent); }
.term-category, .article-meta { color: var(--c-muted); font-size: var(--text-sm); }
.client-card { position: relative; }
.client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; }
.client-icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-head h3 { margin: 0; }
.client-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.client-notes { margin-top: 16px; color: var(--c-muted); font-size: var(--text-ui); }
.badge { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--c-panel-2); color: var(--c-accent-dark); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.5; overflow-wrap: anywhere; }
.badge--primary { background: var(--c-accent); color: var(--c-panel); }
.badge--recommended { background: var(--c-success-soft); color: var(--c-success-ink); }
.badge--retired { background: var(--c-error-soft); color: var(--c-error-ink); }
.badge--warn { background: var(--c-panel-2); color: var(--c-warn-ink); }
.badge-common { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.article-card { display: flex; flex-direction: column; gap: 16px; }
.article-card h3 { margin: 0; }
.article-card p { margin: 0; color: var(--c-muted); }
.article-card .text-link { margin-top: auto; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.callout { margin: 24px 0; padding: 22px 24px; border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--radius-field); background: var(--c-panel-2); color: var(--c-text); }
.callout p:last-child { margin-bottom: 0; }
.callout--warning { border-left-color: var(--c-warn); }
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--radius-field); }
.data-table { width: 100%; border-collapse: collapse; background: var(--c-panel); color: var(--c-text); font-size: var(--text-ui); }
.data-table th, .data-table td, .prose table th, .prose table td {
  min-width: 7em; padding: 14px 18px; border-bottom: 1px solid var(--c-border);
  text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal;
}
.data-table th, .prose table th { background: var(--c-panel-2); color: var(--c-text); font-weight: var(--weight-bold); }
.data-table tr:last-child td { border-bottom: 0; }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; background: var(--c-panel); color: var(--c-text); }
.prose table code, .data-table code { overflow-wrap: anywhere; }
.download-guide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 40px; padding: 28px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-panel-2); color: var(--c-text); }
.download-guide h2 { margin: 0 0 8px; font-size: var(--text-h3); }
.download-guide p { margin: 0; color: var(--c-muted); }
.dl-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); min-height: 52px; padding: 12px 18px; border: 1px solid var(--c-lilac); border-radius: var(--radius-btn); background: var(--c-accent); color: var(--c-panel); box-shadow: var(--shadow-float); font-size: var(--text-ui); font-weight: var(--weight-heavy); }
.dl-fab:hover { background: var(--c-accent-dark); color: var(--c-panel); }
.dl-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.article-page .site-footer { padding-bottom: 108px; }

/* 预览页色卡；色值只存在于 base.css 的设计令牌中。 */
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.swatch { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius-field); background: var(--c-panel); color: var(--c-text); }
.swatch-sample { display: block; height: 58px; border: 1px solid var(--c-border); border-radius: var(--radius-btn); }
.swatch figcaption { padding-top: 8px; font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.sw-bg { background: var(--c-bg); color: var(--c-text); }
.sw-panel { background: var(--c-panel); color: var(--c-text); }
.sw-panel2 { background: var(--c-panel-2); color: var(--c-text); }
.sw-cool { background: var(--c-panel-cool); color: var(--c-text); }
.sw-border { background: var(--c-border); color: var(--c-text); }
.sw-accent { background: var(--c-accent); color: var(--c-panel); }
.sw-bright { background: var(--c-accent-bright); color: var(--c-panel); }
.sw-dark { background: var(--c-accent-dark); color: var(--c-panel); }
.sw-text { background: var(--c-text); color: var(--c-panel); }
.sw-muted { background: var(--c-muted); color: var(--c-panel); }
.sw-success { background: var(--c-success); color: var(--c-text); }
.sw-success-ink { background: var(--c-success-ink); color: var(--c-panel); }
.sw-warn { background: var(--c-warn); color: var(--c-text); }
.sw-warn-ink { background: var(--c-warn-ink); color: var(--c-panel); }
.sw-error { background: var(--c-error); color: var(--c-text); }
.sw-error-ink { background: var(--c-error-ink); color: var(--c-panel); }
.sw-lilac { background: var(--c-lilac); color: var(--c-text); }
.sw-lilac-dim { background: var(--c-lilac-dim); color: var(--c-text); }
.sw-glass { background: var(--c-frame-glass); color: var(--c-text); }
.sw-glass-soft { background: var(--c-frame-glass-soft); color: var(--c-text); }
.sw-skeleton { background: var(--c-skeleton); color: var(--c-text); }
.sw-skeleton-soft { background: var(--c-skeleton-soft); color: var(--c-text); }
.sw-accent-soft { background: var(--c-accent-soft); color: var(--c-text); }
.sw-accent-ring { background: var(--c-accent-ring); color: var(--c-text); }
.sw-success-soft { background: var(--c-success-soft); color: var(--c-text); }
.sw-success-ring { background: var(--c-success-ring); color: var(--c-text); }
.sw-error-soft { background: var(--c-error-soft); color: var(--c-text); }
.sw-on-dark { background: var(--c-on-dark-muted); color: var(--c-text); }
.sw-on-dark-faint { background: var(--c-on-dark-faint); color: var(--c-text); }
.sw-horizon { background: var(--c-horizon); color: var(--c-text); }
.sw-clear { background: var(--c-clear); color: var(--c-text); }
.sw-veil { background: var(--c-veil); color: var(--c-text); }
.sw-pink { background: var(--glow-pink); color: var(--c-text); }
.sw-lemon { background: var(--glow-lemon); color: var(--c-text); }
.sw-mint { background: var(--glow-mint); color: var(--c-text); }
.sw-code-key { background: var(--code-key); color: var(--c-panel); }
.sw-code-str { background: var(--code-str); color: var(--c-panel); }
.sw-code-punc { background: var(--code-punc); color: var(--c-panel); }
.type-display { margin: 0 0 20px; font-size: var(--text-h1); font-weight: var(--weight-black); font-family: var(--font-display); line-height: 1.2; }
.preview-footer { margin-top: 48px; }

@media (max-width: 980px) {
  .titlebar { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .titlebar-right, .rail { display: none; }
  .window-body { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 768px) {
  .hero-title, .type-display { font-size: clamp(24px, 5vw, 30px); }
}
@media (max-width: 680px) {
  .hero { padding: 16px var(--gutter) 36px; }
  .hero-title { font-size: clamp(24px, 7vw, 30px); }
  .lede { font-size: var(--text-button); line-height: 24px; }
  .hero .cta-row { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .platform-row { row-gap: 8px; }
  .plat { padding: 2px 12px; }
  .window-body { grid-template-columns: minmax(0, 1fr); }
  .device { width: 100%; }
  .titlebar { grid-template-columns: minmax(0, 1fr); }
  .searchbar { display: none; }
  .pane { padding: 18px 14px; }
  .rule { font-size: var(--text-rule); padding-left: 8px; gap: 4px; }
  .rule-out { gap: 4px; }
  .tag { padding-inline: 5px; }
  .features-intro { padding-bottom: 36px; }
  .seg, .tab-list { gap: 8px; }
  .seg-item, .tab-button { min-height: 44px; padding: 8px 14px; font-size: var(--text-ui); }
  .band { padding-top: 64px; padding-bottom: 140px; }
  .band::after { height: 70px; }
  .feature-tab { font-size: var(--text-lg); padding: 12px 18px; }
  .feature-panel { padding: 20px; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-guide { padding: 20px; }
  .toc { position: static; }
}