/* Litematica Viewer 主页
 *
 * 全部按《Litematica Viewer 设计系统》来：
 *   颜色   BlueAr 五色为主（MC / PC / BG / TT / PR），发布封面的 promo-* 只用在 Banner 和下载带
 *   形状   扁平矢量：纯色块、零阴影、零渐变，圆角 10px + 连续曲线（squircle），只有页签是直角
 *   动效   进场 ease-bounce，离场/收起/变色 ease-settle；120ms 网格三拍；列表每项晚 40ms，最多错 6 个；
 *          按下 0.94、悬停 1.03；不循环、不在空闲时动；prefers-reduced-motion 下全部直接出现
 */

:root {
  /* BlueAr 主题五色 */
  --mc: #3399ff;   /* MainColor  面板底 */
  --pc: #0066cc;   /* PreColor   强调 */
  --bg: #f8f9fa;   /* Background 底色 / 卡片 */
  --tt: #343a40;   /* Text       文字 */
  --pr: #babcc2;   /* Important  次要 */

  /* 发布封面专用色 */
  --sky-light: #82ceff;
  --peach: #ffb46b;
  --coral: #fd6f60;
  --orange: #fb8552;
  --band: #1f2021;
  --github: #24292f;
  --bilibili: #ff6699;

  --r: 10px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;

  --beat-1: 120ms;
  --beat-2: 240ms;
  --beat-3: 360ms;
  --stagger: 40ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

  --sans: Arial, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: Consolas, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 var(--sans);
  color: var(--tt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code, .mono { font-family: var(--mono); }
.pixel { image-rendering: pixelated; }

/* 圆角统一走连续曲线；不支持的浏览器就是普通圆角 */
.btn, .drop-card, .dropzone, .panel, .shot,
.lang-card, .question-card, .table-demo, .drop-files li {
  border-radius: var(--r);
  corner-shape: squircle;
}
@supports (corner-shape: squircle) {
  :root { --r: 16px; }   /* squircle 同样半径看着更方，放大一点视觉上才等于 10px 圆角 */
}

/* ------------------------------------------------------------------ 按钮 */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px var(--s5);
  font: 15px/1.4 var(--sans);
  border: 0; cursor: pointer;
  background: var(--bg); color: var(--tt);
  transition: transform var(--beat-2) var(--ease-bounce),
              background-color var(--beat-1) var(--ease-settle),
              color var(--beat-1) var(--ease-settle);
}
.btn:hover { transform: scale(1.03); background: var(--mc); color: var(--bg); }
.btn:active { transform: scale(0.94); transition-duration: var(--beat-1); }
.btn-accent { background: var(--pc); color: var(--bg); }
.btn-github { background: var(--github); color: var(--bg); }
.btn-bilibili { background: var(--bilibili); color: var(--bg); }
.btn-github:hover, .btn-bilibili:hover { background: var(--mc); }
.btn-ink { background: var(--tt); color: var(--bg); }
.btn-plain { background: var(--bg); color: var(--tt); }
.btn-lg { padding: 12px 28px; font-size: 17px; font-weight: 700; }

/* ------------------------------------------------------------------ 顶栏 */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) var(--s5);
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 18px; }
.brand small { font-weight: 400; color: var(--pc); font-size: 14px; }
.topbar nav { display: flex; align-items: center; gap: var(--s2); }
.nav-link {
  padding: 6px var(--s3); color: var(--tt);
  transition: color var(--beat-1) var(--ease-settle);
}
.nav-link:hover { color: var(--pc); }
.lang-switch { min-width: 64px; font-weight: 700; color: var(--pc); }

/* ------------------------------------------------------------------ Banner */

.hero {
  position: relative;
  min-height: clamp(560px, 86vh, 860px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--mc);
  isolation: isolate;
}

/* 背景整体虚化：截图放大铺满，浅天蓝三角照 COVER2 从左上切到右下 */
.hero-bg {
  position: absolute; inset: -40px; z-index: 0;   /* 往外多铺一圈，模糊后边缘不露底 */
  filter: blur(5px);
}
.hero-shot {
  position: absolute; left: 50%; top: 50%;
  width: max(125%, 1500px); height: auto;
  transform: translate(-42%, -50%) scale(1.12);
  opacity: 0.85;
}
.hero-sky {
  position: absolute; inset: 0;
  background: var(--sky-light);
  clip-path: polygon(0 30%, 100% 88%, 100% 100%, 0 100%);
  opacity: 0.92;
}
/* 再压一层半透明底色：背景只留氛围，前景字一眼能读 */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* 同一个底色只改透明度，左边浓、右边淡：标题那半边安静下来，图标那半边还看得到截图 */
  /* 第一层：底部往下渐变到页面底色，浅蓝三角和下面的内容不再一刀切 */
  background:
    linear-gradient(to bottom, transparent 62%, var(--bg) 100%),
    linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 58%, transparent) 0%,
    color-mix(in srgb, var(--bg) 38%, transparent) 45%,
    color-mix(in srgb, var(--bg) 8%, transparent) 80%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 64px clamp(20px, 5vw, 72px);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* ---- 蔚蓝档案式标题 */

