/* 官网样式。二十个语种、深浅两色、从 320px 到超宽屏共用这一份。
 *
 * 配色取自应用自己：`--rouge` 就是「中式明艳」的唇色胭脂红 #C7304A
 * （ColorLibrary.swift 的 carmine），`--bezel-face` 与
 * Tools/prepare_images.sh 压平截图用的底色是同一个值 —— 改一处必须改另一处，
 * 否则手机屏幕的四角会浮出一圈别的颜色。
 *
 * 排版方向一律用逻辑属性（margin-inline / inset-inline / padding-inline），
 * 阿拉伯语页面带 dir="rtl"，写死 left/right 的地方到那边就是反的。
 */

/* ── 色板 ──────────────────────────────────────────────────────── */

:root {
  /* 苹果官网那套中性色。灰不是纯灰 —— #f5f5f7 偏一点冷，
     压在 #fbfbfd 的页底上才分得出层次而不显脏 */
  --paper:   #fbfbfd;
  --soft:    #f5f5f7;
  --ink:     #000;      /* 深色段落用纯黑，和手机边框接得上 */
  --ink-soft:#1d1d1f;
  --rouge:   #c7304a;   /* 应用里的胭脂红，唯一的彩色 */
  --rouge-lit: #ff5f7a;

  --bg:      var(--paper);
  --bg-soft: var(--soft);
  --fg:      #1d1d1f;
  --fg-dim:  #6e6e73;
  --rule:    rgba(0, 0, 0, .1);
  --accent:  var(--rouge);

  --on-ink:     #f5f5f7;
  --on-ink-dim: #86868b;

  --bezel-face: #17161a;
  --bezel-rim:  rgba(255, 255, 255, .22);
  --key:        linear-gradient(#7d7a83, #4a474e);

  --text: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;  /* 各页面内联覆盖 */
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34em;
  --gap: clamp(3.5rem, 8vw, 7rem);

  /* 苹果那条缓动：起步快、收尾长，动效因此显得「稳」而不是「弹」 */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #000;
    --bg-soft: #101010;
    --fg:      #f5f5f7;
    --fg-dim:  #86868b;
    --rule:    rgba(255, 255, 255, .14);
    --accent:  var(--rouge-lit);
    --soft:    #101010;
  }
}

:root[data-theme="dark"] {
  --bg:      #000;
  --bg-soft: #101010;
  --fg:      #f5f5f7;
  --fg-dim:  #86868b;
  --rule:    rgba(255, 255, 255, .14);
  --accent:  var(--rouge-lit);
  --soft:    #101010;
}

/* ── 基础 ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 版心与条带 ────────────────────────────────────────────────── */

