:root {
  color-scheme: light;
  --ons-bg: #ffffff;
  --ons-alt: #f6f7f9;
  --ons-card: #ffffff;
  --ons-text: #14161a;
  --ons-muted: #5f6672;
  --ons-border: #e6e8ec;
  --ons-accent: #2563eb;
  --ons-radius: 14px;
}

/* 深色只有一个人为入口：点过开关 → html[data-theme="dark"]。
   不跟随系统，首次访问一律浅色，行为可预期，也不用写两份变量。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ons-bg: #0f1115;
  --ons-alt: #14181f;
  --ons-card: #171b22;
  --ons-text: #f2f4f7;
  --ons-muted: #98a1ae;
  --ons-border: #242a33;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ons-body {
  margin: 0;
  background: var(--ons-bg);
  color: var(--ons-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.ons-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* top */
.ons-top {
  border-bottom: 1px solid var(--ons-border);
  background: var(--ons-bg);
}

.ons-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.ons-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}

.ons-brand img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}

.ons-top-end {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 本页锚点导航：只在当前页内跳转，不承担全站导航职责 */
.ons-anchors {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}

.ons-anchors a {
  color: var(--ons-muted);
  transition: color .15s ease;
}

.ons-anchors a:hover { color: var(--ons-accent); }

.ons-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ons-border);
  border-radius: 10px;
  background: var(--ons-card);
  color: var(--ons-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.ons-theme:hover {
  color: var(--ons-accent);
  border-color: var(--ons-accent);
}

.ons-theme svg { width: 17px; height: 17px; }

/* 图标显示的是「点下去会变成什么」：浅色下显示月亮（点了变深色），
   深色下显示太阳。这跟 aria-label 的措辞保持一致，不会出现「写着切换到深色、
   图标却是太阳」的矛盾。 */
.ons-theme .i-sun { display: none; }
.ons-theme .i-moon { display: block; }

:root[data-theme="dark"] .ons-theme .i-sun { display: block; }
:root[data-theme="dark"] .ons-theme .i-moon { display: none; }

/* hero */
.ons-hero {
  padding: 72px 0 56px;
  /* 不画底边：紧接在后面的第一个 .ons-sec 自带 border-top，
     两条凑在一起就是 2px 双线。 */
}

.ons-hero-in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.ons-hero-in.is-solo {
  grid-template-columns: 1fr;
  max-width: 760px;
}

.ons-hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ons-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--ons-border);
  background: var(--ons-alt);
  flex: 0 0 auto;
}

.ons-hero h1 {
  position: relative; /* 给 .ons-h1-tail 的绝对定位当包含块，1px 不会跑到别处 */
  margin: 0;
  min-width: 0; /* flex 子项默认不可收缩，H1 写了长标题会顶出容器 */
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* 「- / ｜」后面的定位短语：只留给搜索引擎和读屏软件，页面上不占位。
   首屏 H1 保持「品牌名」一个干净的词，长尾词仍留在 DOM 里。
   这里刻意不用 display:none —— 那样搜索引擎会当成不存在，等于删了。
   想让它重新显示，删掉这一整条规则即可。 */
.ons-h1-tail {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

.ons-hero-sub {
  margin: 0 0 32px;
  font-size: 17px;
  color: var(--ons-muted);
  max-width: 62ch;
}

.ons-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ons-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.ons-btn.is-primary {
  background: var(--ons-accent);
  color: #fff;
}

.ons-btn.is-primary:hover { filter: brightness(.94); }

.ons-btn.is-ghost {
  border-color: var(--ons-border);
  color: var(--ons-text);
  background: transparent;
}

.ons-btn.is-ghost:hover { border-color: var(--ons-accent); color: var(--ons-accent); }

/* 第三个入口「回主站」：不是产品 CTA，做成文字链 + 外链箭头，
   高度和按钮对齐，但去掉边框和底色，不跟主按钮抢注意力 */
.ons-btn.is-plain {
  height: 46px;
  padding: 0 6px;
  margin-left: 4px;
  border: 0;
  background: none;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ons-muted);
}

.ons-btn.is-plain:hover { color: var(--ons-accent); }

.ons-btn.is-plain svg { width: 13px; height: 13px; }

.ons-hero-shot img {
  width: 100%;
  /* 固定比例占位：截图可能来自 456×300 的预览 API，也可能来自 1200×630 的手填图，
     写死比例 + cover 才不会在图片到达时把整页顶下去（CLS） */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--ons-alt);
  border-radius: var(--ons-radius);
  border: 1px solid var(--ons-border);
}

