/* 横向功能栏与详情窗 */
.feature-section {
  position: relative;
  max-width: 1392px;
  margin: 0 auto 48px;
  padding: 72px 40px 56px;
  border-radius: var(--r-panel);
  background: var(--c-panel-2);
  color: var(--c-text);
  overflow: hidden;
}
.feature-section > .h2, .feature-section > .next-lede { position: relative; text-align: center; }
.next-wrap { margin-inline: 24px; }
.h2 { margin: 0; font-size: 32px; font-weight: 900; line-height: 1.25; }
.h2 em { font-style: normal; color: var(--c-accent); }
.next-lede { margin: 14px auto 0; max-width: 620px; color: var(--c-muted); }
.trace { position: absolute; width: 220px; height: 200px; fill: none; stroke: var(--c-trace); stroke-width: 1.4; pointer-events: none; }
.trace-l { left: 0; top: 0; }
.trace-r { right: 0; top: 0; transform: scaleX(-1); }
.trace-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.trace-br { right: 0; bottom: 0; transform: scale(-1); }
.tab-window { position: relative; max-width: 1180px; margin: 40px auto 0; border: 1px solid var(--c-border); border-radius: var(--r-tabs); background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow-card); }
.tabs, [role="tablist"].platform-tabs { display: flex; align-items: stretch; gap: 6px; margin: 0; padding: 10px; list-style: none; overflow-x: auto; overscroll-behavior-inline: contain; }
.tab {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  padding: 16px 10px 18px;
  border: 0;
  border-radius: var(--r-window);
  background: var(--c-bg);
  color: var(--c-text);
  text-align: center;
  font: inherit;
}
.tab:hover { background: var(--c-panel); color: var(--c-text); }
.tab.is-on, .tab[aria-selected="true"] { background: var(--c-panel); color: var(--c-text); }
.tab[aria-selected="true"]::after, .tab.is-on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 4px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); }
.tab-ico { width: 42px; height: 42px; margin: 0 auto 10px; border-radius: var(--r-row); display: grid; place-items: center; flex-shrink: 0; }
.tab-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-n { display: block; font-size: 15px; font-weight: 800; }
.tab-d { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }
.tab-panel { padding: 36px; border-top: 1px solid var(--c-border); }
.feature-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; text-align: left; }
.feature-detail h3 { margin-top: 0; }
.feature-detail p { color: var(--c-muted); }
.detail-window { border: 1px solid var(--c-border); border-radius: var(--r-window); background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow-card); }
.detail-window pre { margin: 0; border: 0; border-radius: 0 0 var(--r-window) var(--r-window); background: var(--c-bg); color: var(--c-text); }
.tab-progress { height: 3px; overflow: hidden; border-radius: var(--r-pill); background: var(--c-border); color: var(--c-text); }
.tab-progress::after { content: ""; display: block; width: 100%; height: 100%; background: var(--c-accent); color: var(--c-on-accent); transform-origin: left; transform: scaleX(0); }
[data-autoplay].is-playing .tab-progress::after { animation: tab-clock var(--tab-cycle) linear infinite; }
[data-autoplay].is-paused .tab-progress::after { animation: none; transform: scaleX(0); }
@keyframes tab-clock { to { transform: scaleX(1); } }
.platform-tabs .tab { flex: 0 0 auto; min-height: 44px; padding: 10px 22px; border-radius: var(--r-pill); }
.platform-tabs .tab[aria-selected="true"] { background: var(--c-tint-blue); color: var(--c-accent-dark); }
.platform-tabs .tab::after { display: none; }