.wrap-wide { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.wrap { width: min(46rem, 100% - 2.5rem); margin-inline: auto; }

.band { padding-block: var(--gap); }
.band-soft { background: var(--bg-soft); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink .eyebrow, .band-ink .aside, .band-ink .lede { color: var(--on-ink-dim); }
.band-ink a { color: var(--on-ink); }
.center { text-align: center; }

.split { display: grid; gap: var(--gap); align-items: start; }
.split > * { min-width: 0; }   /* 栅格子项默认不许窄于内容，长串会撑破窄屏 */

/* ── 排印 ──────────────────────────────────────────────────────── */
/* 苹果的做法：**同一个家族，靠字重、字号与字距拉开层次。**
   标题字号大、字重重、字距收紧（负 tracking）；正文用次要色。
   用 :where() 把特指度压到 0 并写在组件规则之前 ——
   否则 `.band p` 会盖掉 `.refusal`、`.cap` 这些带类名的段落。 */

.band :where(h1) {
  font-size: clamp(2.4rem, 1.5rem + 4.3vw, 4.6rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

.band :where(h2) {
  font-size: clamp(1.75rem, 1.15rem + 2.7vw, 3.1rem);
  font-weight: 650;
  line-height: 1.09;
  letter-spacing: -0.022em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.band :where(h3) {
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 1.2rem 0 .5rem;
}

.band :where(p) {
  margin: 0 0 1.1rem;
  max-width: var(--measure);
  font-size: 1.06rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.band :where(p:last-child) { margin-bottom: 0; }

/* 眉标不做大写加宽字距 —— 那是编辑设计的做法。
   苹果用的是一行小号、加粗、**带颜色**的引题 */
.eyebrow {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin: 0 0 .7rem !important;
}

.lede { font-size: 1.2rem !important; line-height: 1.45; color: var(--fg-dim); }
.aside { font-size: .88rem; color: var(--fg-dim); line-height: 1.5; }

.refusal {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: var(--accent);
  margin: 0 !important;
}

.status {
  display: inline-block;
  font-size: .9rem;
  color: var(--fg-dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .5rem 1.3rem;
  margin-top: .6rem;
}

/* ── 入场动效 ──────────────────────────────────────────────────── */
/* 滚到哪一段，哪一段淡入并轻轻上浮。**只有这一种动效** ——
   苹果官网的克制之处正在于此：一个手法用到底，不是每一屏换一个花样。
   没有 JS 时 `.reveal` 不会被加上，内容直接是可见状态。 */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 页头 ──────────────────────────────────────────────────────── */

/* 吸顶 + 毛玻璃，苹果官网的导航条就是这么做的。
   半透明底色配 backdrop-filter：滚动时下面的内容透出来一点，
   条本身却始终读得清 */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-head--ink {
  background: color-mix(in srgb, #000 78%, transparent);
  border-bottom-color: rgba(245, 245, 247, .12);
}
.site-head--ink, .site-head--ink a { color: var(--on-ink); }

/* 三块用栅格摆，不用 flex-wrap。
   `flex-wrap` 换行后三块各自贴到行首 —— 窄屏上就是三行叠在同一边，
   阿拉伯语下尤其明显（全堆在右边）。栅格能明确指定「名字独占一行，
   导航和语言按钮共用第二行、各去一头」。 */
.head-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem 1.5rem;
  padding-block: 1.1rem;
}

@media (max-width: 40rem) {
  .head-row { grid-template-columns: minmax(0, 1fr) auto; }
  .site-name { grid-column: 1 / -1; }
}

.site-name {
  font-family: var(--text);
  font-size: 1.06rem;
  letter-spacing: .02em;
  text-decoration: none;
}

/* 导航要能自己换行并收窄。法语的 Confidentialité、
   俄语的 Конфиденциальность 比中文的「隐私」长四五倍 ——
   只靠 .head-row 换行不够，这一行自身也得让得开 */
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end;
            min-width: 0; gap: .35rem 1.15rem; font-size: .9rem; }
.site-nav a { text-decoration: none; color: inherit; opacity: .74; }
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; }

/* 语言选单。用 <details> 而不是 <select>：
   没有 JS 也要能换语言，而 select 换页必须靠脚本 */
.langs { position: relative; font-size: .88rem; }
.langs summary {
  cursor: pointer;
  list-style: none;
  padding: .2rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
}
.site-head--ink .langs summary { border-color: rgba(244, 239, 236, .22); }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; opacity: .6; }
.langs ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
  max-height: 60vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
  gap: 1px;
}
.langs a {
  display: block;
  padding: .38rem .6rem;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.langs a:hover { background: var(--bg-soft); }
.langs a[aria-current] { color: var(--accent); font-weight: 600; }

/* ── 手机外框 ──────────────────────────────────────────────────── */
/* 尺寸全部由 --w（屏幕宽度）推出。真机 440×956pt、屏幕圆角 55pt、
   边框约 4.5pt，于是圆角 = 12.5% 宽、边框 ≈ 1% 宽。
   **屏幕的圆角不在这里画** —— 截图本身带着设备遮罩裁出的真圆角，
   已经压平到 --bezel-face 上，所以这里只画边框与侧键。 */

/* 侧键是伸到框外的，所以这一层要留出它的宽度，
   否则贴在版心边上的那一台会把整页顶出横向滚动条 */
.dev-slot { container-type: inline-size; padding-inline: 4px; }
.dev-slot > .device { --w: 100cqw; }

.device {
  --w: 200px;
  --bezel: calc(var(--w) * .0102 + 1.5px);
  --screen-r: calc((var(--w) - var(--bezel) * 2) * .125);
  --key-w: calc(var(--w) * .011 + 1px);

  position: relative;
  width: var(--w);          /* 含边框在内。box-sizing 全局是 border-box */
  padding: var(--bezel);
  border-radius: calc(var(--screen-r) + var(--bezel));
  background: var(--bezel-face);
  box-shadow:
    0 0 0 1px var(--bezel-rim),
    0 24px 48px -20px rgba(0, 0, 0, .5);
}

.device--pad {
  --w: 420px;
  --bezel: calc(var(--w) * .012 + 2px);
  --screen-r: calc(var(--w) * .045);
}

/* **必须裁。** 截图是方形的，四角虽然已经压平成边框色，
   但 `.device` 的 border-radius 只作用于它自己的背景，不裁子元素 ——
   方角会戳到圆角外面，浅色页面上就是四个直角黑影。
   裁在 .screen 上而不是 .device 上：侧键是伸到框外的，
   裁 .device 会把它们一起切掉。 */
.device .screen {
  display: block;
  position: relative;
  border-radius: var(--screen-r);
  overflow: hidden;
}
.device .screen > img { width: 100%; height: auto; display: block; }

/* 侧键。位置按真机比例摆，比边框略亮 */
.device .k {
  position: absolute;
  width: var(--key-w);
  background: var(--key);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}
/* 侧键用物理 left/right，**不跟着 dir 翻**：
   真机的电源键在右边，阿拉伯语用户手里那台也一样。
   这里翻过来只会得到一台不存在的手机。 */
.device .k.l { left: calc(var(--key-w) * -1 + .5px); border-radius: 2px 0 0 2px; }
.device .k.r { right: calc(var(--key-w) * -1 + .5px); border-radius: 0 2px 2px 0; }
.device .k.act { top: 15.5%; height: 3.4%; }
.device .k.vup { top: 21.0%; height: 6.6%; }
.device .k.vdn { top: 29.2%; height: 6.6%; }
.device .k.pwr { top: 23.5%; height: 10.2%; }
.device .k.cam { top: 36.5%; height: 4.8%; }


/* ── 素颜／上妆对比 ────────────────────────────────────────────── */

.compare { --pos: 50%; display: grid; justify-items: center; gap: .9rem; }
/* 对比是一个左右的物理动作，不是阅读顺序。
   range 输入在 rtl 下会自己反向，而 clip-path 不会 —— 两者一反一不反就对不上，
   所以这一小块强制 ltr，阿拉伯语页面上拖动手感与别处一致 */
.compare .screen { direction: ltr; }
.compare .screen > img { grid-area: 1 / 1; }

.compare .over {
  position: absolute;
  inset: 0;
  /* 逻辑属性在这里不适用：--pos 跟的是滑块的物理位置 */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  /* 提前告诉浏览器这一层要动，免得每次拖动都重新建层 ——
     手机上「拖起来一顿一顿」就是这个 */
  will-change: clip-path;
  backface-visibility: hidden;
}
.compare .over img { width: 100%; height: 100%; object-fit: cover; }

.compare .seam {
  position: absolute;
  inset-block: 0;
  /* **`left` 而不是 `translate`。** 曾经为了「交给合成器更流畅」改成
     `translate: var(--pos)` —— 那是错的：`translate` 用百分比时按
     **元素自身**尺寸算，而这条线只有 1px 宽，`translate: 80%` 只挪 0.8px，
     结果接缝几乎钉死在左边，画面能拖、线不跟着走。
     `left` 的百分比才是相对包含块算的，这里要的正是它。
     一条 1px 绝对定位元素的重排开销可以忽略，流畅度靠的是
     `.over` 上的 will-change 和指针事件那套，不靠这里。 */
  left: var(--pos);
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, .9);
  pointer-events: none;
}
.compare .knob {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.compare .knob::before {
  content: "⟷";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #17161a;
  font-size: .95rem;
}

/* 滑块铺满画面、自身完全透明 —— 拖动、键盘、读屏都走原生 range，
   不必自己实现一套指针事件 */
.compare .slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  /* **不接指针事件。** 拖动改由 site.js 的指针事件驱动整块画面 ——
     原生 range 在 iOS Safari 上只有抓住滑块本身才拖得动，点轨道没反应，
     而我们的把手是另画的，用户根本不知道该抓哪，表现就是「怎么拖都不动」。
     这里留着它是为了键盘：`pointer-events: none` 不影响 Tab 聚焦与方向键。 */
  pointer-events: none;
  cursor: ew-resize;
}

/* 拖动发生在整块屏幕上。`pan-y` 把纵向留给浏览器翻页，
   其余方向交给下面的指针事件 */
.compare .screen {
  touch-action: pan-y;
  /* 拖动时别选中文字 —— 否则鼠标一拖，整段说明被刷蓝 */
  user-select: none;
  -webkit-user-select: none;
}

/* **桌面上鼠标拖不动，根因在这里。** `<img>` 默认是可拖拽的，
   鼠标按住图片一动，浏览器就启动了原生的图片拖放（HTML5 drag and drop），
   指针事件随即被抢走 —— 表现是「按得下去，拖不动」。
   触摸屏没有原生图片拖放，所以手机上不出现这个问题。
   火狐不认 `-webkit-user-drag`，所以 site.js 里还拦了一道 dragstart。 */
.compare .screen img {
  -webkit-user-drag: none;
  user-drag: none;
}

.compare .slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.6rem; height: 100%;
}
.compare .slider::-moz-range-thumb { width: 2.6rem; height: 100%; border: 0; background: transparent; }
.compare .slider::-moz-range-track { background: transparent; }

.cmp-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(360px, 82vw);
  font-size: .82rem;
  letter-spacing: .04em;
  margin: 0 !important;
  color: var(--on-ink-dim);
}
.cmp-legend .lit { color: var(--on-ink); }
.cmp-hint { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-dim); margin: 0 !important; }

