/* --------------------------------------------------------------------------
   中文字体：霞鹜文楷（SIL OFL 1.1，可随站点分发）——与设备出厂字库同一款脸。
   只打包站点**实际用到**的 874 个字符，183 KB；整份 TTF 是 8.2 MB。
   改内容后需重新生成，见 README。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "LXGW WenKai";
  src: url("../fonts/lxgw-wenkai-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+3000-303F,
                 U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF;
}

/* ==========================================================================
   夜猫子官网 · 设计系统
   --------------------------------------------------------------------------
   这一版对着苹果官网的排版逻辑重写，规则只有三条：

   1. **一个强调色。** 钨丝灯 #FFC65C。其余全是中性灰阶。
      朱砂只在真正是印章的地方出现（文档页那一枚），不当 UI 色用。
      信号蓝与电流青只活在品牌页的色板样块里——那是它们该待的地方。

   2. **两种底色交替。** 近白 #f5f5f7 与近黑，段落之间整块切换。
      节奏靠底色，不靠边框和分割线。

   3. **排版对齐苹果官网**：首屏居中而不是左右分栏；标题居中、正文限宽；
      大段落之间用整屏的图和整屏的字交替推进；数字比段落更抢眼。
   ========================================================================== */

:root {
  /* 强调色 —— 只有这一个 */
  --accent: #FFC65C;
  --accent-deep: #E0A93C;          /* 白底上的图形填充，保证够暗 */

  /* 亮底 */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;

  /* 暗底 */
  --dark: #000000;
  --dark-alt: #0b0b0d;
  --on-dark: #f5f5f7;
  --on-dark-2: #a1a1a6;
  --on-dark-3: #6e6e73;
  --line-dark: #2a2a2e;

  /* 印章——不是 UI 色 */
  --seal: #C1352B;

  /* 字体：中文用霞鹜文楷（设备出厂字库同款，SIL OFL 1.1），
     拉丁与数字用系统无衬线，参数表里的大数字才用等宽 */
  --font-cn: "LXGW WenKai", "Songti SC", "Noto Serif CJK SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "PingFang SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --maxw: 1120px;
  --maxw-text: 720px;      /* 正文限宽，苹果官网的长文也是这个量级 */
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 18px;
}

/* --------------------------------------------------------------------------
   基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 56px 0; }

code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-alt); padding: 0.12em 0.38em; border-radius: 4px; }
pre.code {
  background: var(--dark-alt); color: var(--on-dark);
  padding: 20px 24px; border-radius: var(--radius);
  overflow-x: auto; font-family: var(--font-mono);
  font-size: 13.5px; line-height: 1.7;
}
pre.code code { background: none; padding: 0; font-size: inherit; }

/* 中文正文用文楷，与设备同款；标题与数字留给系统无衬线，
   免得中文标题里的拉丁串掉进宋体的老式数字里 */
:lang(zh) p, :lang(zh) li { font-family: var(--font-cn); }

/* --------------------------------------------------------------------------
   布局
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--text { max-width: var(--maxw-text); margin: 0 auto; padding: 0 var(--gutter); }

/* 段落间距按底色交替拉大，苹果官网的节奏就来自这个 */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--sm { padding: clamp(52px, 7vw, 92px) 0; }

.bg-light { background: var(--bg); color: var(--ink); }
.bg-gray  { background: var(--bg-alt); color: var(--ink); }
.bg-dark  { background: var(--dark); color: var(--on-dark); }
.bg-dark-alt { background: var(--dark-alt); color: var(--on-dark); }

.bg-dark, .bg-dark-alt {
  --ink: var(--on-dark);
  --ink-2: var(--on-dark-2);
  --ink-3: var(--on-dark-3);
  --line: var(--line-dark);
  --line-soft: var(--line-dark);
  --accent-deep: var(--accent);
}

