/* 静态首屏：Bento、右上条带光场、跨屏客户端窗口。 */
.hero { position:relative; isolation:isolate; overflow:hidden; padding-top:24px; padding-bottom:128px; border-bottom:1px solid var(--border) }
.field { position:absolute; left:0; right:0; z-index:-1; pointer-events:none }
.field-top {
  top:0; height:860px;
  background-image:
    linear-gradient(90deg,rgba(var(--white-rgb),0),rgba(var(--white-rgb),.24)),
    linear-gradient(90deg,var(--clear) 0 33.333%,rgba(var(--violet-rgb),.05) 33.333% 41.667%,rgba(var(--violet-rgb),.09) 41.667% 50%,rgba(var(--violet-rgb),.14) 50% 58.333%,rgba(var(--violet-rgb),.21) 58.333% 66.667%,rgba(var(--violet-rgb),.29) 66.667% 75%,rgba(var(--orchid-rgb),.30) 75% 83.333%,rgba(var(--magenta-rgb),.28) 83.333% 91.667%,rgba(var(--magenta-rgb),.36) 91.667% 100%);
  background-size:calc(100% / 12) 100%,100% 100%;
  background-repeat:repeat-x,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,var(--mask-low) 0%,var(--mask-on) 40%,var(--mask-on) 70%,var(--clear) 100%);
  mask-image:linear-gradient(180deg,var(--mask-low) 0%,var(--mask-on) 40%,var(--mask-on) 70%,var(--clear) 100%);
}
.field-foot {
  bottom:0; height:480px;
  background-image:
    linear-gradient(90deg,rgba(var(--white-rgb),0),rgba(var(--white-rgb),.22)),
    linear-gradient(90deg,rgba(var(--magenta-rgb),.08) 0 8.333%,rgba(var(--magenta-rgb),.18) 8.333% 16.667%,rgba(var(--magenta-rgb),.24) 16.667% 25%,rgba(var(--magenta-rgb),.28) 25% 33.333%,rgba(var(--magenta-rgb),.26) 33.333% 41.667%,rgba(var(--apricot-rgb),.32) 41.667% 50%,rgba(var(--apricot-rgb),.38) 50% 58.333%,rgba(var(--apricot-rgb),.42) 58.333% 66.667%,rgba(var(--apricot-rgb),.46) 66.667% 75%,rgba(var(--apricot-rgb),.48) 75% 83.333%,rgba(var(--apricot-rgb),.44) 83.333% 91.667%,rgba(var(--apricot-rgb),.30) 91.667% 100%);
  background-size:calc(100% / 12) 100%,100% 100%; background-repeat:repeat-x,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,var(--clear) 0%,var(--mask-on) 64%,var(--mask-on) 100%);
  mask-image:linear-gradient(180deg,var(--clear) 0%,var(--mask-on) 64%,var(--mask-on) 100%);
}
.bento { display:grid; grid-template-columns:minmax(0,1fr) 248px 232px; grid-template-rows:1fr 1fr; gap:16px }
.bento > * { min-width:0 }
.cell-hero { grid-column:1; grid-row:1 / 3; padding:30px 36px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-box); box-shadow:var(--shadow-1) }
.tag { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:3px 12px 3px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel-2); color:var(--muted); font-size:var(--f-13) }
.tag-dot { flex-shrink:0; width:7px; height:7px; border-radius:var(--r-round); background:var(--grad); color:var(--text); box-shadow:0 0 0 3px var(--accent-ring) }
.platforms { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px }
.platforms-k { margin-right:6px; font-size:var(--f-13); color:var(--muted) }
.pf { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 12px 5px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--text-2); font-size:var(--f-13); line-height:1; transition:color var(--ease),border-color var(--ease) }
.pf svg { flex-shrink:0; width:14px; height:14px }
.pf-linux svg { width:13px; height:15px }
.pf:hover { color:var(--accent-dark); border-color:var(--accent-line) }
.cell { display:flex; flex-direction:column; padding:18px 20px; border:1px solid var(--glass-line); border-radius:var(--r-card); color:var(--text); box-shadow:var(--shadow-1); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); transition:transform 200ms ease,box-shadow 200ms ease }
.cell:hover { transform:translateY(-3px); box-shadow:var(--shadow-2) }
.cell-core { grid-column:2; grid-row:1 / 3; background:var(--glass-2); color:var(--text) }
.cell-license { grid-column:3; grid-row:1; background:var(--glass-3); color:var(--text) }
.cell-proto { grid-column:3; grid-row:2; background:var(--glass-3); color:var(--text) }
.cell-k { font-size:var(--f-125); letter-spacing:.02em; color:var(--muted) }
.cell-v { margin-top:8px; font-family:var(--font-display); font-size:var(--f-22); line-height:1.2; letter-spacing:-.02em; color:var(--text) }
.cell-v-lg { font-size:var(--f-26) }
.core-list { display:grid; gap:8px; margin:16px 0 0; padding:0; list-style:none }
.core-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; padding:6px 12px; border:1px solid var(--glass-line); border-radius:var(--r-12); background:var(--glass-chip); color:var(--text); font-family:var(--font-mono); font-size:var(--f-125) }
.core-list li.is-default { border-color:var(--accent-line) }
.core-list small { font-family:var(--font-body); font-size:var(--f-115); color:var(--accent-dark) }
.cell-note { margin:auto 0 0; padding-top:14px; font-size:var(--f-125); line-height:1.6; color:var(--muted) }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.chip { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border:1px solid var(--glass-line); border-radius:var(--r-pill); background:var(--glass-chip); color:var(--text); font-family:var(--font-mono); font-size:var(--f-115); overflow-wrap:anywhere }
.stage { position:relative; margin-top:30px; perspective:2400px; perspective-origin:50% 0 }
.rig { position:relative; width:min(1200px,100%); margin-inline:auto; transform:rotateX(4deg); transform-origin:50% 0; transform-style:preserve-3d }
.win { position:relative; overflow:hidden; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-win); box-shadow:var(--shadow-win) }
.win-title { display:flex; align-items:center; height:40px; padding-left:16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--panel),var(--panel-soft)); color:var(--text); box-shadow:inset 0 1px 0 var(--panel) }
.win-app { flex-shrink:0; width:14px; height:14px; margin-right:9px; border-radius:var(--r-4); background:var(--grad); color:var(--text) }
.win-name { font-size:var(--f-13); font-weight:var(--weight-medium) }
.win-ctrl { display:flex; margin-left:auto }
.win-ctrl span { display:grid; place-items:center; width:46px; height:40px; color:var(--muted) }
.wc { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1 }
.win-menu { display:flex; align-items:center; gap:2px; min-height:38px; padding:0 10px; border-bottom:1px solid var(--border); font-size:var(--f-13); color:var(--text-2) }
.win-menu > span { flex-shrink:0; padding:5px 11px; border-radius:var(--r-8) }
.win-menu > span.on { background:var(--panel-2); color:var(--text) }
.menu-status { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-size:var(--f-12); color:var(--muted) }
.dot-ok { flex-shrink:0; width:7px; height:7px; border-radius:var(--r-round); background:var(--success); color:var(--text); box-shadow:0 0 0 3px var(--success-ring) }
.win-body { display:grid; grid-template-columns:188px minmax(0,1fr) 420px; min-height:500px }
.win-body > * { min-width:0 }
.side { padding:16px 12px; border-right:1px solid var(--border); background:var(--panel-soft); color:var(--text) }
.side-k { padding:0 10px 8px; font-size:var(--f-115); letter-spacing:.04em; color:var(--muted) }
.side ul { display:grid; gap:2px; margin:0; padding:0; list-style:none }
.side li { display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 10px; border:1px solid var(--clear); border-radius:var(--r-sm); font-size:var(--f-135); color:var(--muted) }
.side li.on { background:var(--panel); border-color:var(--border); box-shadow:var(--shadow-xs); color:var(--text) }
.side li.on .ic { color:var(--accent) }
.ic { flex-shrink:0; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.pane { padding:20px 24px 24px }
.pane-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px }
.pane-t { font-size:var(--f-17); letter-spacing:-.01em; color:var(--text) }
.pane-d { font-size:var(--f-125); color:var(--muted) }
.pane-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px }
.pane-grid > * { min-width:0 }
.box { border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text) }
.box-k { padding:10px 14px 4px; font-size:var(--f-115); color:var(--muted) }
.radios { padding-bottom:6px }
.radio { display:flex; align-items:center; gap:10px; min-height:38px; margin:0 6px; padding:7px 8px; border-radius:var(--r-9); font-size:var(--f-13); color:var(--text-2) }
.radio i { display:grid; place-items:center; flex-shrink:0; width:15px; height:15px; border:1.5px solid var(--border-strong); border-radius:var(--r-round) }
.radio.on { background:var(--accent-wash); color:var(--text) }
.radio.on i { border-color:var(--accent) }
.radio.on i::after { content:""; width:7px; height:7px; border-radius:var(--r-round); background:var(--accent); color:var(--text) }
.row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; min-height:42px; padding:7px 12px 7px 14px; font-size:var(--f-13); color:var(--text-2) }
.row + .row { border-top:1px solid var(--border) }
.sel { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 8px 4px 10px; border:1px solid var(--border); border-radius:var(--r-8); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs); font-size:var(--f-125) }
.sel svg { width:10px; height:10px; fill:none; stroke:var(--muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.tgl { position:relative; flex-shrink:0; width:34px; height:20px; border-radius:var(--r-pill); background:var(--toggle-off); color:var(--text) }
.tgl::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--r-round); background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs) }
.tgl.on { background:var(--accent); color:var(--on-accent) }
.tgl.on::after { left:16px }
.mono-chip { padding:3px 8px; border:1px solid var(--border); border-radius:var(--r-6); background:var(--panel-2); color:var(--text); font-family:var(--font-mono); font-size:var(--f-115); overflow-wrap:anywhere }
.list { margin-top:14px }
.list-h { display:grid; grid-template-columns:64px 1.4fr 1.4fr 64px 1fr; gap:8px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:var(--f-115); color:var(--muted) }
.empty { display:grid; place-content:center; gap:4px; min-height:92px; margin:10px; padding:10px; border:1px dashed var(--border-strong); border-radius:var(--r-12); text-align:center }
.empty b { font-size:var(--f-135); font-weight:var(--weight-normal); color:var(--text-2) }
.empty span { font-size:var(--f-12); color:var(--muted) }
.code { display:flex; flex-direction:column; min-width:0; border-left:1px solid var(--border); background:var(--panel-2); color:var(--text) }
.code-h { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 14px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:var(--f-12); color:var(--muted) }
.code-tab { padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-xs); background:var(--panel); color:var(--text) }
.code-meta { margin-left:auto }
.code-body { max-width:100%; overflow-x:auto; padding:12px 0; counter-reset:ln; font-family:var(--font-mono); font-size:var(--f-12); line-height:20px; color:var(--text) }
.l { display:block; width:max-content; min-width:100%; padding-right:16px; white-space:pre; counter-increment:ln }
.l::before { content:counter(ln); display:inline-block; width:44px; padding-right:14px; text-align:right; color:var(--muted) }
.l.hi { background:var(--accent-wash); color:var(--text); box-shadow:inset 2px 0 0 var(--accent) }
.k { color:var(--accent-dark) }
.p { color:var(--muted) }
.drawer { position:absolute; top:200px; right:-88px; width:236px; overflow:hidden; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-drawer); transform:translateZ(40px) }
.dr-head { display:flex; align-items:center; gap:10px; padding:16px 18px 14px; border-bottom:1px solid var(--border) }
.dr-app { flex-shrink:0; width:26px; height:26px; border-radius:var(--r-8); background:var(--grad); color:var(--text) }
.dr-name { display:block; font-size:var(--f-14); font-weight:var(--weight-medium); line-height:1.2; color:var(--text) }
.dr-sub { display:block; font-size:var(--f-115); line-height:1.4; color:var(--muted) }
.dr-switch { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 18px; border-bottom:1px solid var(--border); font-size:var(--f-13); color:var(--text) }
.dr-switch .ic { color:var(--accent) }
.dr-switch .tgl { margin-left:auto }
.dr-list { margin:0; padding:6px 0 10px; list-style:none }
.dr-list li { display:flex; align-items:center; gap:12px; min-height:40px; padding:8px 18px; font-size:var(--f-13); color:var(--text-2) }
.dr-list .ic { color:var(--muted) }