/* ── 九个色块 ──────────────────────────────────────────────────── */

.swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.4rem 1.2rem;
}
.swatch { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: .7rem; align-items: center; }
.chip {
  grid-row: 1 / 3;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}
.chip--form {
  background:
    repeating-linear-gradient(-45deg, var(--fg-dim) 0 1.5px, transparent 1.5px 5px);
  opacity: .7;
}
.s-part { font-weight: 600; font-size: .95rem; align-self: end; }
.s-name { font-size: .86rem; color: var(--fg-dim); align-self: start; }
.s-meta {
  grid-column: 2;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

/* ── 功能区 ────────────────────────────────────────────────────── */

.features {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.6rem 2rem;
}
.feature .dev-slot { margin-bottom: 1.2rem; }
.feature p { font-size: .95rem; color: var(--fg-dim); }

/* ── 五种肤色 ──────────────────────────────────────────────────── */
/* 五台并排，窄屏改成横向滚动 —— 挤成两行会让「同一套色号」这个
   比较失去意义，一眼扫过去才看得出差别 */

.skin-row {
  margin-top: 2.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.4rem);
  align-items: start;
}

/* 五台并排要够宽才看得清；不够就改成横向滚动。
   58rem 这个界限是量出来的：再窄下去每台不到 150px，
   而这一段的全部意义就是五张脸能一眼比出来 */