.ba-logo {
  margin: 0;
  /* 只设这一个字号，下面光环、十字、英文全按 em 跟着走 */
  font-size: clamp(56px, 8.4vw, 132px);
  line-height: 1;
}
.ba-line {
  display: block;
  white-space: nowrap;
  transform: skewX(-12deg);              /* BA 字标那种往右倾的斜体 */
  transform-origin: left bottom;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.14em var(--bg); /* 白描边，压在虚化背景上也清楚 */
}
.ba-zh {
  font-family: "Glow Sans SC", "GlowSansSC-Normal-Heavy", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.ba-en {
  margin-top: 0.34em;
  padding-left: 0.12em;
  font: 900 0.36em/1.1 "RoGSanSrfStd-Bd", "Arial Black", "Segoe UI Black", Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-text-stroke-width: 0.16em;
}
/* 英文页：中文行和小英文行都不要，换成英文大标题（同样的斜体白描边，光环 / 十字挂在两词交界） */
/* 规格照抄中文页的英文副标题（字体 / 字距 / 描边 / 词距全一样），只是整体放大 */
.ba-en-main {
  display: none;
  padding-left: 0.12em;
  font: 900 0.8em/1.05 "RoGSanSrfStd-Bd", "Arial Black", "Segoe UI Black", Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-text-stroke-width: 0.16em;
}
/* 两行：第一行 Litematica，第二行 Viewer（往右错开一点，像 BA 字标那样的错落） */
.ba-en-main .ba-blue, .ba-en-main .ba-ink { display: block; }
.ba-en-main .ba-ink { position: relative; width: max-content; margin-left: 0.9em; }
/* 两行时光环和十字挪到 Viewer 左边空出来的那块，不再往上压到 Litematica */
.ba-en-main .ba-halo { left: -0.95em; top: -0.12em; width: 2.2em; height: 0.95em; }
.ba-en-main .ba-cross { left: -0.8em; top: -0.3em; width: 1.05em; height: 1.05em; }
html[data-lang="en"] .ba-zh, html[data-lang="en"] .ba-en { display: none; }
html[data-lang="en"] .ba-en-main { display: block; }
.ba-blue { color: var(--mc); }
.ba-ink  { color: var(--tt); }
.ba-en .ba-ink { margin-left: 0.22em; }
.ba-zh .ba-ink { position: relative; }
.ch { display: inline-block; }

/* 光环：挂在「查」字上方，往左探出一点压到「影」上；在文字后面，像套在字上 */
.ba-halo {
  position: absolute; z-index: -1;
  left: -0.5em; top: -0.44em;
  width: 2.6em; height: 1.2em;
  overflow: visible;
  fill: none;
}
.ba-halo ellipse { stroke: var(--tt); stroke-width: 11; }
/* 十字线：竖线落在「影」「查」之间的缝里，横线在字顶上方，所以不会划掉字。外面包白边 */
.ba-cross {
  position: absolute; z-index: 1;
  left: -0.62em; top: -0.74em;
  width: 1.3em; height: 1.3em;
  overflow: visible;
  pointer-events: none;
}
.ba-cross line { stroke: var(--mc); stroke-width: 7; stroke-linecap: round; }
.ba-cross line.under { stroke: var(--bg); stroke-width: 15; }

/* 封面上那条深蓝横线，全页只出现这一次 */
.hero-rule {
  display: block;
  width: min(4.2em, 60%); height: 8px; margin-top: 28px;
  font-size: clamp(56px, 8.4vw, 132px);   /* 和标题同字号，宽度跟着标题缩放 */
  background: var(--pc);
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left center;
}
.is-ready .hero-rule { transform: none; transition: transform 600ms var(--ease-settle) 840ms; }

/* ---- 下载 */

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  margin-top: 28px;
}
.hero-download { gap: var(--s2); font-size: 19px; padding: 14px 32px; }
.hero-download .arrow { font-size: 0.7em; }
.hero-meta { color: var(--tt); font-size: 14px; font-weight: 700; }

