/* 首屏是规则文档读表，不是客户端界面复刻。 */
.hero { position: relative; padding-top: 28px; overflow-x: clip; }
.field { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; gap: 1px; pointer-events: none; overflow: hidden; }
.field span { flex: 1 1 0; background: linear-gradient(90deg, transparent var(--from), var(--tint) 100%); color: var(--text); }
.field span:nth-child(1) { --tint: var(--stripe-1); --from: 56%; }
.field span:nth-child(2) { --tint: var(--stripe-2); --from: 48%; }
.field span:nth-child(3) { --tint: var(--stripe-3); --from: 40%; }
.field span:nth-child(4) { --tint: var(--stripe-4); --from: 32%; }
.field span:nth-child(5) { --tint: var(--stripe-5); --from: 24%; }
.field span:nth-child(6) { --tint: var(--stripe-6); --from: 16%; }
.field span:nth-child(7) { --tint: var(--stripe-7); --from: 10%; }
.field span:nth-child(8) { --tint: var(--stripe-8); --from: 4%; }
.field span:nth-child(9) { --tint: var(--stripe-9); --from: 0%; }
.hero-inner { position: relative; z-index: 1; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 24px; align-items: stretch; }
.cell-main { display: flex; flex-direction: column; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 18px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.01em; }
.eyebrow .dot { background: var(--gradient); box-shadow: 0 0 0 3px var(--halo-proxy); }
.hero h1 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.16; letter-spacing: -0.02em; }
.hero h1 .em { color: var(--accent-dark); }
.lede { margin: 16px 0 0; max-width: 660px; font-size: 17px; line-height: 1.6; }
.lede strong { color: var(--text); font-weight: 500; }
.marks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-height: 28px; font-size: 13.5px; color: var(--text-muted); }
.mark { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.mark svg { width: 18px; height: 18px; color: var(--text); flex-shrink: 0; }
.mark:hover { color: var(--accent-dark); }
.marks-sep { width: 1px; height: 16px; background: var(--border); }
.pill, .badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; max-width: 100%; padding: 3px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); font-size: 12.5px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.pill svg { width: 12px; height: 12px; }
.badge--accent { background: var(--final-tint); color: var(--accent-dark); }
.cell-side { display: grid; grid-template-columns: minmax(0, 1fr) 172px; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.tile { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 17px 18px; color: var(--text); box-shadow: var(--shadow-cell); backdrop-filter: blur(14px) saturate(1.15); }
.tile--a { grid-column: 1 / -1; background: var(--glass); display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.tile--b { background: var(--glass-2); }
.tile--c { background: var(--glass-tint), linear-gradient(var(--glass), var(--glass)); }
.tile-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); display: grid; place-items: center; }
.tile-icon svg { width: 16px; height: 16px; }
.tile-label { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: 0.03em; color: var(--text-muted); }
.tile-title { margin: 8px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.tile-text { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.chips { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { min-height: 24px; max-width: 100%; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg-panel); border: 1px solid var(--border); font: 400 11.5px/1.5 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-dot); flex-shrink: 0; }
.dot--proxy { background: var(--policy-proxy); box-shadow: 0 0 0 3px var(--halo-proxy); }
.dot--direct { background: var(--policy-direct); box-shadow: 0 0 0 3px var(--halo-direct); }
.dot--reject { background: var(--policy-reject); box-shadow: 0 0 0 3px var(--halo-reject); }
.stage { position: relative; z-index: 3; margin-top: 56px; margin-bottom: calc(var(--board-overlap) * -1); }
.board { width: 96%; margin: 0 auto; background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-board); transform: perspective(1600px) rotateX(4deg); transform-origin: 50% 0; overflow: hidden; }
.board-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border); }
.board-tab { position: relative; display: flex; align-items: center; min-height: 34px; padding: 4px 15px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.board-tab + .board-tab::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.board-tab.is-current { color: var(--text); font-weight: 500; background: linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box, var(--gradient) border-box; box-shadow: var(--shadow-near); }
.board-tab.is-current + .board-tab::before { opacity: 0; }
.board-scroll { max-width: 100%; overflow-x: auto; }
.board-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--board-gap) repeat(3, var(--lane-w)); grid-template-rows: 34px repeat(6, 38px) auto; padding: 14px 24px 0; min-width: 1000px; }
.g2 { grid-row: 2; } .g3 { grid-row: 3; } .g4 { grid-row: 4; } .g5 { grid-row: 5; } .g6 { grid-row: 6; } .g7 { grid-row: 7; }
.col-head { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 2px; font-size: 12px; color: var(--text-muted); }
.col-head b { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.03em; color: var(--text); }
.col-head b span { color: var(--text-muted); font-weight: 400; }
.rgroup { grid-column: 1; grid-row: 2 / 8; position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-near); }
.rgroup::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 52px; background: var(--bg); border-right: 1px solid var(--hairline); border-radius: var(--r-md) 0 0 var(--r-md); }
.rule { grid-column: 1; position: relative; z-index: 1; display: grid; grid-template-columns: 52px 22px minmax(0, 1fr) auto; align-items: center; min-width: 0; }
.rule + .rule::after { content: ""; position: absolute; left: 52px; right: 1px; top: 0; height: 1px; background: var(--hairline); }
.num { text-align: center; font: 400 12px/1 var(--font-mono); color: var(--text-muted); letter-spacing: 0.02em; }
.rule .dot { justify-self: end; margin-right: 1px; }
.code { padding-left: 12px; font: 400 13px/1.4 var(--font-mono); color: var(--text); white-space: nowrap; overflow-wrap: normal; }
.note { padding: 0 16px 0 12px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.rule--final { background: linear-gradient(90deg, var(--final-tint), transparent 62%); color: var(--text); border-radius: 0 0 var(--r-md) var(--r-md); }
.rule--final::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 7px; width: 3px; border-radius: var(--r-xs); background: var(--gradient-v); }
.rule--final .num { color: var(--accent-dark); font-weight: 500; }
.lane { grid-row: 1 / 8; position: relative; margin: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: linear-gradient(180deg, var(--lane-tint) 0%, transparent 100%), linear-gradient(var(--bg), var(--bg)); color: var(--text); }
.lane--proxy { grid-column: 3; --lane-tint: var(--lane-proxy); }
.lane--direct { grid-column: 4; --lane-tint: var(--lane-direct); }
.lane--reject { grid-column: 5; --lane-tint: var(--lane-reject); }
.lane-head { grid-row: 1; position: relative; z-index: 4; justify-self: center; align-self: center; display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px 0 9px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-near); font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; }
.c3 { grid-column: 3; } .c4 { grid-column: 4; } .c5 { grid-column: 5; }
.lane-head .dot { width: 6px; height: 6px; }
.wire { position: relative; z-index: 2; pointer-events: none; }
.wire::before { content: ""; position: absolute; left: 0; right: calc(var(--lane-w) / 2); top: 50%; height: 9px; border-top: 1px dashed var(--wire); border-right: 1px dashed var(--wire); }
.wire::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: var(--r-dot); right: calc(var(--lane-w) / 2 - 3.5px); top: calc(50% + 6px); background: var(--tip); box-shadow: 0 0 0 2.5px var(--bg-panel), 0 0 0 5px var(--halo); }
.to-proxy { grid-column: 2 / 4; --wire: var(--wire-proxy); --tip: var(--policy-proxy); --halo: var(--halo-proxy); }
.to-direct { grid-column: 2 / 5; --wire: var(--wire-direct); --tip: var(--policy-direct); --halo: var(--halo-direct); }
.to-reject { grid-column: 2 / 6; --wire: var(--wire-reject); --tip: var(--policy-reject); --halo: var(--halo-reject); }
.rnote { grid-column: 1; grid-row: 8; margin: 0; padding: 14px 4px 0 2px; max-width: 460px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.rnote code { font-weight: 500; color: var(--text); }
.routing { grid-column: 3 / 6; grid-row: 8; margin: 12px 12px 0; padding: 12px 14px; background: var(--bg-panel-2); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.routing-top { display: flex; align-items: center; justify-content: space-between; min-height: 16px; font-size: 13px; font-weight: 500; }
.routing-top span { font: 400 11px/1 var(--font-mono); color: var(--text-muted); }
.seg { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--seg-track); color: var(--text); }
.seg span { height: 26px; display: grid; place-items: center; border-radius: var(--r-xs); font-size: 12.5px; color: var(--text-muted); }
.seg .on { background: var(--bg-panel); color: var(--text); font-weight: 500; box-shadow: var(--shadow-seg); }
.routing p { margin: 8px 0 0; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
.board-legend { margin-top: 32px; padding: 22px 24px 48px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-size: 13px; color: var(--text-muted); }
.legend-title { font: 500 11.5px/1 var(--font-mono); color: var(--text); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item code { color: var(--text); }
.band { position: relative; z-index: 0; height: 210px; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--border); }
.band span { flex: 1 1 0; }
.band span:nth-child(1) { background: linear-gradient(90deg, var(--band-1-from), var(--band-1-to)); }
.band span:nth-child(2) { background: linear-gradient(90deg, var(--band-2-from), var(--band-2-to)); }

/* 目录式功能切换；序号和 FINAL 渐变边线沿用同一母题。 */
.feature-tabs { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 24px; align-items: start; }
.tab-list { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feature-tab { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 14px 18px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--bg); color: var(--text-muted); text-align: left; font-size: 15px; line-height: 1.5; }
.feature-tab .num { flex-shrink: 0; }
.feature-tab[aria-selected="true"] { background: var(--bg-panel); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-near); }
.feature-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: var(--r-xs); background: var(--gradient-v); }
.tab-panel { position: relative; padding: 36px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-cell); min-width: 0; }
.tab-panel::before { content: ""; position: absolute; inset: 0 24px auto; height: 4px; background: var(--gradient); border-radius: 0 0 var(--r-xs) var(--r-xs); }
.tab-panel h3 { margin-top: 0; }
.group-list { padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--text); }
.group-list li { position: relative; min-width: 0; padding: 15px 38px 15px 18px; }
.group-list li + li { border-top: 1px solid var(--hairline); }
.group-list li::after { content: "›"; position: absolute; right: 16px; top: 13px; color: var(--text-muted); }
.group-list code { display: block; overflow-x: auto; white-space: nowrap; overflow-wrap: normal; }
.toc { position: sticky; top: 12px; z-index: 10; display: flex; gap: 8px; padding: 10px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-near); }
.toc a { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none; font-size: 14px; }
.toc a:hover, .toc a[aria-current] { background: var(--chip); color: var(--text); }
.chapter-number { display: inline-block; margin-right: 12px; font-family: var(--font-mono); font-size: 0.6em; color: var(--accent-dark); border-left: 3px solid var(--accent); padding-left: 10px; border-image: var(--gradient-v) 1; }
.faq-item { border-bottom: 1px solid var(--border); background: var(--bg-panel); color: var(--text); }
.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 22px 44px 22px 20px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 20px; color: var(--text-muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 20px 22px; color: var(--text-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-cell); }
.term-card dt { font: 500 18px/1.5 var(--font-mono); margin-bottom: 12px; }
.term-card dd { margin: 0; color: var(--text-muted); }
.store-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 8px 22px; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); text-decoration: none; box-shadow: var(--shadow-near); }
.store-button:hover, .store-button.is-hover { background: var(--ink-hover); color: var(--on-ink); }
.store-button svg { width: 24px; height: 28px; }
.store-button span { display: block; }
.store-button small { display: block; font-size: 11px; line-height: 1.4; }
.store-button strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; }
.fact-row { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; margin-block: 20px; padding: 0; list-style: none; }
.fact-row li { max-width: 100%; }
.fact-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.fact-pill b { color: var(--text); font-weight: 500; }
.official-shot { width: min(100%, 280px); max-width: 280px; flex-shrink: 0; margin-inline: auto; padding: 0; }
.official-shot img { display: block; width: 100%; height: auto; border-radius: 10px; }
.official-shot { border-radius: var(--r-sm); outline: 1px solid var(--border); background: var(--bg-panel); color: var(--text); }
.official-shot figcaption { padding-top: 12px; padding-bottom: 12px; font-size: 12px; line-height: 1.6; text-align: center; color: var(--text-muted); }
.shot-row { display: flex; align-items: start; justify-content: center; gap: 32px; flex-wrap: wrap; }
.device-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-cell); }
.device-card > svg { width: 48px; height: 64px; }
.device-card h3 { margin: 0 0 10px; }
.device-card p { font-size: 14px; color: var(--text-muted); }
.device-card a { color: var(--accent-dark); }
.article-card { position: relative; min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-cell); }
.article-card h3 { margin: 16px 0 12px; font-size: 21px; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { margin-bottom: 0; font-size: 14px; color: var(--text-muted); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
.callout { position: relative; margin: 24px 0; padding: 20px 24px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--bg-panel-2); color: var(--text); }
.callout::before { content: ""; position: absolute; left: -4px; top: 14px; bottom: 14px; width: 4px; background: var(--gradient-v); }
.callout p:last-child { margin-bottom: 0; }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-md); }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); color: var(--text); font-size: 14px; text-align: left; }
.data-table th, .data-table td, .prose th, .prose td { min-width: 7em; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose th { background: var(--bg-panel-2); color: var(--text); font-weight: 500; }
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; background: var(--bg-panel); color: var(--text); }
.prose table td code, .data-table td code { overflow-wrap: anywhere; }
.dl-fab { position: fixed; z-index: 25; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); min-height: 56px; padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); text-decoration: none; box-shadow: var(--shadow-mid); font-size: 14px; }
.dl-fab svg { width: 20px; height: 20px; }
.article-store-card { margin-top: 44px; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel-2); color: var(--text); }
.article-store-card h2 { font-size: 24px; margin-top: 0; }
.article-store-card p { color: var(--text-muted); }