/* 文档与内容卡 */
.toc { position: sticky; top: 16px; z-index: 10; display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow-hair); overscroll-behavior-inline: contain; }
.toc a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); color: var(--c-muted); }
.toc a:hover, .toc a[aria-current] { background: var(--c-panel); color: var(--c-accent-dark); }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item summary { position: relative; padding: 22px 40px 22px 0; list-style: none; font-weight: 700; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 18px; font-size: 24px; color: var(--c-accent); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { max-width: 760px; padding-bottom: 20px; color: var(--c-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { border-top: 3px solid var(--c-accent); }
.term-card dt { font-size: 20px; font-weight: 800; }
.term-card dd { margin: 12px 0 0; color: var(--c-muted); }
.term-en { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--c-muted); margin-top: 5px; }
.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-panel);
  color: var(--c-ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.badge--first { border-color: var(--c-tint-blue); background: var(--c-tint-blue); color: var(--c-accent-dark); }
.badge--recommended { border-color: var(--c-tint-green); background: var(--c-tint-green); color: var(--c-text); }
.badge--archived { border-color: var(--c-tint-amber); background: var(--c-tint-amber); color: var(--c-text); }
.badge-dot { width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--c-success); color: var(--c-text); flex-shrink: 0; }
.client-card { display: flex; flex-direction: column; gap: 20px; }
.client-card--first { border-color: var(--c-accent); }
.client-heading { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.client-heading h3 { margin: 0; }
.client-card p { color: var(--c-muted); margin: 0; }
.client-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--c-muted); }
[data-version]:empty { display: none; }
.client-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.client-icon { width: 56px; height: 56px; flex-shrink: 0; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.post-card h3 { font-size: 20px; line-height: 1.5; margin: 0; }
.post-card p { color: var(--c-muted); margin: 0; }
.post-card time { font-family: var(--font-mono); font-size: 12px; color: var(--c-muted); margin-top: auto; }
.post-card h3 a:hover { color: var(--c-accent-dark); }
.callout { margin: 24px 0; padding: 22px 24px; border-left: 4px solid var(--c-accent); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--c-tint-blue); color: var(--c-ink-soft); }
.callout--warning { border-left-color: var(--c-warn); background: var(--c-tint-amber); color: var(--c-text); }
.callout p:last-child { margin-bottom: 0; }
.article-download { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 28px; border: 1px solid var(--c-border); border-radius: var(--r-window); background: var(--c-panel); color: var(--c-text); }
.article-download h2 { margin: 0 0 8px; font-size: 22px; }
.article-download p { margin: 0; color: var(--c-muted); }
.article-download .button { flex-shrink: 0; }
.dl-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: calc(100vw - 32px); min-height: 60px; padding: 12px 22px; border: 1px solid var(--c-glass-line); border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-card); font-weight: 800; }
.dl-fab:hover { background: var(--c-accent-dark); color: var(--c-on-accent); }
.dl-fab svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.has-dl-fab .site-footer { padding-bottom: 110px; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: 24px; border: 1px solid var(--c-border); border-radius: var(--r-card); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; background: var(--c-bg); color: var(--c-text); }
.data-table :where(th,td), .prose table :where(th,td) { min-width: 7em; padding: 14px 18px; border-bottom: 1px solid var(--c-border); overflow-wrap: normal; word-break: normal; vertical-align: top; }
.data-table th, .prose table th { background: var(--c-panel); color: var(--c-text); font-weight: 700; }
.prose table { display: block; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; border-collapse: collapse; }
.prose table code { overflow-wrap: anywhere; }
.data-table tr:last-child td { border-bottom: 0; }

