:root {
  --bg: #100D0C;
  --bg2: #16110F;
  --card: #1A1513;
  --line: #2E2622;
  --text: #EDE6E1;
  --muted: #A69C94;
  --faint: #6E645D;
  --accent: #B08968;
  --accent-strong: #C79A72;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- 导航 ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,13,12,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: .02em; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .15s; }
.nav-links a:hover { color: var(--text); }

/* ---- 按钮 ---- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 22px; font-size: 15px;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); background: #221B17; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #17110D;
  font-weight: 600; padding: 14px 30px; font-size: 16px; border-radius: 12px;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* 安卓按钮：次级平台，用描边而非实心，视觉上给 Mac 让位 */
.btn-android {
  background: var(--card); border-color: var(--accent); color: var(--accent-strong);
  font-weight: 600; padding: 14px 30px; font-size: 16px; border-radius: 12px;
}
.btn-android:hover { background: #221B17; border-color: var(--accent-strong); color: var(--text); }
/* Windows 按钮：和安卓同为描边次级样式。
   但 Windows 访客才是这个平台的目标用户，所以 app.js 识别到 Windows 时会
   给它加上 .btn-primary 提成实心主按钮 —— 下面那条就是修正这次升级的：
   .btn-windows 定义在 .btn-primary 之后，同特异性下会反过来盖掉实心的
   背景和文字色，必须用两层类选择器提高特异性才能压住。 */
.btn-windows {
  background: var(--card); border-color: var(--accent); color: var(--accent-strong);
  font-weight: 600; padding: 14px 30px; font-size: 16px; border-radius: 12px;
}
.btn-windows:hover { background: #221B17; border-color: var(--accent-strong); color: var(--text); }
a.btn-windows.btn-primary,
a.btn-windows.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #17110D; }
a.btn-windows.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-small { padding: 7px 18px; font-size: 14px; background: var(--accent); border-color: var(--accent); color: #17110D; font-weight: 600; }
.btn-small:hover { background: var(--accent-strong); }
.btn-arch {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  font-size: 12px; font-weight: 500; border-radius: 99px;
  background: rgba(23,17,13,.22); vertical-align: 2px;
}

/* ---- Hero ---- */
.hero { text-align: center; padding: 96px 24px 72px; }
.hero-icon {
  width: 88px; height: 88px; border-radius: 22px; margin-bottom: 34px;
  box-shadow: 0 10px 40px rgba(176,137,104,.18);
}
.hero h1 {
  font-size: clamp(40px, 7vw, 64px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 22px; text-wrap: balance;
}
.hero-sub { color: var(--muted); font-size: 18px; max-width: 700px; margin: 0 auto 38px; text-wrap: balance; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
/* flex-wrap + max-width：宽屏一行不变，窄屏（手机）自动折行，
   避免加了字数之后把页面撑出横向滚动条。 */
.hero-alt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 14px; max-width: 100%; }
.hero-alt a { color: var(--accent); text-decoration: none; }
.hero-alt a:hover { text-decoration: underline; }
.hero-meta { color: var(--faint); }
.hero-note { margin-top: 26px; font-size: 14px; color: var(--faint); }
.hero-note a { color: var(--accent); text-decoration: none; }
.hero-note a:hover { text-decoration: underline; }

/* ---- 公式 ---- */
.formula { text-align: center; padding: 64px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); }
.formula-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(20px, 3.4vw, 30px); font-weight: 500; letter-spacing: .01em;
}
.formula-sub { color: var(--faint); font-size: 14px; margin-top: 12px; }

/* ---- 区块 ---- */
.section { max-width: 1080px; margin: 0 auto; padding: 88px 24px 20px; }
.section-narrow { max-width: 820px; }
.eyebrow { color: var(--accent); font-size: 14px; letter-spacing: .14em; margin-bottom: 10px; }
.section h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 44px; }

/* ---- 卡片 ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .2s, border-color .2s;
}
.card:hover { transform: translateY(-3px); border-color: #4A3B32; }
.card-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--accent); letter-spacing: .12em; margin-bottom: 14px;
}
.card h3 { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 14.5px; }

/* ---- 截图 ---- */
.shot { margin: 56px 0 0; }
.shot img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.shot figcaption { text-align: center; color: var(--faint); font-size: 13px; margin-top: 12px; }

/* ---- 设计思路 ---- */
.stack { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.row h3 { font-size: 18px; font-weight: 600; }
.row p { color: var(--muted); font-size: 15px; }

/* ---- 视图 mini 卡 ---- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; }
.mini {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; display: flex; align-items: center; gap: 14px;
}
.kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #241D18; border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 9px; font-size: 13px; color: var(--accent-strong); white-space: nowrap;
}
.mini p { font-size: 14px; font-weight: 600; line-height: 1.35; }
.mini p span { color: var(--faint); font-weight: 400; font-size: 12.5px; }

/* ---- 更新日志 ---- */
.log { border-top: 1px solid var(--line); }
.log-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.log-ver { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.log-ver span { color: var(--faint); font-weight: 400; font-size: 13px; margin-left: 10px; }
.log-item ul { list-style: none; }
.log-item li { color: var(--muted); font-size: 14.5px; padding: 3px 0 3px 18px; position: relative; }
.log-item li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }

/* ---- 下载 ---- */
/* 原来是写死的 repeat(3, 1fr)：Mac 两卡 + 安卓一卡正好一行。
   加了 Windows 卡后变成四张，改 auto-fit + minmax 让列数自己算，
   不用每加一个平台就回来改一次数字（窄屏靠下面媒体查询兜底）。 */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 18px; margin-bottom: 40px; }
.dl-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  /* 四张卡内容顶部对齐：标题 / 说明 / 按钮 / 体积四行都落在同一条水平线上。
     原先是 center（垂直居中），可安卓卡多一张二维码、Windows 卡多一行文件名，
     行数不一样就把整块内容带偏，四个标题高低不齐。
     顶部对齐后多出来的空白沉到卡片底部，视觉上比标题错开干净。 */
  justify-content: flex-start;
}
/* Windows 卡多一行文件名，紧跟在体积后面，别贴太紧（二维码自带 margin-top） */
.dl-card-windows .dl-size + .dl-size { margin-top: 2px; }
.dl-title { font-size: 18px; font-weight: 600; }
.dl-desc { color: var(--faint); font-size: 13.5px; }
.dl-size { color: var(--faint); font-size: 12.5px; }

/* 下载区标题下的耗时说明：不写具体网速，只给预期时长，
   免得用户以为「点了没反应」或者「是不是卡死了」。 */
.dl-note {
  margin: -18px 0 34px;
  max-width: 660px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--faint);
}