/* sections */
/* 分隔线一律画在区块自己顶上，不画在底部：
   底部画线的话，页面最后一块会和页脚那条 border-top 叠成 2px 双线，
   还得单独给最后一块去掉边框。统一成 top，每个区块自带一条，页脚那条自然收尾。 */
.ons-sec {
  padding: 64px 0;
  border-top: 1px solid var(--ons-border);
  /* 锚点跳转后给标题留一点呼吸，免得顶到视口最上沿 */
  scroll-margin-top: 16px;
}

.ons-sec:nth-of-type(even) { background: var(--ons-alt); }

.ons-h2 {
  margin: 0 0 32px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

.ons-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ons-card {
  background: var(--ons-card);
  border: 1px solid var(--ons-border);
  border-radius: var(--ons-radius);
  padding: 22px;
  transition: border-color .15s ease, transform .15s ease;
}

.ons-card:hover { border-color: var(--ons-accent); }

.ons-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.ons-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ons-muted);
  line-height: 1.75;
}

.ons-ico {
  line-height: 1;
  margin-bottom: 14px;
  height: 38px;
  display: flex;
  align-items: center;
}

.ons-ico img { width: 38px; height: 38px; object-fit: contain; }

/* 彩色图标：Symbol 引用。这里绝对不能写 fill——多色图标的每种颜色都在
   <symbol> 的 path 上写着，一设 fill 就会把整个图标压成单色。
   与图片、字体图标统一成 38px，保证三种图标在同一列里视觉体量一致。 */
.ons-ico svg.ons-svw {
  display: block;
  width: 38px;
  height: 38px;
}

/* 字体图标：<i class="io io-xxx">。图标库的根 class 会写死 font-size:16px，
   这里必须显式覆盖，否则和 38px 的图片/彩色图标混排时大小对不上。 */
.ons-ico i {
  font-size: 38px;
  font-style: normal;
  line-height: 1;
}

/* table */
.ons-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ons-border);
  border-radius: var(--ons-radius);
  background: var(--ons-card);
}

.ons-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.ons-table th,
.ons-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--ons-border);
  vertical-align: top;
}

.ons-table th {
  font-weight: 600;
  font-size: 13px;
  color: var(--ons-muted);
  background: var(--ons-alt);
  white-space: nowrap;
}

.ons-table tr:last-child td { border-bottom: 0; }

.ons-table tr.is-self td { background: rgba(37, 99, 235, .06); font-weight: 500; }

/* 行悬停：一排五个单元格里眼睛会跑偏，给整行一个极淡的底色，视线才好横着扫。
   用 td 而不是 tr 上色——border-collapse 下部分浏览器不会给 tr 的边框区域涂色。
   @media (hover) 把触屏排除掉：手机上点一下会留下悬停态，看起来像选中了。 */
@media (hover: hover) and (pointer: fine) {
  .ons-table tbody tr:hover td { background: rgba(37, 99, 235, .03); }
  /* 主推行本来就是 .06，悬停时不能被上面那条压浅 */
  .ons-table tbody tr.is-self:hover td { background: rgba(37, 99, 235, .06); }
  /* 深色底是 #171b22，3% 的蓝叠上去约等于没变，所以深色下单独提到 14% */
  :root[data-theme="dark"] .ons-table tbody tr:not(.is-self):hover td { background: rgba(37, 99, 235, .14); }
}

/* 对比表：名称 + 评分 + 标记 */
.ons-cmp-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ons-cmp-name a { color: var(--ons-accent); }
.ons-cmp-name a:hover { text-decoration: underline; }

.ons-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  background: var(--ons-accent);
  color: #fff;
  white-space: nowrap;
}

.ons-stars {
  color: #e08c00;
  font-size: 13px;
  white-space: nowrap;
}

.ons-stars b {
  color: var(--ons-text);
  font-weight: 600;
  margin-left: 3px;
  font-size: 13px;
}

/* 次要文字：靠颜色拉开层级就够了，不再叠 opacity ——
   #5f6672 在白底是 5.9:1，再乘 .75 只剩 3.2:1，低于 WCAG 4.5:1 的下限 */