/* --------------------------------------------------------------------------
   顶栏
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0,0,0,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.topbar--light { background: rgba(255,255,255,.72); border-bottom: 1px solid var(--line-soft); }

.topbar-inner {
  display: flex; align-items: center; gap: 22px;
  height: 52px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark); }
.topbar--light .brand-name { color: var(--ink); }
.brand-tagline { font-size: 12px; color: var(--on-dark-3); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-dark); }
.topbar--light .brand-tagline { color: var(--ink-3); border-color: var(--line); }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav-link {
  padding: 6px 12px; border-radius: 7px;
  font-size: 13px; color: var(--on-dark-2);
  text-decoration: none; transition: color .18s, background .18s;
}
.topbar--light .nav-link { color: var(--ink-2); }
.nav-link:hover { color: var(--on-dark); background: rgba(255,255,255,.08); }
.topbar--light .nav-link:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.nav-link.is-current { color: var(--accent); }
.topbar--light .nav-link.is-current { color: var(--accent-deep); }

.langswitch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 12.5px; color: var(--on-dark-2); text-decoration: none;
  white-space: nowrap; transition: color .18s, border-color .18s;
}
.topbar--light .langswitch { border-color: var(--line); color: var(--ink-2); }
.langswitch:hover { color: var(--accent); border-color: var(--accent); }
.langswitch .globe { width: 14px; height: 14px; opacity: .85; }

@media (max-width: 780px) {
  .brand-tagline { display: none; }
  .nav-link { padding: 6px 8px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   首屏 —— 居中，不是左右分栏
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 10vw, 132px) 0 clamp(48px, 7vw, 96px);
  text-align: center;
}
/* 底纹：极淡的一层光，藏在标题后面。品牌板里那盏灯的光晕。 */
.hero::before {
  content: "";
  position: absolute; left: 50%; top: -18%;
  width: min(1100px, 130vw); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,198,92,.13), transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }

.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.bg-light .eyebrow, .bg-gray .eyebrow { color: var(--accent-deep); }