/* 四张卡等高。网格项默认 stretch，但卡片内部是 flex 竖排，
   文字行数不同就会让按钮高低不齐——Windows 的包名最长会折行，
   不锁高度的话它一个人把整行撑歪。 */
.dl-card { min-height: 300px; }
/* 包名最长的那个（Zlin-1.4.0-win-x64-Setup.exe）在 244px 宽的卡里放不下，
   默认会折成两行、把按钮撑高。宁可缩一点字号也不让它折行——
   折行的按钮和旁边两个不一样高，四张卡看着就不齐整。 */
.dl-card .btn {
  max-width: 100%;
  font-size: 14px;
  padding-left: 14px; padding-right: 14px;
  white-space: nowrap;
}
/* 四张卡的按钮必须一样高：Intel 那张用的是次级样式（padding 10px），
   另外三张是主样式（padding 14px），差 8px —— 顶部对齐后这 8px 会让
   Intel 的「体积」那行比别人高一截。这里统一上下内边距，只抹平高度，
   不改配色，主次关系照旧。 */
.dl-card .btn { padding-top: 14px; padding-bottom: 14px; }
/* 二维码：白底衬垫，暗色页面里才扫得出来 */
.dl-qr {
  width: 132px; height: 132px; margin-top: 8px; padding: 8px;
  background: #fff; border-radius: 10px; border: 1px solid var(--line);
}
.dl-qr-hint { color: var(--faint); font-size: 12.5px; }
/* 导航锚点落在卡片上时留出吸顶导航的高度 */
#android, #windows { scroll-margin-top: 84px; }

.first-open {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; margin-bottom: 36px;
  /* 说明块收窄居中：下载卡片可以铺满，正文行长不能太长 */
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.first-open h3 { font-size: 17px; margin-bottom: 10px; }
.first-open p, .first-open li { color: var(--muted); font-size: 14.5px; }
.first-open ol { padding-left: 20px; margin: 10px 0; }
.first-open li { padding: 4px 0; }
.first-open strong { color: var(--text); }
.first-open code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #241D18; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: 13px; color: var(--accent-strong);
}
.copy {
  margin-left: 8px; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--accent); font-size: 12px; padding: 3px 10px; cursor: pointer; transition: border-color .15s;
}
.copy:hover { border-color: var(--accent); }
.first-open-note { color: var(--faint) !important; font-size: 13px !important; margin-top: 8px; }
.verify { color: var(--faint); font-size: 14px; text-align: center; padding: 8px 0 40px; }

/* ---- 页脚 ---- */
.footer { border-top: 1px solid var(--line); text-align: center; padding: 52px 24px; margin-top: 40px; }
.footer p { font-size: 15px; font-weight: 600; }
.footer-sub { color: var(--faint); font-weight: 400; font-size: 13px; margin-top: 6px !important; }

/* ---- 动效 ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .d-br { display: none; }
  .dl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .dl-grid { grid-template-columns: 1fr; }
  .hero-btns { flex-direction: column; }
}
@media (max-width: 560px) {
  .nav-links { display: none; }
  .hero { padding: 64px 20px 48px; }
  .grid-4 { grid-template-columns: 1fr; }
}