.ons-dim { color: var(--ons-muted); }

.ons-cmp-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

/* 表格下方结论：整页最容易被引用的一段，排版要像正文而不是注释 */
/* 结论块的小标题：故意放在块外，块里只留段落，标题才不像段落的一部分。
   左边距 25px = 块的 3px 描边 + 22px 内边距，正好和内文左边界对齐成一条线。 */
.ons-cmp-sum-title {
  margin: 28px 0 10px 25px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ons-text);
}

.ons-cmp-sum {
  margin-top: 0;
  padding: 18px 22px;
  border-left: 3px solid var(--ons-accent);
  background: var(--ons-alt);
  border-radius: 0 var(--ons-radius) var(--ons-radius) 0;
}

.ons-cmp-sum p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.ons-cmp-sum p + p { margin-top: 10px; }

/* 只给读屏用的文本（表格 caption） */
.ons-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 列宽由 <colgroup> 控制，这里只保证名称列不会被压太窄 */
.ons-cmp th:first-child { min-width: 120px; }

/* 固定表格布局：auto 布局会忽略 <colgroup> 的百分比，把宽度全给内容最多的列，
   短列（适合谁）就被挤成一条竖线。固定布局下各列严格按 colgroup 分配。 */
.ons-cmp {
  table-layout: fixed;
}

/* 多列表格横向空间紧张，内边距收一点，给文字留位置 */
.ons-cmp th,
.ons-cmp td {
  padding: 14px;
  overflow-wrap: anywhere;
}

/* faq */
.ons-faq {
  border: 1px solid var(--ons-border);
  border-radius: var(--ons-radius);
  background: var(--ons-card);
  overflow: hidden;
}

.ons-qa { border-bottom: 1px solid var(--ons-border); }

.ons-qa:last-child { border-bottom: 0; }

/* 整条问答悬停：只给 summary 上色的话，展开后下半段还是白的，一条会裂成两块 */
@media (hover: hover) and (pointer: fine) {
  .ons-qa:hover { background: rgba(37, 99, 235, .03); }
  :root[data-theme="dark"] .ons-qa:hover { background: rgba(37, 99, 235, .14); }
}

.ons-qa summary {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 52px;
}

.ons-qa summary::-webkit-details-marker { display: none; }

.ons-qa summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ons-muted);
  font-size: 20px;
  font-weight: 400;
}

.ons-qa[open] summary::after { content: "−"; }

.ons-qa-body {
  padding: 0 22px 20px;
  color: var(--ons-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* timeline */
.ons-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--ons-border);
}

.ons-timeline li {
  position: relative;
  padding: 0 0 24px 24px;
}

.ons-timeline li:last-child { padding-bottom: 0; }

.ons-timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ons-accent);
}

.ons-date {
  display: block;
  font-size: 13px;
  color: var(--ons-muted);
  margin-bottom: 2px;
}

.ons-tl-text { font-size: 15px; }

/* related */
.ons-rel { display: block; }

.ons-rel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ons-rel-head img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
}

.ons-rel-head h3 { margin: 0; }

/* 相关推荐：描述固定显示两行，超出部分视觉裁切。
   原文完整输出在 DOM 里，便于搜索引擎与读屏；
   min-height 让短描述的卡片也占两行，保证卡片等高。 */
.ons-rel p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: calc(1.75em * 1);
}

/* cta band */
.ons-cta-band {
  padding: 64px 0;
  background: var(--ons-alt);
  /* 它不属于 .ons-sec（背景不同），但分隔线要跟其他区块同一套 */
  border-top: 1px solid var(--ons-border);
}

.ons-cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.ons-cta-in h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.ons-cta-in p {
  margin: 0;
  color: var(--ons-muted);
  font-size: 14px;
}

/* 法律页（关于我们 / 隐私政策 / 用户协议 / 免责声明）
   正文来自主站同名 page，结构不可控，所以这里只做「通用元素」样式 */
.ons-legal { padding: 48px 0 72px; }

.ons-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--ons-muted);
}
.ons-crumb a { color: var(--ons-muted); text-decoration: none; }
.ons-crumb a:hover { color: var(--ons-accent); }
.ons-crumb-sep { opacity: .5; }
.ons-crumb [aria-current] { color: var(--ons-text); }