/* ---- 右边：图标（矢量重绘，开场按零件画出来） */

.hero-art { display: grid; place-items: center; }
.hero-icon {
  width: clamp(200px, 28vw, 400px); height: auto; aspect-ratio: 1;
  overflow: visible;
  transform-origin: 50% 50%;
}

/* ---- 进场：背景推进来，标题逐字弹入，光环和十字随后，特色逐条滑入，最后是按钮 */

.hero-shot { transition: transform 1400ms var(--ease-settle); }
.hero-sky  { transform: translate(-30%, 30%); }
.ch        { opacity: 0; transform: translateY(55%) scale(0.5); }
.ba-en, .ba-en-main, .hero-actions { opacity: 0; transform: translateY(20px); }
.ba-halo   { opacity: 0; transform: scale(0.4) rotate(-30deg); }
.ba-cross  { opacity: 0; transform: scale(1.6); }

.is-ready .hero-shot { transform: translate(-42%, -50%) scale(1); }
.is-ready .hero-sky  { transform: none; transition: transform 700ms var(--ease-bounce); }
.is-ready .ch {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
  transition-delay: calc(240ms + var(--i) * var(--stagger) * 2);
}
.is-ready .ba-halo {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform 600ms var(--ease-bounce);
  transition-delay: 600ms;
}
.is-ready .ba-cross {
  opacity: 1; transform: none;
  transition: opacity var(--beat-1) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
  transition-delay: 840ms;
}
.is-ready .ba-en, .is-ready .ba-en-main {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
  transition-delay: 720ms;
}
.is-ready .hero-actions {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
  transition-delay: 960ms;
}

/* ------------------------------------------------------------------ 通用段落 */

/* 页面主体只用底色、白卡和一条发丝线分层；蓝色留给按钮、选中项、关键数字和材料表这一个重点 */
:root { --card: #ffffff; --line: rgba(52, 58, 64, 0.08); --muted: #6c727a; --chip: #eceff3; }

.section { scroll-margin-top: 56px; max-width: 1180px; margin: 0 auto; padding: 96px clamp(20px, 4vw, 40px) 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
.section-head p { margin: var(--s3) 0 0; font-size: 17px; color: var(--muted); }

/* 滚动进场：整块弹进来，块里的 [data-stagger] 再一个个落下 */
[data-reveal] { opacity: 0; transform: translateY(32px); }
[data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--beat-3) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
}
[data-stagger] { opacity: 0; transform: translateY(20px) scale(0.96); }
[data-reveal].in [data-stagger] {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
  transition-delay: calc(var(--beat-1) + var(--i, 0) * var(--stagger));
}

/* ------------------------------------------------------------------ 标志细节：背包格子单位 */

/* 「5盒20组2个」拆成三个小格子，数字等宽。只出现在和材料数量有关的地方 */
.slots { display: inline-flex; gap: var(--s1); vertical-align: middle; }
.slot {
  display: inline-flex; align-items: baseline; gap: 2px;
  height: 24px; padding: 0 var(--s2);
  align-items: center;
  background: var(--chip); color: var(--tt);
  border-radius: 4px;
  font: 500 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.slot small { font: 400 12px/1 var(--sans); color: var(--muted); }
.mtable .slot { background: rgba(248, 249, 250, 0.16); color: var(--bg); height: 22px; }
.mtable .slot small { color: rgba(248, 249, 250, 0.72); }

/* ------------------------------------------------------------------ 拖拽入口 */

.drop-card { background: var(--mc); padding: var(--s3); }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: 56px var(--s5);
  background: var(--bg);
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: transform var(--beat-3) var(--ease-bounce),
              background-color var(--beat-1) var(--ease-settle),
              color var(--beat-1) var(--ease-settle);
}
.dropzone:hover, .dropzone:focus-visible { transform: scale(1.01); }
.dropzone:focus-visible { box-shadow: 0 0 0 3px var(--pc); }
.dropzone:active { transform: scale(0.98); }
.drop-arrow {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--pc); color: var(--bg);
  font-size: 28px;
  border-radius: var(--r); corner-shape: squircle;
  transition: transform var(--beat-3) var(--ease-bounce), background-color var(--beat-1) var(--ease-settle);
}
.drop-title { font-size: 24px; font-weight: 700; }
.drop-sub { color: var(--tt); }
.drop-sub code { color: var(--pc); font-weight: 700; }
.drop-btn { margin-top: var(--s2); pointer-events: none; }
.dropzone:hover .drop-btn { background: var(--mc); }

