/* 首屏：左侧学习看板，右侧下载与教程入口。 */
.hero {
  position:relative; z-index:1;
  min-height:calc(100vh - var(--nav-h) - var(--peek));
  min-height:calc(100svh - var(--nav-h) - var(--peek));
  display:grid; align-content:center;
  padding-top:44px; padding-bottom:52px;
}
.hero-inner {
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) 452px;
  column-gap:56px; align-items:center;
}
.hero-copy { grid-column:2; grid-row:1; min-width:0 }
.hero-visual { grid-column:1; grid-row:1; min-width:0 }
.badge {
  display:inline-flex; align-items:center; gap:10px;
  max-width:100%; padding:6px 14px 6px 12px;
  background:var(--c-panel); color:var(--c-muted);
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  box-shadow:var(--shadow-soft); font-size:13px; line-height:1.5;
  overflow-wrap:anywhere;
}
.badge-dot { position:relative; flex-shrink:0; width:8px; height:8px; border-radius:var(--r-round); background:var(--c-accent); color:var(--c-on-accent) }
.badge-dot::after { content:""; position:absolute; inset:0; border-radius:var(--r-round); background:var(--c-accent); animation:badge-breathe 2.6s var(--ease) infinite }
.hero-title { margin-top:22px; font-size:clamp(30px,2.2vw + 12px,44px); line-height:1.2; letter-spacing:-.02em }
.h1-line { display:block }
.grad-text { background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:var(--c-clear); color:var(--c-clear); padding-bottom:.06em }
.hero-desc { margin-top:22px; max-width:28.5em; font-size:15.5px; line-height:1.78; color:var(--c-muted) }
.hero-desc strong { font-weight:var(--weight-medium); color:var(--c-text) }
.platforms-label { margin-top:26px; font-size:12px; letter-spacing:.06em; color:var(--c-muted) }
.platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.platform-chip {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:34px; padding:6px 13px 6px 11px;
  background:var(--c-panel); color:var(--c-muted);
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  font-size:13px;
  transition:transform var(--duration-fast) var(--ease),border-color var(--duration-fast),color var(--duration-fast);
}
.platform-chip svg { width:15px; height:15px; flex-shrink:0; color:var(--c-text) }
.platform-chip:hover { transform:translateY(-1px); border-color:var(--c-accent-200); color:var(--c-accent-dark) }
.board-wrap { position:relative; isolation:isolate; padding-bottom:18px }
.board-wrap::before {
  content:""; position:absolute; left:44px; right:44px; top:34px; bottom:0;
  background:var(--c-panel-2); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-plate); z-index:-1;
}
.board { position:relative; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-xl); box-shadow:var(--shadow-near),var(--shadow-float); padding:26px }
.board-body { display:grid; grid-template-columns:clamp(180px,14.2vw,204px) minmax(0,1fr); column-gap:26px }
.board-body > * { min-width:0 }
.board-title { font-family:var(--font-display); font-size:17px; font-weight:var(--weight-title); letter-spacing:-.01em; line-height:1.4 }
.board-sub { margin-top:4px; font-size:12px; color:var(--c-muted) }
.chapters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px }
.chap {
  position:relative; min-width:0; height:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:var(--c-panel); color:var(--c-muted);
  border:1px solid var(--c-border); border-radius:var(--r-md);
  font-size:12.5px; line-height:1.2;
  animation:board-rise .5s var(--ease) both;
}
.chap-ico { width:28px; height:28px; border-radius:var(--r-icon); background:var(--c-accent-50); color:var(--c-accent-dark); display:grid; place-items:center }
.chap-ico svg { width:16px; height:16px }
.chap-ico svg path,.chap-ico svg rect,.chap-ico svg circle { fill:none; stroke:url(#ico-grad); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.chap-box { position:absolute; top:8px; right:8px; width:13px; height:13px; border-radius:var(--r-check); border:1.5px solid var(--c-line); background:var(--c-panel); color:var(--c-text); display:grid; place-items:center }
.chap-box svg { width:9px; height:9px; opacity:0 }
.chap-box svg path,.dot svg path { fill:none; stroke:var(--c-on-accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.chap.is-done { border-color:var(--c-accent-100); background:var(--grad-chapter); color:var(--c-text) }
.chap.is-done .chap-box { border-color:var(--c-clear); background:var(--grad-accent); color:var(--c-on-accent) }
.chap.is-done .chap-box svg { opacity:1; animation:board-pop .35s var(--ease) both }
.chap--more { background:var(--c-neutral-50); color:var(--c-accent-dark); border-color:var(--c-border-soft); flex-direction:row; gap:6px }
.chap:nth-child(1) { animation-delay:.05s }
.chap:nth-child(2) { animation-delay:.1s }
.chap:nth-child(3) { animation-delay:.15s }
.chap:nth-child(4) { animation-delay:.2s }
.chap:nth-child(5) { animation-delay:.25s }
.chap:nth-child(6) { animation-delay:.3s }
.chap:nth-child(7) { animation-delay:.35s }
.chap:nth-child(8) { animation-delay:.4s }
.chap:nth-child(9) { animation-delay:.45s }
.chap:nth-child(10) { animation-delay:.5s }
.chap:nth-child(1) .chap-box svg { animation-delay:.45s }
.chap:nth-child(2) .chap-box svg { animation-delay:.55s }
.chap:nth-child(3) .chap-box svg { animation-delay:.65s }
.chap:nth-child(4) .chap-box svg { animation-delay:.75s }
.lanes-col { display:flex; flex-direction:column; min-width:0 }
.lanes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr); column-gap:18px; align-items:start }
.lane { position:relative; display:flex; flex-direction:column; min-width:0 }
.lane-head { height:30px; margin-bottom:16px; display:grid; place-items:center; border-radius:var(--r-sm); font-size:12.5px; font-weight:var(--weight-medium); letter-spacing:.08em }
.lane-1 .lane-head { background:var(--c-accent-100); color:var(--c-accent-dark) }
.lane-2 .lane-head { background:var(--c-accent-200); color:var(--c-accent-dark) }
.lane-3 .lane-head { background:var(--c-accent); color:var(--c-on-accent) }
.lane-card {
  position:relative; min-height:52px;
  display:flex; align-items:center; gap:7px;
  padding:10px 9px; border:1px solid var(--c-border-soft); border-radius:var(--r-btn);
  font-size:12.5px; color:var(--c-text); line-height:1.25;
  animation:board-rise .5s var(--ease) both;
}
.lane-1 .lane-card { background:var(--c-accent-50); color:var(--c-text); border-color:var(--c-accent-100) }
.lane-2 .lane-card { background:var(--c-accent-25); color:var(--c-text); border-color:var(--c-accent-100) }
.lane-3 .lane-card { background:var(--c-neutral-50); color:var(--c-muted) }
.lane-card + .lane-card { margin-top:22px }
.lane-card + .lane-card::before { content:""; position:absolute; left:50%; top:-19px; width:1px; height:14px; background:var(--c-line) }
.lane-card + .lane-card::after { content:""; position:absolute; left:50%; top:-9px; width:5px; height:5px; margin-left:-2.5px; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); transform:rotate(45deg) }
.lane-1 .lane-card { animation-delay:.3s }
.lane-2 .lane-card { animation-delay:.42s }
.lane-3 .lane-card { animation-delay:.54s }
.lane-2::before,.lane-3::before { content:""; position:absolute; left:-9px; top:72px; width:9px; height:140px; border-left:1px solid var(--c-line); border-top:1px solid var(--c-line); border-top-left-radius:var(--r-icon) }
.lane-2::after,.lane-3::after { content:""; position:absolute; left:-17px; top:212px; width:9px; height:9px; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); border-bottom-right-radius:var(--r-icon) }
.lane-tip { position:absolute; left:-6px; top:69.5px; width:5px; height:5px; border-top:1px solid var(--c-line); border-right:1px solid var(--c-line); transform:rotate(45deg) }
.dot { position:relative; flex-shrink:0; width:14px; height:14px; border-radius:var(--r-round); border:1.5px solid var(--c-line); background:var(--c-panel); color:var(--c-text); display:grid; place-items:center }
.dot svg { width:8px; height:8px }
.dot.is-done { background:var(--c-accent); color:var(--c-on-accent); border-color:var(--c-accent) }
.dot.is-now { border-color:var(--c-accent) }
.dot.is-now::after { content:""; width:6px; height:6px; border-radius:var(--r-round); background:var(--c-accent) }
.lane-card--code { height:auto; display:block; padding:17px 9px 9px }
.lane-card-row { display:flex; align-items:center; gap:7px; min-height:18px; line-height:18px }
.yaml { margin:9px 0 0; padding:8px 9px; background:var(--c-code-bg); color:var(--c-text); border:1px solid var(--c-border-soft); border-radius:var(--r-icon); font-family:var(--font-mono); font-size:clamp(8.8px,.66vw,9.5px); line-height:1.65; white-space:pre; overflow-x:auto }
.y-cm { color:var(--c-muted) }
.y-k { color:var(--c-accent-dark) }
.y-t { color:var(--c-accent) }
.y-p { color:var(--c-muted); font-weight:var(--weight-medium) }
.board-note { margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--c-neutral-50); color:var(--c-muted); border:1px solid var(--c-border-soft); border-radius:var(--r-btn); font-size:12px; line-height:1.4; animation:board-rise .5s var(--ease) .7s both }
.board-note b { font-weight:var(--weight-medium); color:var(--c-text) }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden }
.stop-a { stop-color:var(--c-accent) }
.stop-b { stop-color:var(--c-lilac) }
.facts { position:relative; z-index:1; background:var(--c-panel); color:var(--c-text); border-top:1px solid var(--c-border) }
.facts-inner { max-width:calc(var(--container) + var(--gutter) * 2); margin:0 auto; padding:30px var(--gutter) 34px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.fact { min-width:0; padding-inline:24px; border-left:1px solid var(--c-border-soft) }
.fact:first-child { padding-left:0; border-left:0 }
.fact-label { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--c-muted) }
.fact-value { margin-top:4px; font-size:15px }