.ons-legal-h1 {
  margin: 0 0 28px;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

/* 一行超过 40 个字回行时容易串行，长文压到 760px */
.ons-legal-body {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ons-text);
}

.ons-legal-body > *:first-child { margin-top: 0; }
.ons-legal-body h2 {
  margin: 36px 0 12px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}
.ons-legal-body h3 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.ons-legal-body p { margin: 0 0 16px; }
.ons-legal-body ul,
.ons-legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.ons-legal-body li { margin-bottom: 6px; }
.ons-legal-body li::marker { color: var(--ons-muted); }
.ons-legal-body strong { font-weight: 600; }
.ons-legal-body a {
  color: var(--ons-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ons-legal-body a:hover { border-bottom-color: currentColor; }
.ons-legal-body blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--ons-border);
  background: var(--ons-alt);
  border-radius: 0 var(--ons-radius) var(--ons-radius) 0;
  color: var(--ons-muted);
}
.ons-legal-body img { max-width: 100%; height: auto; border-radius: var(--ons-radius); }
.ons-legal-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--ons-border); }
.ons-legal-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--ons-alt);
  font-size: .92em;
}
.ons-legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.ons-legal-body th,
.ons-legal-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ons-border);
  text-align: left;
}

.ons-legal-updated {
  max-width: 760px;
  margin: 40px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ons-border);
  font-size: 12px;
  color: var(--ons-muted);
}

/* 404（域名已绑定、路径不存在）：套子站页头页脚，只换中间这一块，
   用户点错链接时不会突然跳到一个没有页头页脚的白色页面 */
.ons-404 { padding: 88px 0 96px; text-align: center; }

/* 选择器要比 .ons-404 p 更具体，否则字号和颜色会被下面那条段落规则盖掉 */
.ons-404 .ons-404-code {
  margin: 0 0 10px;
  max-width: none;
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ons-accent);
}

.ons-404 h1 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.ons-404 p {
  margin: 0 auto 26px;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ons-muted);
}

/* 把用户实际访问的路径原样贴出来，方便判断是链接拼错还是页面下线 */
.ons-404-path {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--ons-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  word-break: break-all;
}

.ons-404-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ons-404 .ons-404-hint {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.9;
}
.ons-404-hint a {
  margin-left: 8px;
  color: var(--ons-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ons-404-hint a:hover { border-bottom-color: currentColor; }

/* footer */
.ons-foot {
  padding: 40px 0 44px;
  border-top: 1px solid var(--ons-border);
  color: var(--ons-muted);
  font-size: 13px;
}

.ons-foot p { margin: 0; }

.ons-foot-dim { color: var(--ons-muted); }

/* 页脚自定义内容（富文本） */
.ons-foot-html { margin-bottom: 16px; line-height: 1.75; }
.ons-foot-html p { margin: 0 0 6px; }
.ons-foot-html img { max-width: 100%; height: auto; }
.ons-foot-html a { color: var(--ons-accent); }

/* 第一行：左边身份与备案，右边法律链接，各占一端 */
.ons-foot-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 28px;
}

/* 版权 / 备案行 */
.ons-foot-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

/* 版权主体（主站名）比备案号重一点：一眼能分出「这是谁的站」和「证件号」 */
.ons-foot-owner {
  color: var(--ons-text);
  font-weight: 500;
}

.ons-foot-main a {
  color: inherit;
  text-decoration: none;
}
.ons-foot-main a:hover { color: var(--ons-accent); }
.ons-foot-sep { opacity: .45; margin: 0 6px; }

/* 法律页面链接 */
.ons-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.ons-foot-links a {
  color: var(--ons-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ons-foot-links a:hover {
  color: var(--ons-accent);
  border-bottom-color: currentColor;
}

/* 第二行：免责声明在左、域名与更新时间靠右。字号降一档 + 一条细线，
   把「身份/导航」和「声明/元信息」分成两块，不然四行小字糊成一团 */
.ons-foot-base {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ons-border);
  font-size: 12px;
  line-height: 1.7;
}

.ons-foot-meta { white-space: nowrap; }

/* 侧边栏链接块：作为「模块与顺序」里的一个模块，可开关、可排序。
   默认跟在「特性卡片」之后；特性卡片启用时，链接块并排渲染在卡片右侧（不 sticky）；
   特性卡片关闭时，作为独立的全宽链接块输出。 */

/* 特性卡片 + 侧边栏两栏：ons-duo 挂在 features 的 ons-wrap 上 */
.ons-duo {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.ons-duo .ons-duo-main {
  flex: 1 1 auto;
  min-width: 0;
}

.ons-duo .ons-aside {
  flex: 0 0 200px;
}

/* 独立全宽态：链接横排铺开 */
.ons-aside-solo .ons-aside-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.ons-aside-solo .ons-aside-item {
  flex: 1 1 auto;
  min-width: 200px;
  border: 1px solid var(--ons-border);
  background: var(--ons-card);
}

.ons-aside-title {
  margin: 0 0 32px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

.ons-aside-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ons-card);
  border: 1px solid var(--ons-border);
  border-radius: var(--ons-radius);
  padding: 10px;
}

.ons-aside-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ons-text);
  transition: background .15s ease, border-color .15s ease;
}