.hero h1 {
  font-size: clamp(44px, 8.5vw, 104px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0;
}
.hero h1 .model {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.9vw, 22px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.bg-light .hero h1 .model, .bg-gray .hero h1 .model { color: var(--accent-deep); }

.hero .lede {
  font-family: var(--font-cn);
  font-size: clamp(17px, 1.85vw, 22px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 40em;
  margin: 26px auto 0;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px; border-radius: 980px;
  font-size: 15px; text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s, color .18s, transform .18s, border-color .18s;
}
.btn--primary { background: var(--accent); color: #1a1206; font-weight: 600; }
.btn--primary:hover { transform: translateY(-1px); background: #FFD382; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.bg-light .btn--ghost:hover, .bg-gray .btn--ghost:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* 跳到站外的按钮（设备网页控制台这类真能用的外部入口）。
   尾巴上一个 ↗ 是必须的：用户点下去发现换了个站点，
   而他并没有预期这件事，那一刻的信任就没了。 */
.btn--out { position: relative; padding-right: 34px; }
.btn--out::after {
  content: "↗";
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; line-height: 1;
  opacity: .72; pointer-events: none;
}

/* 文字链：像苹果那样用下划线，不用蓝色 */
.link-more {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); text-decoration: none; font-size: 15px;
}
.bg-light .link-more, .bg-gray .link-more { color: var(--accent-deep); }
.link-more::after { content: "›"; font-size: 18px; line-height: 1; transform: translateY(-1px); }
.link-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   数字条 —— 苹果官网最爱的东西：数字比段落更抢眼
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(48px, 7vw, 88px);
}
.bg-dark .stat-row, .bg-dark-alt .stat-row { background: var(--line-dark); }
.stat { background: inherit; padding: 30px 26px; text-align: center; }
.stat .n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.bg-light .stat .n, .bg-gray .stat .n { color: var(--accent-deep); }
.stat .l {
  display: block; margin-top: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.stat .u { font-size: 0.62em; font-weight: 400; color: var(--ink-3); margin-left: 3px; }

/* --------------------------------------------------------------------------
   段落标题 —— 居中，限宽
   -------------------------------------------------------------------------- */
.head { text-align: center; margin: 0 auto clamp(36px, 5vw, 64px); max-width: 780px; }
.head .kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.head h2 {
  font-family: var(--font-cn);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 18px;
}
.head p {
  font-family: var(--font-cn);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 38em; margin: 0 auto;
}
.head--left { text-align: left; }
.head--left p { margin: 0; }

/* 大陈述句 */
.statement {
  font-family: var(--font-cn);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 22em;
  margin: 0 auto;
}
.statement em { font-style: normal; color: var(--accent); }
.bg-light .statement em, .bg-gray .statement em { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   设备外壳
   --------------------------------------------------------------------------
   几何是程序化量出来的，不是眼睛估的。真机照片 339×584，机身落在
   x 23..311、y 7..560，也就是 288×553；下面所有百分比都是相对机身宽度 W，
   机身本身是 288:553 = 1:1.92。

   交叉验证：照片里量到的屏框是 222.5×387.5 = 1:1.741，面板真值
   720:1248 = 1:1.733，差 0.5%。这一条独立成立，说明这组读数没被手持
   透视带偏。

     外壳          1 : 1.92，圆角 9.0% / 4.7%
     扬声器网      左 7.0%、上 2.2%、宽 61.5%、高 8.1%，药丸形凹槽
       密孔        间距 9.4px @ 288 基准 = 3.26%W / 1.70%H，约 17 列 5 行
     摄像头        中心 84.2% / 4.3%，直径 6.9% 宽
     指示灯        79.2% / 84.6% / 89.0%，y 9.5%，直径 1.04%
     前盖板        左 4.0%、上 12.3%、宽 92.0%、下到 98.2%
     屏幕框        左 11.1%、上 18.1%、宽 77.3%、高 70.1%，圆角 4.9% / 2.8%
       玻璃压边    1.05%W（照片上量到 3px @ 288 基准）
     底部标记      中心 50.6% / 93.0%，宽 33.8%（照片此处被打码）

   颜色也照抄照片，但整体提亮一档：照片里机身 #ECE5E3、屏面 #B6B5AA，
   屏/机 = 0.75。这个比值保留，白位提到 #CBCABE，否则嵌在白底网页里会发脏。
   屏图用 multiply 压在屏面上，墨色就是真墨色，白位就是屏面本身。

   第一版把屏面画成深色（#2B2926），那是我以为的「墨水屏」，实际上这台是
   浅色电子纸；屏框那一圈也不是固件画的——渲染图整周是白的，那是玻璃压边。
   -------------------------------------------------------------------------- */
.device {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.92;
  border-radius: 9% / 4.7%;
  background: linear-gradient(176deg, #F5F1EC 0%, #EDE8E2 46%, #E3DCD5 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -2px 6px rgba(0,0,0,.07) inset,
    0 26px 54px -22px rgba(0,0,0,.30),
    0 0 0 1px rgba(0,0,0,.06);
}

/* 顶盖与前盖板之间那条分模线。压在盖板上边缘：上半截露在外面成为暗线，
   下半截被盖板盖掉，读起来就是一道沟，而不是一条画上去的线。 */
.device-seam {
  position: absolute;
  left: 4%; top: 11.95%;
  width: 92%; height: 0.7%;
  background: linear-gradient(180deg, rgba(108,98,88,.34) 0 45%, rgba(255,255,255,.62) 100%);
}

/* 前盖板：一块独立的圆角面板，边缘有可见轮廓 */
.device-plate {
  position: absolute;
  left: 4%; top: 12.3%;
  width: 92%; height: 85.9%;
  border-radius: 5% / 2.4%;
  background: linear-gradient(178deg, #F2EEE9 0%, #EBE6E0 62%, #E5DFD9 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 0 0 1px rgba(116,106,96,.28),
    0 2px 5px rgba(0,0,0,.07);
}

/* 屏幕：浅色电子纸屏面，外圈一圈玻璃压边。
   注意本元素在 .device-plate 里，百分比是相对盖板（机身 92%W × 85.9%H）
   换算过来的，不是相对机身。 */
.device-screen {
  position: absolute;
  left: 7.72%; top: 6.75%;
  width: 84.02%; height: 81.61%;
  border-radius: 4.94% / 2.84%;
  background: linear-gradient(180deg, #CBCABE 0%, #C4C3B7 55%, #BDBDB1 100%);
  padding: 1.14%;                 /* = 机身 1.05%W，实测压边 3px @ 288 基准 */
  box-shadow:
    inset 0 0 0 1px rgba(66,62,55,.50),   /* 玻璃内缘那道暗线 */
    0 0 0 1px rgba(120,112,102,.32),      /* 压边外缘 */
    0 1px 3px rgba(0,0,0,.15);
}
.device-screen img {
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;              /* 屏框 1:1.741 vs 面板 1:1.733，contain 会留缝 */
  mix-blend-mode: multiply;      /* 白位落到屏面色上，墨位落到黑上 */
  border-radius: 3.4% / 2%;
}

/* 扬声器网：药丸形凹槽 + 错排密孔 */
.device-grille {
  position: absolute;
  left: 7%; top: 2.2%;
  width: 61.5%; height: 8.1%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, #E7E1DA, #F0ECE7);
  box-shadow:
    0 1px 2px rgba(0,0,0,.16) inset,
    0 1px 0 rgba(255,255,255,.8);
}
.device-grille::before {
  content: "";
  position: absolute;
  inset: 16% 4%;
  background-image:
    radial-gradient(circle, rgba(52,47,42,.62) 0 26%, transparent 28%),
    radial-gradient(circle, rgba(52,47,42,.62) 0 26%, transparent 28%);
  /* 5.30% / 21% = 实测的 9.4px 孔距，相对这个药丸本身 */
  background-size: 5.3% 21%, 5.3% 21%;
  background-position: 0 0, 50% 50%;
}

/* 摄像头：一颗深灰镜片，不是亮玻璃球 */
.device-cam {
  position: absolute;
  left: 84.2%; top: 4.3%;
  width: 6.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6E6A64 0%, #3A3833 46%, #1E1D1B 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 1px 1px rgba(255,255,255,.45);
}

/* 指示灯：三颗，摄像头正下方 */
.device-leds {
  position: absolute;
  left: 79.2%; top: 9.5%;
  width: 9.8%; height: 1.04%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.device-leds i {
  width: 10.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6A655D;
  box-shadow: 0 1px 0 rgba(255,255,255,.45);
}

/* 底部标记：真机上这里有标记，照片里被打码了，只画一个不冒充图形的凹痕。
   同样在 .device-plate 里，百分比是相对盖板换算的。 */
.device-mark {
  position: absolute;
  left: 50.65%; top: 91.4%;
  transform: translateX(-50%);
  width: 36.7%; height: 5.12%;
  border-radius: 999px;
  background: rgba(118,110,102,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.device-hero { width: min(330px, 80vw); margin: clamp(36px, 5vw, 66px) auto 0; }
.device-stage .device { width: min(380px, 84vw); }

/* --------------------------------------------------------------------------
   屏幕画廊
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.gallery--tight { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.shot { margin: 0; text-align: center; }
.shot figcaption { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); }
.shot figcaption span {
  display: block; margin-top: 6px;
  font-family: var(--font-cn); font-size: 13.5px; line-height: 1.6;
  font-weight: 400; color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   功能块：图与字交替推进（苹果官网最常见的段落形态）
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split + .split { margin-top: clamp(64px, 9vw, 120px); }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.split-text h3 {
  font-family: var(--font-cn);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.26; letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.split-text p {
  font-family: var(--font-cn);
  font-size: 16.5px; line-height: 1.78; color: var(--ink-2);
  margin: 0 0 14px;
}
.split-text p:last-child { margin-bottom: 0; }
.split-shot { text-align: center; }
.split-shot .device { width: min(250px, 70vw); }

/* --------------------------------------------------------------------------
   功能网格
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.bg-dark .features, .bg-dark-alt .features { background: var(--line-dark); }
.feature { padding: 32px 28px 34px; background: var(--bg); text-align: left; }
.bg-gray .feature { background: var(--bg-alt); }
.bg-dark .feature, .bg-dark-alt .feature { background: var(--dark); }
.bg-dark-alt .feature { background: var(--dark-alt); }
.feature h3 { font-family: var(--font-cn); font-size: 19px; margin: 0 0 10px; }
.feature p { font-family: var(--font-cn); font-size: 15px; line-height: 1.76; color: var(--ink-2); margin: 0; }
.feature .fig { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 12px; }
.bg-light .feature .fig, .bg-gray .feature .fig { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   文档页
   -------------------------------------------------------------------------- */
.docs-head { text-align: center; padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); }
.docs-head h1 {
  font-family: var(--font-cn);
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
  margin: 0 0 20px;
}
.docs-head p { font-family: var(--font-cn); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.75; color: var(--ink-2); max-width: 38em; margin: 0 auto; }

.doc { padding: 0 0 clamp(90px, 11vw, 150px); }
.doc h2 {
  font-family: var(--font-cn);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.3; letter-spacing: -0.015em;
  margin: 72px 0 20px;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-family: var(--font-cn); font-size: 20px; margin: 40px 0 12px; }
.doc p { font-family: var(--font-cn); font-size: 16.5px; line-height: 1.86; margin: 0 0 18px; }
.doc ul, .doc ol { font-family: var(--font-cn); font-size: 16.5px; line-height: 1.82; padding-left: 1.3em; margin: 0 0 20px; }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--accent); }
.doc a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.doc a:hover { text-decoration-color: var(--accent); }

.doc figure.shot { margin: 36px auto 44px; max-width: 300px; text-align: center; }

.doc .table-wrap { overflow-x: auto; margin: 0 0 26px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.doc td { font-family: var(--font-cn); }
.doc td:first-child { white-space: nowrap; color: var(--ink-2); }

.toc { margin: 0 0 48px; padding: 26px 28px; border-radius: var(--radius); background: var(--bg-alt); }
.toc h2 { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; padding: 0; border: 0; }
.toc ol { columns: 2; column-gap: 36px; margin: 0; padding-left: 1.2em; font-family: var(--font-sans); font-size: 14.5px; }
.toc li { break-inside: avoid; margin-bottom: 7px; }
.toc li::marker { color: var(--accent-deep); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.seal {
  display: inline-block; padding: 4px 11px; margin: 0 0 26px;
  background: var(--seal); color: #FFF6EC;
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.12em;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   品牌页
   -------------------------------------------------------------------------- */
.brand-board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 860px) { .brand-board { grid-template-columns: 1fr; } }
.brand-board img { width: 100%; border-radius: var(--radius); }

.motif { margin-top: 18px; padding: 18px 22px; border-radius: 12px; background: var(--bg-alt); font-family: var(--font-cn); font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.motif strong { color: var(--ink); font-weight: 600; }
.bg-dark .motif { background: var(--dark-alt); color: var(--on-dark-2); }
.bg-dark .motif strong { color: var(--on-dark); }

/* 品牌页：品牌板旁边的一段说明 */
.board-note {
  font-family: var(--font-cn); font-size: 16px; line-height: 1.9;
  color: var(--ink-2); margin: 0; max-width: 34em;
}

/* 品牌页：开发心得，一条一条往下走 */
.notes { max-width: 840px; margin: 0 auto; display: grid; gap: clamp(22px, 2.6vw, 34px); }
.note { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); }
.note-n {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  color: var(--accent-deep); padding-top: 5px;
}
.note h3 { font-family: var(--font-cn); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.note p { font-family: var(--font-cn); font-size: 15px; line-height: 1.85; color: var(--ink-2); margin: 0; }
@media (max-width: 560px) { .note { grid-template-columns: 38px minmax(0, 1fr); } }

.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); }
.bg-dark .swatch { border-color: var(--line-dark); }
.swatch .chip { height: 92px; }
.swatch .meta { padding: 12px 14px 14px; background: var(--bg-alt); }
.bg-dark .swatch .meta { background: var(--dark-alt); }
.swatch code { background: none; padding: 0; font-size: 12.5px; display: block; color: var(--ink); }
.swatch .name { font-family: var(--font-cn); font-size: 13px; color: var(--ink-2); margin-top: 3px; display: block; }

/* --------------------------------------------------------------------------
   设备列表
   -------------------------------------------------------------------------- */
/* 用 flex 而不是 grid：一台设备时 grid 的 auto-fill 仍会留出空轨道，卡片贴着
   左边缘、右边空掉一大片，看起来像没做完。flex + justify-content:center 让
   任何数量都居中；卡片限宽 460px，设备多了就自然换行。 */
.device-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 3vw, 44px); }
.device-card {
  flex: 1 1 340px;
  max-width: 460px;
  display: flex; flex-direction: column;
  padding: 40px 36px 38px;
  border-radius: var(--radius);
  background: var(--bg); text-decoration: none;
  border: 1px solid var(--line-soft);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bg-gray .device-card { background: var(--bg); }
.device-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 24px 48px -24px rgba(0,0,0,.28); }
.device-card-shot { display: flex; justify-content: center; padding: 6px 0 30px; }
.device-card-shot .device { width: min(230px, 60%); }
.device-card-body h3 { font-family: var(--font-mono); font-size: 26px; letter-spacing: -0.01em; margin: 0 0 4px; }
.device-card-body .sub { font-size: 14px; color: var(--accent-deep); margin: 0 0 14px; }
.device-card-body .lede { font-family: var(--font-cn); font-size: 15px; line-height: 1.78; color: var(--ink-2); margin: 0; }
.device-status { display: inline-block; margin: 18px 0 0; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   页脚
   -------------------------------------------------------------------------- */
.footer { padding: clamp(36px, 5vw, 56px) 0; font-size: 12.5px; color: var(--ink-3); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.footer p { margin: 0; max-width: 46em; }
.footer-meta { text-align: right; }
.footer-meta .rendered { color: var(--accent-deep); }
/* 备案号。规定要链到工信部备案查询系统，所以做成一眼看得出是链接的样子；
   字号和颜色都压到最低，不跟版权行抢注意力。 */
.footer-icp { display: block; margin-top: 8px; font-size: 12px; line-height: 1.9; }
.footer-icp a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.footer-icp a:hover { color: var(--ink-2); border-bottom-color: var(--ink-3); }
.footer-icp .sep { margin: 0 7px; }
.bg-dark .footer, .bg-dark-alt .footer { --ink-3: var(--on-dark-3); --accent-deep: var(--accent); }

/* --------------------------------------------------------------------------
   落地页
   -------------------------------------------------------------------------- */
.landing { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter) 78px; text-align: center; }
.landing-inner { max-width: 640px; }
.landing-mark { width: 84px; margin: 0 auto 28px; border-radius: 22px; }
.landing h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; margin: 0 0 10px; }
.landing .tagline { font-family: var(--font-cn); color: var(--ink-2); font-size: 17px; margin: 0 0 38px; }
.landing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.landing-card { display: block; padding: 28px 22px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .18s, transform .18s; }
.landing-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.landing-card img { margin: 0 auto 14px; border-radius: 18px; }
.landing-card strong { display: block; font-size: 17px; }
.landing-card span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
/* 根路径就是网站的主页，备案号钉在页面底部，而不是跟在选择卡后面。 */
.landing-icp { position: fixed; left: 0; right: 0; bottom: 24px; margin: 0; font-size: 12px; color: var(--ink-3); }
.landing-icp a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.landing-icp a:hover { color: var(--ink-2); }
.landing-icp .sep { margin: 0 7px; }

/* --------------------------------------------------------------------------
   收尾
   -------------------------------------------------------------------------- */
@media (max-width: 560px) { body { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* 实拍照片曾在这里有专属样式（.shot--photo），那节、那张图和 {{photo:...}}
   占位符一起撤了。上面那套几何实测值当初量自那张照片，数字留着，
   但原图已不在仓库里——以后要复核外壳比例，得重新拍一张。 */