.tabs { min-width:0 }
[role="tablist"] { display:flex; gap:8px; max-width:100%; overflow-x:auto; padding:4px; scrollbar-width:thin }
[role="tab"] {
  position:relative; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 18px;
  border:1px solid var(--c-border); border-radius:var(--r-btn);
  background:var(--c-panel); color:var(--c-muted);
  font-weight:var(--weight-title); text-align:center;
}
[role="tab"]:hover { color:var(--c-text); border-color:var(--c-accent-200) }
[role="tab"][aria-selected="true"] { background:var(--c-panel); color:var(--c-accent-dark); border-color:var(--c-accent-200); box-shadow:var(--shadow-near) }
[role="tabpanel"] { min-width:0; margin-top:24px }
.feature-browser { display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:48px; align-items:start }
.feature-browser > * { min-width:0 }
.feature-browser [role="tablist"] { display:flex; flex-direction:column; overflow:visible; padding:0; gap:4px }
.feature-browser [role="tab"] { display:block; width:100%; padding:20px 24px; text-align:left; border:0; border-radius:var(--r-md); background:var(--c-clear); color:var(--c-text); box-shadow:none }
.feature-browser [role="tab"] strong { display:block; font-size:20px; font-weight:var(--weight-title) }
.feature-browser [role="tab"] small { display:block; margin-top:7px; font-size:13px; color:var(--c-muted); white-space:normal }
.feature-browser [role="tab"][aria-selected="true"]::before { content:""; position:absolute; inset:16px auto 16px 0; width:3px; border-radius:var(--r-pill); background:var(--grad-accent) }
.tab-progress { position:absolute; inset:auto 24px 6px; height:2px; 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(--grad-accent); transform:scaleX(0); transform-origin:left }
.tabs.is-playing [aria-selected="true"] .tab-progress::after { animation:chapter-countdown 8s linear forwards }
.tabs.is-paused .tab-progress::after { animation:none }
.feature-browser [role="tabpanel"] { margin-top:0; min-height:480px; padding:38px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-float) }
.feature-browser [role="tabpanel"] p { margin-top:20px; line-height:1.9; color:var(--c-muted) }
.feature-browser [role="tabpanel"] pre { margin-block:24px }
.feature-browser [role="tabpanel"] .text-link { display:inline-block; margin-top:12px }