/* 拖着文件悬在上面：整块换成强调色，箭头往下一沉 */
.dropzone.is-over { background: var(--pc); color: var(--bg); transform: scale(1.03); }
.dropzone.is-over .drop-sub, .dropzone.is-over .drop-sub code { color: var(--bg); }
.dropzone.is-over .drop-arrow { background: var(--bg); color: var(--pc); transform: translateY(10px) scale(1.12); }

.drop-files { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.drop-files:not(:empty) { padding-top: var(--s3); }
.drop-files li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s3);
  background: var(--pc); color: var(--bg);
  animation: pop var(--beat-3) var(--ease-bounce) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
.drop-files li small { opacity: 0.8; }
.drop-files li.is-bad { background: var(--tt); }
.drop-note { margin: var(--s3) var(--s1) 0; color: var(--bg); font-size: 14px; }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }

/* 关掉状态（data-disable="true"）：缩成一条灰色横条，不响应、不动、写「未开放」 */
.drop-closed { display: none; }
.drop-card.is-disabled { background: var(--chip); padding: 0; }
.drop-card.is-disabled, .drop-card.is-disabled * { transition: none !important; animation: none !important; }
.is-disabled .dropzone {
  flex-direction: row; justify-content: flex-start; gap: var(--s4);
  padding: var(--s5) 24px;
  background: transparent; color: var(--muted);
  text-align: left; cursor: not-allowed; transform: none !important;
}
.is-disabled .drop-arrow { width: 40px; height: 40px; font-size: 18px; background: var(--pr); color: var(--bg); transform: none !important; }
.is-disabled .drop-title { font-size: 18px; }
.is-disabled .drop-sub, .is-disabled .drop-sub code { color: var(--muted); font-weight: 400; }
.is-disabled .drop-btn { display: none; }
.is-disabled .drop-closed {
  display: inline-block; margin-left: auto;
  padding: 6px var(--s4);
  background: var(--pr); color: var(--bg);
  font-weight: 700; font-size: 14px;
  border-radius: 8px;
}
.is-disabled .drop-note { margin: 0; padding: 0 24px var(--s4) 80px; color: var(--muted); }

/* ------------------------------------------------------------------ 重点：悬念 + 材料表 */