/* 跨页内容组件 */
.tabs { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-box); background:var(--panel); color:var(--text); box-shadow:var(--shadow-1) }
.tab-bar,[role="tablist"] { display:flex; align-items:stretch; overflow-x:auto; max-width:100%; border-bottom:1px solid var(--border); scrollbar-width:thin }
[role="tab"] { position:relative; flex:1 0 auto; min-height:60px; padding:18px 24px; background:var(--panel); color:var(--muted); font-family:var(--font-body); font-size:var(--f-15); font-weight:var(--weight-medium); white-space:nowrap }
[role="tab"]:hover { background:var(--panel-soft); color:var(--text) }
[role="tab"][aria-selected="true"] { color:var(--text); background:var(--panel) }
[role="tab"][aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:18px; right:18px; height:2px; background:var(--grad); color:var(--text) }
[role="tab"]:focus-visible { outline-offset:-5px }
[role="tabpanel"] { min-width:0; padding:36px }
.feature-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px }
.feature-layout > * { min-width:0 }
.feature-layout p { color:var(--muted) }
.feature-points { margin:20px 0 0; padding-left:20px }
.feature-frame { padding:28px; border-radius:var(--r-card); background:var(--grad-soft); color:var(--text) }
.gradient-band { padding-top:40px; padding-bottom:40px; background:var(--grad); color:var(--text) }
.gradient-band p { margin:0; font-size:var(--f-22); font-weight:var(--weight-medium) }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text); box-shadow:var(--shadow-1) }
.toc a { display:block; padding:8px 14px; border-radius:var(--r-pill); font-size:var(--f-14); color:var(--text-2) }
.toc a:hover,.toc a[aria-current="location"] { background:var(--accent-wash); color:var(--accent-dark) }
.toc-sticky { position:sticky; top:16px; z-index:10; align-self:start }
.faq-item { border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-1) }
.faq-item + .faq-item { margin-top:12px }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:20px 24px; list-style:none; font-size:var(--f-17) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; flex-shrink:0; font-family:var(--font-mono); color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 20px; color:var(--muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { scroll-margin-top:24px }
.term-card dt { margin:12px 0; font-size:var(--f-22); font-weight:var(--weight-medium) }
.term-card dd { margin:0; color:var(--muted) }
.term-category { color:var(--accent-dark); font-size:var(--f-13) }
.client-card { display:flex; flex-direction:column; gap:20px }
.client-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px }
.client-heading h3 { margin:0 }
.client-version { font-family:var(--font-mono); font-size:var(--f-13); color:var(--muted) }
.client-card p { margin:0; color:var(--muted) }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto }
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.badge { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:26px; padding:3px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel-2); color:var(--text-2); font-size:var(--f-12); overflow-wrap:anywhere }
.badge-top,.badge-recommended { border-color:var(--accent-line); background:var(--accent-wash); color:var(--accent-dark) }
.badge-retired { border-color:var(--border-strong); background:var(--panel-2); color:var(--muted) }
.badge-dynamic { white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis }
.article-card { display:flex; flex-direction:column; gap:16px; height:100% }
.article-card h3 { margin:0 }
.article-card p { margin:0; color:var(--muted) }
.article-card .meta { margin-top:auto }
.article-card h3 a { color:var(--text) }
.article-card h3 a:hover { color:var(--accent-dark) }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--panel-2); color:var(--text-2) }
.callout strong { color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout-warning { border-left-color:var(--warn) }
.callout-error { border-left-color:var(--error) }
.callout-success { border-left-color:var(--success) }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text) }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--f-14) }
.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(--panel-2); color:var(--text); font-weight:var(--weight-medium) }
.data-table td,.prose td { background:var(--panel); color:var(--text-2) }
.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; text-align:left }
.prose table code,.data-table code { overflow-wrap:anywhere; word-break:normal }
.article-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-1) }
.article-download h2 { margin-bottom:8px; font-size:var(--f-22) }
.article-download p { margin:0; color:var(--muted) }
.dl-fab { position:fixed; right:max(var(--gutter),env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:25; display:flex; align-items:center; gap:12px; max-width:calc(100% - var(--gutter) * 2); padding:14px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--text); box-shadow:var(--shadow-2) }
.dl-fab svg { flex-shrink:0; width:22px; height:22px; fill:none; stroke:var(--accent-dark); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.dl-fab strong { display:block; font-size:var(--f-14); font-weight:var(--weight-medium) }
.dl-fab small { display:block; color:var(--muted); font-size:var(--f-12) }
.dl-fab:hover { border-color:var(--accent-line); color:var(--accent-dark) }
.has-dl-fab .site-footer { padding-bottom:110px }

/* 预览页色板，色值仍仅由令牌提供。 */
.swatch-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text) }
.swatch i { display:block; height:64px; margin-bottom:10px; border:1px solid var(--border); border-radius:var(--r-8) }
.swatch code { font-size:var(--f-12) }
.sw-bg { background:var(--bg); color:var(--text) }
.sw-panel { background:var(--panel); color:var(--text) }
.sw-panel2 { background:var(--panel-2); color:var(--text) }
.sw-soft { background:var(--panel-soft); color:var(--text) }
.sw-border { background:var(--border); color:var(--text) }
.sw-border-strong { background:var(--border-strong); color:var(--text) }
.sw-accent { background:var(--accent); color:var(--on-accent) }
.sw-dark { background:var(--accent-dark); color:var(--on-accent) }
.sw-text { background:var(--text); color:var(--panel) }
.sw-text2 { background:var(--text-2); color:var(--panel) }
.sw-muted { background:var(--muted); color:var(--panel) }
.sw-faint { background:var(--faint); color:var(--text) }
.sw-success { background:var(--success); color:var(--text) }
.sw-warn { background:var(--warn); color:var(--text) }
.sw-error { background:var(--error); color:var(--panel) }
.sw-violet { background:var(--violet); color:var(--text) }
.sw-apricot { background:var(--apricot); color:var(--text) }
.sw-toggle { background:var(--toggle-off); color:var(--text) }
.sw-grad { background:var(--grad); color:var(--text) }
.sw-wash { background:var(--accent-wash); color:var(--text) }
.sw-ring { background:var(--accent-ring); color:var(--text) }
.sw-line { background:var(--accent-line); color:var(--text) }
.sw-success-ring { background:var(--success-ring); color:var(--text) }
.sw-glass2 { background:var(--glass-2); color:var(--text) }
.sw-glass3 { background:var(--glass-3); color:var(--text) }
.sw-chip { background:var(--glass-chip); color:var(--text) }
.sw-glassline { background:var(--glass-line); color:var(--text) }
.sw-rim { background:var(--rim); color:var(--text) }
.sw-veil { background:var(--veil); color:var(--text) }
.sw-mask { background:var(--mask-on); color:var(--panel) }
.sw-masklow { background:var(--mask-low); color:var(--text) }
@media (max-width:1180px) {
  .bento { grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .cell-hero { grid-column:1 / -1; grid-row:auto }
  .cell-core { grid-column:1; grid-row:2 / 4 }
  .cell-license { grid-column:2; grid-row:2 }
  .cell-proto { grid-column:2; grid-row:3 }
  .win-body { grid-template-columns:168px minmax(0,1fr) 360px }
  .drawer { right:-16px }
}
@media (max-width:900px) {
  .win-body { grid-template-columns:minmax(0,1fr) }
  .side,.drawer { display:none }
  .code { border-left:0; border-top:1px solid var(--border) }
  .pane-grid { grid-template-columns:minmax(0,1fr) }
  .win-menu { overflow-x:auto }
  .menu-status { display:none }
  .feature-layout { grid-template-columns:minmax(0,1fr); gap:28px }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .hero { padding-bottom:72px }
  .cell-hero { padding:24px 20px; border-radius:var(--r-card) }
  .bento { grid-template-columns:minmax(0,1fr) }
  .cell-core,.cell-license,.cell-proto { grid-column:auto; grid-row:auto }
  .rig { transform:none }
  .pane { padding:20px 16px }
  .list-h { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .list-h span:nth-child(n+4) { display:none }
  .win-ctrl span { width:32px }
  [role="tabpanel"] { padding:22px }
  .feature-frame { padding:16px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .faq-item summary { padding:18px; font-size:var(--f-16) }
  .faq-answer { padding:0 18px 18px }
  .platforms,.badges,.chips { flex-direction:row; flex-wrap:wrap }
}
@media (prefers-reduced-motion:reduce) {
  .cell:hover { transform:none }
}