.toc { position:sticky; top:calc(var(--nav-h) + 12px); z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--shadow-near) }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border-radius:var(--r-sm); font-size:14px }
.toc a:hover { background:var(--c-accent-50); color:var(--c-accent-dark) }
.chapter { scroll-margin-top:calc(var(--nav-h) + 100px) }
.faq-item { background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:0 24px; box-shadow:var(--shadow-near) }
.faq-item + .faq-item { margin-top:12px }
.faq-item summary { position:relative; list-style:none; min-height:64px; padding:20px 30px 20px 0; cursor:pointer; font-size:17px }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:18px; font-size:22px; color:var(--c-accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--c-muted); line-height:1.85 }
.term-card { min-width:0; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-soft) }
.term-card dt { font-size:22px; font-weight:var(--weight-title) }
.term-card dd { margin:16px 0 0; color:var(--c-muted); line-height:1.85 }
.term-alias { display:block; margin-top:7px; font:12px var(--font-mono); color:var(--c-muted) }
.client-card { min-width:0; padding:30px; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-xl); box-shadow:var(--shadow-soft) }
.client-card.is-primary { border-color:var(--c-accent-200); box-shadow:var(--shadow-float) }
.client-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.client-head > div { min-width:0; flex:1 }
.client-icon { width:56px; height:56px; flex-shrink:0 }
.client-head h3 { font-size:23px }
.client-summary { margin-top:20px; color:var(--c-muted); line-height:1.85 }
.client-meta { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:18px; font-size:13px; color:var(--c-muted) }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
[data-rev]:empty { display:none }
.tag-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.tag { display:inline-flex; align-items:center; justify-content:center; max-width:100%; min-height:28px; padding:4px 10px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-neutral-50); color:var(--c-muted); font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere }
.tag-first { background:var(--c-accent-100); color:var(--c-accent-dark); border-color:var(--c-accent-200) }
.tag-recommend { background:var(--c-accent-50); color:var(--c-accent-dark); border-color:var(--c-accent-100) }
.tag-archived { background:var(--c-neutral-50); color:var(--c-muted) }
.post-card { display:flex; flex-direction:column; min-width:0; padding:28px; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--shadow-soft); transition:transform var(--duration-fast),box-shadow var(--duration-fast) }
.post-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-float) }
.post-card h3 { margin-top:20px; font-size:21px; line-height:1.55 }
.post-card p { margin-top:14px; color:var(--c-muted); font-size:14px; line-height:1.85 }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:12px; color:var(--c-muted) }
.post-card .post-more { margin-top:auto; padding-top:24px; color:var(--c-accent-dark); font-size:14px }
.callout { padding:22px 24px; border:1px solid var(--c-border); border-left:3px solid var(--c-accent); border-radius:var(--r-md); background:var(--c-accent-50); color:var(--c-text); line-height:1.85 }
.callout p + p { margin-top:12px }
.callout strong { font-weight:var(--weight-medium) }
.callout-warn { border-left-color:var(--c-warn); background:var(--c-neutral-50); color:var(--c-warn-ink) }
.callout-error { border-left-color:var(--c-error); background:var(--c-neutral-50); color:var(--c-error-ink) }
.callout-success { border-left-color:var(--c-success); background:var(--c-neutral-50); color:var(--c-success-ink) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel); color:var(--c-text); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; font-size:14px; background:var(--c-panel); color:var(--c-text) }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width:7em; padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-border); overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th,.article-body table th { background:var(--c-panel-2); color:var(--c-text); font-weight:var(--weight-medium) }
.data-table tr:last-child td { border-bottom:0 }
.prose table,.article-body 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,.article-body table code { overflow-wrap:anywhere }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-panel-2); color:var(--c-text); box-shadow:var(--shadow-near) }
.article-download > div { min-width:0 }
.article-download p { margin-top:10px; color:var(--c-muted) }
.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 - 40px); min-height:60px; padding:12px 18px;
  border:1px solid var(--c-border); border-radius:var(--r-lg);
  background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-float);
}
.dl-fab svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:var(--c-accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.dl-fab strong { display:block; font-size:14px; font-weight:var(--weight-medium) }
.dl-fab small { display:block; margin-top:2px; font-size:12px; color:var(--c-muted) }
.dl-fab:hover { border-color:var(--c-accent-200); transform:translateY(-2px) }

/* 预览页色票，色值仅引用 base.css 令牌。 */
.swatch-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
.swatch { min-width:0; padding:10px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-panel); color:var(--c-text) }
.swatch i { display:block; height:64px; border:1px solid var(--c-border); border-radius:var(--r-sm) }
.swatch code { display:block; margin-top:10px; font-size:11px }
.sw-bg { background:var(--c-bg) }
.sw-panel { background:var(--c-panel) }
.sw-panel2 { background:var(--c-panel-2) }
.sw-wash { background:var(--c-wash) }
.sw-wash0 { background:var(--c-wash-0) }
.sw-border { background:var(--c-border) }
.sw-border-soft { background:var(--c-border-soft) }
.sw-line { background:var(--c-line) }
.sw-accent { background:var(--c-accent) }
.sw-dark { background:var(--c-accent-dark) }
.sw-lilac { background:var(--c-lilac) }
.sw-a25 { background:var(--c-accent-25) }
.sw-a50 { background:var(--c-accent-50) }
.sw-a100 { background:var(--c-accent-100) }
.sw-a200 { background:var(--c-accent-200) }
.sw-neutral { background:var(--c-neutral-50) }
.sw-text { background:var(--c-text) }
.sw-muted { background:var(--c-muted) }
.sw-faint { background:var(--c-faint) }
.sw-success { background:var(--c-success) }
.sw-warn { background:var(--c-warn) }
.sw-error { background:var(--c-error) }
.sw-on { background:var(--c-on-accent) }
.sw-code { background:var(--c-code-bg) }
.sw-nav { background:var(--c-nav-bg) }
.sw-clear { background:var(--c-clear) }
.sw-success-ink { background:var(--c-success-ink) }
.sw-warn-ink { background:var(--c-warn-ink) }
.sw-error-ink { background:var(--c-error-ink) }
.sw-veil { background:var(--c-veil) }
.sw-gradient { background:var(--grad-accent) }
.preview-buttons { display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.type-demo > * + * { margin-top:20px }
.preview-title { font-size:var(--text-h1) }

@keyframes badge-breathe { 0% { transform:scale(1); opacity:.5 } 70%,100% { transform:scale(2.6); opacity:0 } }
@keyframes board-rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@keyframes board-pop { from { opacity:0; transform:scale(.4) } to { opacity:1; transform:none } }
@keyframes chapter-countdown { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@media (max-width:1300px) {
  .hero-inner { grid-template-columns:minmax(0,1fr); row-gap:48px; max-width:calc(980px + var(--gutter) * 2) }
  .hero-copy { grid-column:1; grid-row:1; text-align:center; display:flex; flex-direction:column; align-items:center }
  .hero-visual { grid-column:1; grid-row:2 }
  .hero-desc { margin-inline:auto }
  .cta-row,.platforms { justify-content:center }
}
@media (max-width:1000px) {
  .facts-inner { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px }
  .fact:nth-child(3) { padding-left:0; border-left:0 }
  .feature-browser { gap:24px; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr) }
  .swatch-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:768px) {
  .hero-title { font-size:clamp(24px,4vw,30px) }
  .feature-browser { grid-template-columns:minmax(0,1fr) }
  .feature-browser [role="tablist"] { flex-direction:row; overflow-x:auto; gap:8px }
  .feature-browser [role="tab"] { width:190px; padding:16px; border:1px solid var(--c-border) }
  .feature-browser [role="tab"] strong { font-size:17px }
  .feature-browser [role="tabpanel"] { min-height:0; padding:26px }
}
@media (max-width:640px) {
  .hero { padding-top:34px; padding-bottom:40px }
  .hero-inner { row-gap:32px }
  .hero-title { margin-top:20px }
  .hero .cta-row { margin-top:24px }
  .hero-desc { font-size:14px }
  .badge { font-size:11px; gap:8px; padding-inline:10px }
  .platforms { gap:6px }
  .platform-chip { font-size:12px; padding-inline:10px }
  .platforms-label { margin-top:20px }
  .board { padding:18px }
  .board-body { grid-template-columns:minmax(0,1fr); gap:24px }
  .chapters { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .chap { height:68px }
  .board-wrap::before { left:20px; right:20px }
  .lanes { grid-template-columns:minmax(0,1fr); gap:20px }
  .lane-head { margin-bottom:10px }
  .lane-card { min-height:44px }
  .lane-2::before,.lane-3::before,.lane-2::after,.lane-3::after,.lane-tip { display:none }
  .board-note { margin-top:20px; flex-wrap:wrap }
  .yaml { font-size:10px }
  .facts-inner { padding-top:24px; padding-bottom:24px; gap:20px 12px }
  .fact { padding-inline:12px }
  .fact-value { font-size:13px }
  .fact-label { font-size:10px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .client-card,.term-card,.post-card { padding:22px }
  .client-actions .btn { width:100% }
  .article-download { flex-direction:column; align-items:flex-start; padding:24px }
  .article-download .btn { width:100% }
  .dl-fab { right:20px; bottom:calc(16px + env(safe-area-inset-bottom)); min-height:52px; padding:10px 14px }
  .dl-fab small { display:none }
  .toc { position:static }
}
@media (prefers-reduced-motion:reduce) {
  .chap,.lane-card,.board-note,.badge-dot::after,.tabs.is-playing .tab-progress::after { animation:none }
}