.reveal-split {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center;
  margin-bottom: 96px;
}
.suspense-q { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.suspense-a { margin: var(--s2) 0 0; font-size: clamp(22px, 2.6vw, 30px); }
.suspense-a b {
  display: inline-block;
  font: 700 clamp(56px, 8vw, 104px)/1 var(--mono);
  color: var(--pc);
  font-variant-numeric: tabular-nums;
}
.suspense-sub { margin: var(--s4) 0 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* 答案晚一拍出来 */
.suspense-a, .suspense-sub { opacity: 0; transform: translateY(16px); }
.in .suspense-a, .in .suspense-sub {
  opacity: 1; transform: none;
  transition: opacity var(--beat-2) var(--ease-settle), transform var(--beat-3) var(--ease-bounce);
}
.in .suspense-a { transition-delay: 720ms; }
.in .suspense-sub { transition-delay: 1680ms; }

/* 全页唯一一块大面积的蓝：照桌面版的材料表画 */
.table-demo { background: var(--mc); padding: var(--s3); overflow: hidden; }
/* 页签是全站唯一的直角：连成一条 */
.tabstrip { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.tab {
  padding: var(--s2) var(--s5);
  font: 700 17px/1.3 var(--sans);
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--bg); color: var(--tt);
  transition: background-color var(--beat-1) var(--ease-settle), color var(--beat-1) var(--ease-settle),
              transform var(--beat-2) var(--ease-bounce);
}
.tab:hover { background: var(--chip); }
.tab:active { transform: scale(0.94); }
.tab:focus-visible { outline: 3px solid var(--tt); outline-offset: -3px; }
.tab.is-active { background: var(--pc); color: var(--bg); }
.tab-count { margin-left: var(--s3); color: var(--tt); font-size: 15px; font-variant-numeric: tabular-nums; }

.mtable { background: var(--pc); border-radius: 6px; overflow: hidden; }
.mrow {
  display: grid; grid-template-columns: 36px 1.3fr 0.5fr 1.2fr;
  gap: var(--s3); align-items: center;
  height: 40px; padding: 0 var(--s3);
  color: var(--bg); font-size: 16px;
}
.mrow img { width: 20px; height: 20px; image-rendering: pixelated; justify-self: center; }
.mrow .num { text-align: right; font-variant-numeric: tabular-nums; }
.mhead { height: 36px; background: var(--bg); color: var(--pc); font-weight: 700; }
#mrows { min-height: calc(40px * 6); }
#mrows .mrow { animation: land var(--beat-3) var(--ease-bounce) both; animation-delay: calc(var(--i) * var(--stagger)); }
#mrows .mrow.no-anim { animation: none; }   /* 切语言只换字，不重播落下 */
@keyframes land { from { opacity: 0; transform: translateY(-14px); } }

/* ------------------------------------------------------------------ 能做什么 + 支持的文件 */

/* 宽窄两张白卡，不再是一排等宽的蓝卡 */
.capabilities {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s4);
  margin-bottom: var(--s4);
}
.panel { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: 24px; }
.panel-title { margin: 0 0 var(--s4); font-size: 20px; }
.panel-note { margin: var(--s4) 0 0; color: var(--muted); font-size: 14px; }

.feature-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  margin: 0; padding: 0; list-style: none;
}
.feature-list li {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4) 0;
  box-shadow: inset 0 1px 0 var(--line);
}
.feature-list img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.feature-list b { display: block; font-size: 16px; }
.feature-list p { margin: var(--s1) 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.format-list { margin: 0; padding: 0; list-style: none; }
.format-list li {
  display: grid; gap: var(--s1);
  padding: var(--s3) 0;
  box-shadow: inset 0 1px 0 var(--line);
}
.format-list code { font-size: 16px; font-weight: 700; color: var(--pc); }
.format-list span { color: var(--muted); font-size: 14px; }
.format-list .is-export code { color: var(--tt); }

/* ------------------------------------------------------------------ 界面一览 */

.shot { margin: 0 0 var(--s4); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: var(--s3); }
.shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
.shot figcaption { margin: var(--s3) var(--s1) var(--s1); color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ 三语言 + 提问 */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.lang-card, .question-card { padding: 24px; }
.lang-card { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.lang-card p { color: var(--muted); }
.question-card { background: var(--peach); }
.duo h3 { margin: 0 0 var(--s2); font-size: 20px; }
.duo p { margin: 0 0 var(--s3); }

/* ------------------------------------------------------------------ 下载带 */

.download {
  margin-top: 88px;
  background: var(--band); color: #fff;
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);   /* 封面底带上沿是斜的 */
}
.download-inner { max-width: 1180px; margin: 0 auto; padding: 96px clamp(20px, 4vw, 40px) 64px; }
.download-title { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.1; }
.download-sub { margin: var(--s2) 0 var(--s5); color: var(--pr); }
.download-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  padding: var(--s4) clamp(20px, 4vw, 40px);
  background: var(--band); color: var(--pr); font-size: 13px;
}

/* ------------------------------------------------------------------ 窄屏 */

@media (max-width: 900px) {
  .topbar small, .nav-link { display: none; }
  /* 窄屏上下叠：标题和按钮在上，图标在下 */
  .hero-inner { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 48px; }
  .ba-logo { font-size: clamp(44px, 15vw, 96px); }
  .hero-icon { width: clamp(180px, 56vw, 300px); }
  .brand span { font-size: 15px; }
  .reveal-split, .capabilities, .duo { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .is-disabled .dropzone { flex-wrap: wrap; }
  .is-disabled .drop-note { padding-left: 24px; }
}
@media (max-width: 520px) {
  /* 手机上顶栏放不下五样东西：B 站入口让位，底部「去 Bilibili 留言」还在 */
  .btn-bilibili { display: none; }
  .topbar { padding: var(--s2) var(--s4); }
  .topbar nav { gap: var(--s1); }
  .mrow { grid-template-columns: 28px 1.2fr 0.6fr 1fr; font-size: 14px; gap: var(--s2); }
}

/* ------------------------------------------------------------------ 减少动态效果 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-sky, .ch, .ba-en, .ba-en-main, .ba-halo, .ba-cross, .hero-actions, .hero-rule,
  [data-reveal], [data-stagger], .suspense-a, .suspense-sub { opacity: 1 !important; transform: none !important; }
  .hero-shot { transform: translate(-42%, -50%) !important; }
}