/* 已确认的首屏：左侧客户端窗口，右侧文案；保持全静态 */
.hero { min-height: calc(100svh - 100px); display: grid; align-content: center; padding: 8px 24px 80px; overflow-x: clip; }
.canvas {
  position: relative;
  width: 100%;
  max-width: 1392px;
  height: clamp(660px,calc(100svh - 220px),760px);
  margin: 0 auto;
  border-radius: var(--r-canvas);
  background: radial-gradient(720px 520px at 90% 0%,var(--c-sun) 0%,var(--c-sun-mid) 34%,var(--c-sun-fade) 68%),linear-gradient(180deg,var(--c-sky-top) 0%,var(--c-sky-bottom) 100%);
  color: var(--c-text);
  isolation: isolate;
}
.scene { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; pointer-events: none; }
.tex { position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(180deg,var(--c-mask) 0%,var(--c-mask) 50%,var(--c-clear) 82%); }
.tx-mark { fill: none; stroke: var(--c-texture); stroke-width: 1; }
.texture-fill { fill: url(#crossTex); }
.land { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.s-far { fill: var(--c-grass-far); }
.s-hill { fill: var(--c-grass); }
.s-hill-dk { fill: var(--c-grass-dark); }
.s-path { fill: none; stroke: var(--c-path); stroke-linecap: round; }
.s-path-shade { fill: none; stroke: var(--c-path-shade); stroke-linecap: round; }
.s-flower { fill: var(--c-flower); }
.s-board { fill: var(--c-wood); stroke: var(--c-wood-dark); stroke-width: 1.4; }
.s-post { fill: var(--c-wood-dark); }
.s-sign { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--c-text); letter-spacing: .04em; }
.s-cat { fill: var(--c-bg); stroke: var(--c-accent); stroke-width: 2.4; stroke-linejoin: round; }
.s-cat-line { fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.copy { position: absolute; top: 72px; right: 64px; width: 460px; z-index: 3; }
.h1 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px,3.2vw,44px); line-height: 1.2; letter-spacing: -.02em; color: var(--c-text); }
.h1-line { display: block; }
.kw { position: relative; display: inline-block; color: var(--c-accent); white-space: nowrap; }
.kw-stroke { position: absolute; left: -3%; bottom: -.28em; width: 106%; height: .34em; overflow: visible; }
.kw-stroke path { fill: none; stroke: var(--c-accent); stroke-linecap: round; }
.kw-stroke .ks-2 { opacity: .45; }
.lede { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); }
.lede strong { color: var(--c-text); font-weight: 700; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.fact { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 15px 4px 5px; border-radius: var(--r-pill); background: var(--c-glass); color: var(--c-text); border: 1px solid var(--c-glass-line); backdrop-filter: blur(8px); box-shadow: var(--shadow-hair); font-size: 14px; font-weight: 600; }
.fact-ico { width: 28px; height: 28px; border-radius: var(--r-circle); display: grid; place-items: center; flex-shrink: 0; }
.fact-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fi-blue { background: var(--c-tint-blue); color: var(--c-accent-dark); }
.fi-green { background: var(--c-tint-green); color: var(--c-text); }
.fi-amber { background: var(--c-tint-amber); color: var(--c-text); }
.ctas { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.btn-main { gap: 14px; height: 54px; padding: 0 10px 0 26px; margin-left: 6px; font-size: 17px; font-weight: 800; box-shadow: var(--shadow-btn); }
.btn-arrow { width: 34px; height: 34px; border-radius: var(--r-circle); display: grid; place-items: center; flex-shrink: 0; background: var(--c-on-accent-soft); color: var(--c-on-accent); }
.btn-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn-sub { height: 54px; padding: 0 24px; box-shadow: var(--shadow-hair); }
.platforms { display: flex; align-items: center; gap: 20px; margin: 28px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--c-glass-rule); }
.platforms a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--c-text); }
.platforms a:hover { color: var(--c-accent-dark); }
.platforms svg { width: 16px; height: 16px; flex-shrink: 0; }
.win { position: absolute; left: 100px; bottom: -64px; width: min(676px,calc(100% - 716px)); z-index: 2; background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-window); box-shadow: var(--shadow-window); }
.win-bar { height: 42px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--c-border); background: linear-gradient(180deg,var(--c-bg),var(--c-panel)); color: var(--c-muted); border-radius: var(--r-window) var(--r-window) 0 0; }
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: var(--r-circle); background: var(--c-dot); flex-shrink: 0; }
.win-title { text-align: center; font-size: 13px; font-weight: 700; color: var(--c-muted); letter-spacing: .01em; }
.win-body { display: grid; grid-template-columns: 138px minmax(0,1fr) 236px; height: 482px; border-radius: 0 0 var(--r-window) var(--r-window); overflow: hidden; }
.side { background: var(--c-panel); color: var(--c-muted); border-right: 1px solid var(--c-border); padding: 16px 10px; }
.side-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.side-i { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border-radius: var(--r-item); font-size: 13px; font-weight: 600; color: var(--c-muted); }
.side-i svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-i.is-on { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-active); }
.core { margin: 16px 4px 0; padding: 12px 8px 0; border-top: 1px dashed var(--c-border); }
.core-k { display: block; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.core-v { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--c-text); }
.core-v i { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--c-success); box-shadow: 0 0 0 3px var(--c-tint-green); flex-shrink: 0; }
.main { padding: 20px 22px; }
.sec-t { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--c-muted); letter-spacing: .04em; }
.seg { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--r-segment); background: var(--c-panel); color: var(--c-muted); }
.seg span { height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.seg .is-on { background: var(--c-bg); color: var(--c-accent-dark); font-weight: 800; box-shadow: var(--shadow-card); }
.seg-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-muted); }
.sec-2 { margin-top: 22px; }
.rows { border: 1px solid var(--c-border); border-radius: var(--r-row); margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
.row + .row { border-top: 1px solid var(--c-border); }
.row-k { display: block; font-size: 13px; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.row-s { display: block; font-size: 11.5px; color: var(--c-muted); line-height: 1.45; }
.tg { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--c-toggle-off); color: var(--c-text); }
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-circle); background: var(--c-bg); box-shadow: var(--shadow-hair); }
.tg.is-on { background: var(--c-success); }
.tg.is-on::after { left: 18px; }
.port { flex: none; min-width: 64px; height: 28px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--c-border); border-radius: var(--r-port); background: var(--c-panel); color: var(--c-text); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.rules { border-left: 1px solid var(--c-border); padding: 74px 16px 16px; }
.rule-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rule { padding: 9px 10px; border: 1px solid var(--c-border); border-radius: var(--r-item); background: var(--c-panel); color: var(--c-text); font-family: var(--font-mono); font-size: 11px; line-height: 1.4; white-space: nowrap; overflow-x: auto; }
.rule .m { color: var(--c-muted); }
.pol-proxy { color: var(--c-accent-dark); font-weight: 700; }
.pol-direct { color: var(--c-text); font-weight: 700; }
.rule-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-muted); }
.chip-card { position: absolute; z-index: 3; background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card-yaml { top: -58px; right: -48px; width: 236px; transform: rotate(2deg); }
.yaml-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--c-border); font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--c-muted); }
.yaml-bar i { width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--c-warn); flex-shrink: 0; }
.yaml { margin: 0; padding: 10px 14px 12px; border: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-mono); font-size: 12px; line-height: 1.75; }
.yaml .ln { display: inline-block; width: 16px; color: var(--c-muted); user-select: none; }
.yaml .v { color: var(--c-accent-dark); }
.card-sub { left: -92px; bottom: 18px; width: 264px; padding: 14px; transform: rotate(-2deg); }
.sub-t { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.sub-t svg { width: 15px; height: 15px; fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sub-f { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.sub-in { min-height: 36px; padding: 8px; display: flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--r-item); background: var(--c-panel); color: var(--c-muted); font-family: var(--font-mono); font-size: 10.5px; overflow-wrap: anywhere; }
.sub-btn { min-height: 36px; padding: 0 14px; display: grid; place-items: center; border-radius: var(--r-item); background: var(--c-accent); color: var(--c-on-accent); font-size: 13px; font-weight: 700; }

/* 预览色板：色彩只通过令牌进入组件 */
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.swatch { margin: 0; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-bg); color: var(--c-text); }
.swatch-sample { display: block; height: 64px; border: 1px solid var(--c-border); border-radius: var(--r-sm); margin-bottom: 8px; }
.swatch figcaption { font: 11px/1.6 var(--font-mono); overflow-wrap: anywhere; }
.sw-bg { background: var(--c-bg); }
.sw-panel { background: var(--c-panel); }
.sw-cream { background: var(--c-panel-2); }
.sw-border { background: var(--c-border); }
.sw-accent { background: var(--c-accent); }
.sw-dark { background: var(--c-accent-dark); }
.sw-text { background: var(--c-text); }
.sw-muted { background: var(--c-muted); }
.sw-success { background: var(--c-success); }
.sw-warn { background: var(--c-warn); }
.sw-error { background: var(--c-error); }
.sw-ink { background: var(--c-ink-soft); }
.sw-white { background: var(--c-on-accent); }
.sw-sky-top { background: var(--c-sky-top); }
.sw-sky-bottom { background: var(--c-sky-bottom); }
.sw-sun { background: var(--c-sun); }
.sw-sun-mid { background: var(--c-sun-mid); }
.sw-sun-fade { background: var(--c-sun-fade); }
.sw-texture { background: var(--c-texture); }
.sw-grass { background: var(--c-grass); }
.sw-grass-dark { background: var(--c-grass-dark); }
.sw-grass-far { background: var(--c-grass-far); }
.sw-flower { background: var(--c-flower); }
.sw-path { background: var(--c-path); }
.sw-path-shade { background: var(--c-path-shade); }
.sw-wood { background: var(--c-wood); }
.sw-wood-dark { background: var(--c-wood-dark); }
.sw-glass { background: var(--c-glass); }
.sw-glass-line { background: var(--c-glass-line); }
.sw-glass-rule { background: var(--c-glass-rule); }
.sw-blue { background: var(--c-tint-blue); }
.sw-green { background: var(--c-tint-green); }
.sw-amber { background: var(--c-tint-amber); }
.sw-dot { background: var(--c-dot); }
.sw-off { background: var(--c-toggle-off); }
.sw-trace { background: var(--c-trace); }
.sw-soft { background: var(--c-on-accent-soft); }
.sw-veil { background: var(--c-veil); }
.sw-clear { background: var(--c-clear); }
.sw-mask { background: var(--c-mask); }
.preview-stack { display: grid; gap: 24px; }
.preview-type h1 { margin-top: 0; }
.preview-type h2, .preview-type h3 { margin-bottom: 12px; }
.preview-hover { background: var(--c-accent-dark); color: var(--c-on-accent); }
.preview-focus { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (min-width: 1280px) and (max-width: 1390px) {
  .win-body { grid-template-columns: 110px minmax(0,1fr); }
  .rules { display: none; }
}
@media (max-width: 1279px) {
  .hero { min-height: auto; padding-bottom: 88px; }
  .canvas { height: auto; padding: 64px 32px 0; }
  .copy { position: relative; top: auto; right: auto; width: auto; max-width: 640px; margin: 0 auto; text-align: center; }
  .facts, .ctas, .platforms { justify-content: center; }
  .win { position: relative; left: auto; bottom: auto; width: min(676px,100%); margin: 56px auto -64px; }
}
@media (max-width: 900px) {
  .tabs .tab { flex: 0 0 150px; }
  .feature-detail { gap: 24px; }
  .swatch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 759px) {
  .hero { padding: 4px 12px 80px; }
  .canvas { padding: 44px 18px 0; border-radius: var(--r-mobile); }
  .h1 { font-size: clamp(24px,7vw,30px); }
  .lede { font-size: 15px; }
  .facts { gap: 8px; }
  .fact { font-size: 12px; gap: 5px; padding-right: 10px; }
  .ctas { flex-wrap: wrap; }
  .platforms { flex-wrap: wrap; gap: 12px 16px; }
  .win-body { grid-template-columns: minmax(0,1fr); height: auto; }
  .side, .rules, .chip-card { display: none; }
  .next-wrap { margin-inline: 12px; }
  .feature-section { padding: 56px 18px 40px; border-radius: var(--r-mobile); }
  .h2 { font-size: 24px; }
  .tab-panel { padding: 24px 18px; }
  .feature-detail { grid-template-columns: minmax(0,1fr); }
  .tab-window { border-radius: var(--r-window); }
  .tabs { gap: 8px; padding: 8px; }
  .article-download { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dl-fab { right: 16px; bottom: 16px; min-height: 52px; font-size: 14px; }
  .chip-card, .tilt, .tilt-left, .tilt-right { transform: none; }
}