@media (max-width: 58rem) {
  .skin-row {
    grid-auto-columns: 42vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .8rem;
    /* 滚出版心，让最后一台能滚到中间来 */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50% + 1.25rem);
  }
    .skin-row .dev-slot { scroll-snap-align: center; }
}

/* ── 图册 ──────────────────────────────────────────────────────── */

.carousel { position: relative; margin-top: 2.5rem; }
.track {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 78vw);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.slide { scroll-snap-align: center; }

.cap { font-size: .84rem; color: var(--fg-dim); margin: .9rem 0 0 !important; }

.cnav {
  position: absolute;
  top: 38%;
  z-index: 5;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cnav[disabled] { opacity: .3; cursor: default; }
.cnav.prev { inset-inline-start: -1.3rem; }
.cnav.next { inset-inline-end: -1.3rem; }
/* 方向箭头是字符，RTL 下要跟着翻 */
[dir="rtl"] .cnav { scale: -1 1; }

@media (max-width: 60rem) {
  .cnav { display: none; }   /* 窄屏直接滑，按钮反而挡内容 */
}

/* ── 权限清单 ──────────────────────────────────────────────────── */

.manifest {
  background: var(--ink-soft);
  border: 1px solid rgba(242, 235, 232, .14);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.95;
  color: var(--on-ink-dim);
  margin-top: 1.6rem;
  -webkit-overflow-scrolling: touch;
}
.manifest b { color: var(--on-ink); font-weight: 400; }

/* ── 首屏排布 ──────────────────────────────────────────────────── */

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero-copy { align-self: center; }

@media (min-width: 56rem) {
  .split--hero { grid-template-columns: 1fr auto; align-items: center; }
  .split--text { grid-template-columns: 1fr 1fr; }
}

/* ── 法务与支持页 ──────────────────────────────────────────────── */
/* 刻意朴素。读它们的是审核员和遇到问题的人，
   他们要的是尽快找到某一句话，不是被排版款待。 */

.doc { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.doc h1 {
  font-family: var(--text);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 1.6rem;
}
.doc h2 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 2.6rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.doc h3 { font-size: 1.02rem; font-weight: 600; margin: 1.7rem 0 .5rem; }
.doc p, .doc li { max-width: var(--measure); }
.doc ul, .doc ol { padding-inline-start: 1.3rem; }
.doc li { margin-bottom: .4rem; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
.doc code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--bg-soft);
  padding: .12em .38em;
  border-radius: 4px;
}
.doc pre {
  background: var(--ink);
  color: var(--on-ink);
  padding: 1rem 1.1rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.7;
}
.doc pre code { background: none; padding: 0; color: inherit; }
.doc blockquote { margin-inline: 0; color: var(--fg-dim); }

.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.doc th, .doc td {
  text-align: start;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.doc th { font-weight: 600; white-space: nowrap; }

.lang-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .3rem;
}
.lang-list a { display: block; padding: .5rem .7rem; border-radius: 8px; text-decoration: none; }
.lang-list a:hover { background: var(--bg-soft); }

/* ── 页脚 ──────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.4rem 3rem;
  margin-top: 0;
  font-size: .88rem;
  color: var(--fg-dim);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-bottom: 1rem; }
.foot-links a { color: inherit; }
.foot-note { margin: .3rem 0 0; max-width: var(--measure); }