/* 只用于无脚本的设计预览。 */
.preview-section { padding-top: 72px; padding-bottom: 72px; border-top: 1px solid var(--border); }
.preview-heading { margin: 0 0 28px; font-size: 30px; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.preview-grid > * { min-width: 0; }
.preview-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.shot-placeholder { aspect-ratio: 750 / 1334; width: 100%; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-panel-2); color: var(--text-muted); text-align: center; font: 400 13px/1.8 var(--font-mono); }
.swatch-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch-list li { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); font: 400 12px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.swatch { display: block; height: 56px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-xs); }
.sw-bg { background: var(--bg); } .sw-panel { background: var(--bg-panel); } .sw-panel2 { background: var(--bg-panel-2); } .sw-border { background: var(--border); }
.sw-text { background: var(--text); } .sw-muted { background: var(--text-muted); } .sw-accent { background: var(--accent); } .sw-dark { background: var(--accent-dark); }
.sw-success { background: var(--success); } .sw-warn { background: var(--warn); } .sw-error { background: var(--error); } .sw-gradient { background: var(--gradient); }
.sw-grad1 { background: var(--grad-1); } .sw-grad2 { background: var(--grad-2); } .sw-grad3 { background: var(--grad-3); } .sw-inkhover { background: var(--ink-hover); }
.sw-chip { background: var(--chip); } .sw-chiphover { background: var(--chip-hover); } .sw-hairline { background: var(--hairline); } .sw-track { background: var(--seg-track); }
.sw-nav { background: var(--nav-bg); } .sw-glass { background: var(--glass); } .sw-glass2 { background: var(--glass-2); } .sw-tint { background: var(--glass-tint); }
.sw-stripes { background: linear-gradient(180deg, var(--stripe-1), var(--stripe-2), var(--stripe-3), var(--stripe-4), var(--stripe-5), var(--stripe-6), var(--stripe-7), var(--stripe-8), var(--stripe-9)); }
.sw-proxy { background: var(--policy-proxy); } .sw-direct { background: var(--policy-direct); } .sw-reject { background: var(--policy-reject); }
.sw-halos { background: linear-gradient(90deg, var(--halo-proxy), var(--halo-direct), var(--halo-reject)); }
.sw-wires { background: linear-gradient(90deg, var(--wire-proxy), var(--wire-direct), var(--wire-reject)); }
.sw-lanes { background: linear-gradient(90deg, var(--lane-proxy), var(--lane-direct), var(--lane-reject)); }
.sw-final { background: var(--final-tint); } .sw-veil { background: var(--veil); }
.sw-bands { background: linear-gradient(90deg, var(--band-1-from), var(--band-1-to), var(--band-2-from), var(--band-2-to)); }
@media (max-width: 1100px) {
  .bento { grid-template-columns: minmax(0, 1fr) 380px; }
  .cell-side { grid-template-columns: minmax(0, 1fr) 150px; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .cell-side { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto; }
  .tile--a { grid-column: auto; }
  .feature-tabs { grid-template-columns: minmax(0, 1fr); }
  .tab-list { position: static; flex-direction: row; overflow-x: auto; padding: 4px; }
  .feature-tab { width: auto; flex-shrink: 0; border-radius: var(--r-pill); white-space: nowrap; }
  .feature-tab[aria-selected="true"]::before { display: none; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: clamp(24px, 5vw, 30px); }
  .cell-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tile--a { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { padding-top: 24px; }
  .hero .lede { font-size: 15px; }
  .marks { gap: 12px; font-size: 12px; }
  .marks .mark { gap: 5px; }
  .marks-sep { display: none; }
  .stage { margin-top: 56px; }
  .board { width: 100%; transform: none; }
  .board-tabs { gap: 2px; }
  .board-tab { padding-inline: 5px; font-size: 10px; justify-content: center; }
  .board-legend { gap: 16px; padding: 20px 16px 28px; margin-top: 24px; }
  .band { height: 170px; }
  .fact-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .tab-panel { padding: 24px 20px; }
  .feature-tab { gap: 10px; font-size: 13px; min-height: 48px; padding: 10px 14px; }
  .device-card { padding: 20px; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .device-card > svg { width: 36px; height: 50px; }
  .preview-grid { grid-template-columns: minmax(0, 1fr); }
  .swatch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-section { padding-top: 48px; padding-bottom: 48px; }
  .shot-row { flex-direction: column; align-items: center; }
  .official-shot { width: min(100%, 280px); }
  .dl-fab { font-size: 12px; min-height: 48px; }
}