.ons-aside-item:hover {
  background: var(--ons-alt);
  border-color: var(--ons-border);
}

.ons-aside-ico {
  flex: 0 0 20px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.ons-aside-ico.ons-svw { width: 20px; height: 20px; }

.ons-aside-emoji {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.ons-aside-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 900px) {
  .ons-hero { padding: 48px 0 40px; }
  .ons-hero-in { grid-template-columns: 1fr; gap: 32px; }
  .ons-cards { grid-template-columns: repeat(2, 1fr); }
  .ons-sec { padding: 48px 0; }
  .ons-foot { padding: 32px 0 36px; }
  .ons-404 { padding: 60px 0 72px; }
  .ons-404-code { font-size: 48px; }
  .ons-legal { padding: 32px 0 56px; }
  .ons-legal-body { font-size: 15px; }
  .ons-foot-bar,
  .ons-foot-base { flex-direction: column; gap: 10px; }
  .ons-foot-meta { white-space: normal; }
  /* 窄屏：特性卡片与侧边栏不再并排，侧边栏折到下方，链接横铺 */
  .ons-duo { flex-direction: column; }
  .ons-duo .ons-aside { flex: 1 1 auto; width: 100%; order: -1;}
  .ons-duo .ons-aside-list {         
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    background: none;
    padding: 0;
    border: 0; }
  .ons-duo .ons-aside-item { flex: 1 1 calc(50% - 8px); min-width: 0; border: 1px solid var(--ons-border); background: var(--ons-card); }
}

@media (max-width: 640px) {
  .ons-wrap { padding: 0 20px; }
  .ons-cards { grid-template-columns: 1fr; }
  .ons-hero-title { gap: 12px; }
  .ons-logo { width: 44px; height: 44px; border-radius: 11px; }
  .ons-tablewrap { border: 0; background: transparent; overflow: visible; }
  .ons-table, .ons-table tbody, .ons-table tr, .ons-table td { display: block; min-width: 0; }
  .ons-table thead { display: none; }
  .ons-table tr {
    border: 1px solid var(--ons-border);
    border-radius: var(--ons-radius);
    margin-bottom: 20px;
    background: var(--ons-card);
    overflow: hidden;
  }
  /* 手机上每条记录是一张卡：单元格之间不再画分隔线，靠卡片间距区分，
     否则一张卡里横着三四条线，比表格本身还乱 */
  .ons-table td {
    border-bottom: 0;
    padding: 10px 16px 10px 92px;
    position: relative;
  }
  .ons-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    top: 10px;
    width: 68px;
    font-size: 12px;
    color: var(--ons-muted);
  }
}

/* 返回顶部：浮在右下角，滚动超过一屏才出现 */
.ons-totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ons-border);
  border-radius: 50%;
  background: var(--ons-card);
  color: var(--ons-text);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.ons-totop[hidden] { display: none; }

.ons-totop:hover {
  color: var(--ons-accent);
  border-color: var(--ons-accent);
  transform: translateY(-2px);
}

.ons-totop:focus-visible {
  outline: 2px solid var(--ons-accent);
  outline-offset: 2px;
}

.ons-totop svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  /* 手机上锚点会和主站标识、开关挤成一排，直接收起来，滚动本身就是导航 */
  .ons-anchors { display: none; }
  .ons-totop { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ons-totop, .ons-totop:hover { transition: none; transform: none; }
}