/* 都来码（Dolaima）官网 —— 全站唯一样式表
 *
 * 配色：**石墨灰 + 低饱和青绿**（用户在候选页 `palette.html` 里选的 B 组；用户原话
 * 「网站默认不要蓝色，太扎眼」—— 原来的品牌蓝 `#0051DB` 已整套换掉）。
 * 改主题只改下面这一组变量；三套候选与**现算的对比度数字**在 `website/palette.html`。
 *
 * ⚠ 换色**不是只改 `--accent`**：按钮字色、代码块底色、链接色都是跟着底走的 ——
 *   `.btn.primary` 原来是白字压品牌蓝；青绿底上白字只有约 2.5:1（不及格），
 *   所以必须同时换成深墨绿字（`#04140F`，7.79:1）。同理 `code` 的蓝底蓝字。
 *   这正是本仓"同一规则两处实现、只修了一处"的老坑。
 *
 * 零依赖：不引任何 CDN / 字体文件 —— 一来站要能在国内直连打开，二来少一个外部依赖
 * 就少一种"资源加载不出来"的失败形态。字体用系统栈（中文回落到各平台自有字体）。
 */

:root {
  --bg:        #0F1416;
  --bg-2:      #141A1C;
  --panel:     rgba(255, 255, 255, .045);
  --panel-2:   rgba(255, 255, 255, .075);
  --line:      rgba(255, 255, 255, .10);
  --ink:       #E6EDEA;
  --muted:     #92A09C;
  --accent:    #3FB9A0;
  --accent-2:  #57C7AF;
  --on-accent: #04140F;
  --ok:        #34D399;
  --warn:      #FBBF24;
  --radius:    14px;
  --wrap:      1120px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 顶部一层极淡的品牌蓝光晕，呼应图标 */
  background-image: radial-gradient(1100px 520px at 50% -180px, rgba(63, 185, 160, .22), transparent 70%);
  background-repeat: no-repeat;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ── 顶部导航 ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(15, 20, 22, .82);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 14px; min-height: 62px; flex-wrap: wrap; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 17px; }
.nav .brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav .brand:hover { text-decoration: none; }
.nav nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav nav a {
  color: var(--muted); padding: 7px 11px; border-radius: 9px; font-size: 14.5px;
}
.nav nav a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav nav a.on { color: var(--ink); background: var(--panel-2); }
.lang { color: var(--muted); font-size: 13.5px; border: 1px solid var(--line); padding: 5px 10px; border-radius: 99px; }
.lang:hover { color: var(--ink); text-decoration: none; }

/* ── 通用块 ─────────────────────────────────────────────── */
section { padding: 62px 0; }
section.tight { padding: 40px 0; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 14px; }
h1 { font-size: clamp(28px, 4.6vw, 44px); letter-spacing: -.5px; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 19px; }
p  { margin: 0 0 14px; color: var(--muted); }
.lead { font-size: 17.5px; color: #BCC9C5; max-width: 780px; }
.center { text-align: center; }
/* ⚠ 两种写法都要认：`<div class="center"><p class="lead">`（后代）与 `<p class="center lead">`（同一个元素上）。
 * 只写后代那一半时，首页那几段的 780px 限宽盒子会**贴左**（`text-align: center` 只管字在盒子里居中，
 * 管不到盒子自己在父级里的位置）—— 实测左留白 20px / 右留白 320px，看着就是"小字没居中"。 */
.center .lead, .lead.center { margin-left: auto; margin-right: auto; }

/* ── 按钮 ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 18px; border-radius: 11px; font-weight: 600; font-size: 15px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; transition: .15s;
}
.btn:hover { background: var(--panel-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.small { padding: 8px 13px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── 首页 hero：一屏讲一件事（大标题 + 一句话 + 两个按钮 + 一件产品图）──
 * 字号用 clamp() 跟视口走：窄屏不至于挤成两行，宽屏也不会显得小气。
 * 新增的颜色只从既有 token 派生（rgba 白 / rgba 青绿 / 暖沙），不引入新色值。
 *
 * 底图 = **纯 CSS 渐变**（三团很暗的光晕，青绿为主、右上一点暖沙）叠一层极淡点阵，
 * 零外链、零位图 —— 位图铺底既费流量又发糊，而 data: URI 的 SVG 里那句
 * `xmlns="http://www.w3.org/2000/svg"` 会污染"全站不许出现 http://"这条自查口径。
 * 结构上 .hero 是通栏的（光晕必须通栏），只有 .hero-in 受 .wrap 的 1120px 限制 ——
 * 光晕若跟着 1120px 走，两边会各留一条生硬的黑边。 */
.hero {
  position: relative;
  padding: 88px 0 56px;
  min-height: clamp(520px, 86vh, 900px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;                       /* 光晕比容器大，别让它撑出横向滚动条 */
  background-image:
    radial-gradient(58% 48% at 50% 30%, rgba(63, 185, 160, .20), transparent 72%),
    radial-gradient(40% 44% at 14% 8%, rgba(87, 199, 175, .10), transparent 72%),
    radial-gradient(44% 46% at 88% 18%, rgba(216, 166, 87, .07), transparent 74%);
  background-repeat: no-repeat;
}
/* 极淡点阵：靠 mask 从中心往外淡出，只在标题背后隐约可见，绝不压正文可读性 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 56% at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(62% 56% at 50% 34%, #000 0%, transparent 78%);
}
.hero-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.hero h1 {
  font-size: clamp(38px, 7.4vw, 78px); line-height: 1.04; letter-spacing: -.035em;
  font-weight: 700; margin: 0 0 20px;
}
.hero .sub {
  color: var(--muted); font-size: clamp(16px, 1.9vw, 20px); line-height: 1.65;
  max-width: 640px; margin: 0 0 30px;
}
.hero-meta { color: var(--muted); font-size: 13.5px; margin: 26px 0 0; }
.hero-meta span { color: rgba(255, 255, 255, .22); margin: 0 9px; }

/* ── 彩色大标题：渐变文字 ─────────────────────────────────
 * ⚠ 两条都得写：`-webkit-background-clip: text` 与标准的 `background-clip: text`
 *   （iOS Safari 只认带前缀那条；只写标准那条 → 文字**整段隐形**，本页最容易翻车的一处）。
 * ⚠ 兜底走「正向 @supports」而不是 `@supports not (…)`：不支持时这几行压根不生效，
 *   `color` 保持 --ink —— 最坏情况只是没上色，绝不会看不见字。
 * 四档渐变在 --bg(#0F1416) 上的对比度现算（WCAG 相对亮度公式）：
 *   #3FB9A0 7.65:1 · #57C7AF 9.01:1 · #7FE3CD 12.17:1 · #D8A657 8.40:1。
 * ⚠ 标题正背后就是青绿光晕（把底色抬亮），所以还要算"最深的一档压在最亮的光晕上"这个下界：
 *   光晕满强度 0.20 处（约 #1B3B37）→ #3FB9A0 只剩 **5.02:1**，另三档 5.5–8.0:1 —— 仍然过正文级
 *   4.5:1（大字号本只要 3:1）。若把光晕再调亮到 0.26 以上，第一档就会掉到 4.42:1 **不合格**，
 *   所以"改光晕厚度"和"改渐变起手色"这两件事是绑在一起的，别只动一个。
 *   暖沙 #D8A657 取自 palette.html 的 C 组候选色，只用在标题这一**处**，
 *   正文与按钮仍守单一强调色的纪律。 */
.title-grad { color: var(--ink); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .title-grad {
    background-image: linear-gradient(96deg,
      var(--accent) 0%, var(--accent-2) 30%, #7FE3CD 58%, #D8A657 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;   /* Safari 少了这行会拿 color 去填底 */
  }
}

/* ── 很淡的分区光晕：让"一路往下"不至于全是平底 ─────────────
 * 只在少数几段用（hero 最亮，往下两处极淡），刻意与纯底的分区交替。
 * 直接加在 .wrap 的分区上：渐变在自身半径的 72% 处就完全透明，离视口边缘还很远
 * ⇒ 不会出现"光晕被 1120px 截断"的硬边，所以不必为了通栏再套一层容器。
 * 纯静态渐变、没有位移动画，因此不需要 reduced-motion 开关。 */
.glow-left {
  background-image: radial-gradient(46% 40% at 22% 44%, rgba(63, 185, 160, .09), transparent 72%);
  background-repeat: no-repeat;
}
.glow-right {
  background-image: radial-gradient(50% 44% at 78% 46%, rgba(87, 199, 175, .08), transparent 72%);
  background-repeat: no-repeat;
}

/* ── 图标：手写内联 SVG（<use> 引用本页 <symbol>，零请求、零字体）──
 * 线宽 / 端点 / 描边色统一写在 .i 上，跟着文字颜色走（stroke: currentColor）。 */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn .i { width: 17px; height: 17px; }
.feat-ico { margin: 0 0 16px; color: var(--accent-2); }
.feat-ico .i { width: 30px; height: 30px; stroke-width: 1.5; }

/* 产品图：机身比页面底色深一档，浅色截图才不会糊在背景里 */
.device {
  margin: 46px auto 0; width: min(272px, 72vw);
  padding: 9px 9px 12px; border-radius: 36px;
  background: #0A0D14; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
.device::before {
  content: ""; display: block; width: 44px; height: 5px; margin: 3px auto 8px;
  border-radius: 3px; background: rgba(255, 255, 255, .16);
}
.device img { display: block; width: 100%; height: auto; border-radius: 28px; }

/* 很轻的「向下看」提示：只有那枚小箭头在呼吸 */
.scroll-hint { margin: 34px 0 0; color: var(--muted); font-size: 12.5px; letter-spacing: .18em; }
.scroll-hint i {
  display: block; width: 7px; height: 7px; margin: 10px auto 0;
  border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  animation: hint 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes hint {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* 按钮组：全站通用（不只是 hero 里的）—— 子页面正文里也用 .cta 排按钮 */
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .cta { justify-content: center; }
.center .cta, .cta.center { justify-content: center; }

/* 分区之间的留白（只用在首页；子页面正文的分区间距不受影响） */
.sec { padding: 84px 20px; }

.pill {
  display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 13px;
  background: rgba(63, 185, 160, .16); border: 1px solid rgba(87, 199, 175, .38); color: #9FE0D0;
}

/* ── 卡片 / 网格 ────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card .ico { font-size: 22px; margin-bottom: 8px; }

/* ── 下载 ───────────────────────────────────────────────── */
.dl { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.plat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.plat .top { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.plat .top .os { font-size: 20px; }
.plat .meta { color: var(--muted); font-size: 13.5px; }
.plat .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.dl-note { color: var(--muted); font-size: 14px; margin-top: 14px; }
.ver { font-family: var(--mono); color: var(--ok); }

/* ── 文档型页面（.prose：子页面正文统一走它）─────────────── */
.prose { max-width: 860px; }
.prose h1 { margin-top: 0; }
.prose h2 {
  margin-top: 42px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: #BCC9C5; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose code {
  font-family: var(--mono); font-size: 13.5px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 1.5px 6px; color: var(--accent-2);
}
.prose pre {
  background: #080C0D; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; overflow-x: auto; margin: 0 0 16px;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.65; color: #D5E3DF; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.prose td { color: #BCC9C5; }
.prose blockquote {
  margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 10px 10px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { max-width: 100%; border-radius: 12px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

.note {
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 18px;
}
.note p { color: #E8D9AE; margin: 0; }
.note p + p { margin-top: 8px; }

.toc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin: 0 0 26px; }
.toc p { margin: 0 0 8px; color: var(--ink); font-weight: 600; }
.toc ul { margin: 0; padding-left: 20px; }
.toc li { margin: 4px 0; }

/* ── 页脚 ───────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 34px 0 46px;
  color: var(--muted); font-size: 14px;
}
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 22px; margin-bottom: 22px; }
footer h4 { color: var(--ink); font-size: 14.5px; margin: 0 0 8px; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 5px 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
footer .cp { border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; }

/* ── 首页平台带：同一个游戏，六个平台（一行横滑，一屏一张）───── */
/* ⚠ 缺图的槽位由 assets/js/gorilla.js 在 onerror 里就地 hidden 掉；整条带子一张都没有时
 *   连 section 一起 hidden（默认带 hidden 属性，脚本放出来）—— 所以这里必须让 hidden 真的不占位
 *   （下面的 [hidden] 就是干这个的，别删）。缩略点由 assets/js/site.js 按"当前可见的张数"现算。
 *   为什么不写 <img src>：文件还没落地的槽位会让 scripts/check-website.py 判"链接指向不存在的文件"；
 *   为什么不用 gorilla.json 清单：那会引入一张"必须手工与文件同步的平行表"（本仓第三号重复形态）。 */
[hidden] { display: none !important; }

.reel { margin-top: 34px; }
.reel-track {
  display: flex; gap: 18px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 8px 0 20px;
  scrollbar-width: none; cursor: grab; user-select: none;
  -webkit-overflow-scrolling: touch;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-track.dragging { cursor: grabbing; }
.reel figure {
  flex: 0 0 auto; margin: 0; width: min(420px, 84vw);
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* 固定高度的取景框：六张图的长宽比差很多（手机竖屏 0.45 / 桌面横屏 1.7），
 * 让每张各占各的高度，横滑时带子会一跳一跳 —— 所以高度由框子钉死，图在框里等比缩放。
 * 框子铺一层很淡的面板色：窄的手机图放进 420px 宽的槽位后两侧会有留白，
 * 有底色才像是"排过版"，否则看着像图没对齐。 */
.reel .shot, .games .shot {
  width: 100%; height: 420px; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border-radius: 18px;
}
.reel img, .games img {
  max-height: 372px; max-width: 100%; width: auto; height: auto;
  border-radius: 12px; border: 1px solid var(--line); background: #080C0D;
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .8);
}
.reel figcaption, .games figcaption {
  margin-top: 14px; font-size: 14px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.reel figcaption .i, .games figcaption .i { width: 15px; height: 15px; opacity: .85; }
.reel-dots { display: flex; gap: 9px; justify-content: center; margin-top: 4px; }
.reel-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .22); cursor: pointer; transition: .2s;
}
.reel-dots button:hover { background: rgba(255, 255, 255, .4); }
.reel-dots button.on { background: var(--accent); transform: scale(1.25); }

/* ── 首页截图画廊：一张大图 + 一排缩略图（点哪张看哪张）────────
 * 大图的 src、缩略图的选中态、说明文字都由 assets/js/site.js 切（脚本没跑到时
 * 显示的就是 HTML 里那一张 + 第一段说明，页面照常可读）。 */
.viewer-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.viewer-head p { margin: 0; max-width: 620px; }
.seg {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel); flex: 0 0 auto;
}
.seg button {
  font: inherit; font-size: 13.5px; padding: 6px 15px; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); cursor: pointer; transition: .15s;
}
.seg button.on { background: var(--panel-2); color: var(--ink); }
.stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 380px; padding: 26px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
}
.stage img {
  max-height: 520px; max-width: 100%; width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .85);
}
.viewer-cap { max-width: 660px; margin: 22px auto 0; text-align: center; }
.viewer-cap h3 { margin: 0 0 8px; }
.viewer-cap p { margin: 0; }
.thumbs {
  display: flex; gap: 12px; margin-top: 26px; padding: 4px 2px 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.thumb {
  flex: 0 0 auto; width: 120px; padding: 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: .18s;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  scroll-snap-align: center;
}
.thumb:hover { border-color: rgba(87, 199, 175, .5); color: var(--ink); }
/* 缩略图统一 120×150：手机竖屏与平板 3:4 的图长宽比不同，contain 让两者都完整放进格子 */
.thumb img {
  display: block; width: 100%; height: 150px; object-fit: contain;
  border-radius: 9px; background: #080C0D;
}
.thumb.on { border-color: var(--accent); background: rgba(63, 185, 160, .10); color: var(--ink); }
.thumb span { white-space: nowrap; }

/* ── 首页功能区块：大字号短句 + 一件视觉，左右交替 ───────────── */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 64px); align-items: center; }
.feat-text h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 16px; }
.feat-text p { font-size: 17px; max-width: 30em; margin: 0 0 14px; }
.feat-vis { order: 2; }
.feat.flip .feat-text { order: 1; }
.feat.flip .feat-vis { order: 0; }

/* 终端样机：纯 CSS 画出来的窗口，零外部资源 */
.term {
  background: #080C0D; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .8);
}
.term .bar { display: flex; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--panel); }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.term pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #D5E3DF;
}
.term .ok { color: var(--ok); }
.term .dim { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; background: var(--panel);
}
.flow {
  padding: 30px 24px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
}
.flow .row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.flow .node {
  padding: 12px 18px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel-2);
}
.flow .node.hot { border-color: rgba(87, 199, 175, .45); background: rgba(63, 185, 160, .12); color: #9FE0D0; }
.flow .arrow { color: var(--muted); font-size: 18px; }
.flow p { margin: 18px 0 0; font-size: 14px; }

/* 收尾的 VML 引导带（居中，克制） */
.band { text-align: center; }
.band .lead { margin-left: auto; margin-right: auto; }
.band .cta { justify-content: center; margin-top: 22px; }

/* ── 滚动进入视口：淡入 + 上移（由 assets/js/site.js 驱动）────────
 * ⚠ 「初始隐藏」那半条**只在 JS 给元素加上 .rv-prep 之后才生效** —— 这样脚本没跑到
 *   （被禁用 / 加载失败）时内容照常显示，不会留下一整页看不见的东西。
 *   本文件末尾的 prefers-reduced-motion 块把它整个关掉。 */
.rv-prep, .rv-in {
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.rv-prep { opacity: 0; transform: translateY(24px); }
.rv-in { opacity: 1; transform: none; }

/* ── 配色候选预览（website/palette.html，临时选型页，不进导航）──
 * 三个方案各自在自己的区块里覆盖上面 :root 那组变量；**默认主题不受影响**。
 * 对比度数字全部现算（见页内表格），三组都过 WCAG AA。 */
.pal {
  background: var(--pal-bg); color: var(--pal-ink);
  background-image: var(--pal-glow); background-repeat: no-repeat;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.pal .pal-top { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.pal .pal-top h3 { margin: 0 0 8px; }
.pal .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pal .sw {
  font-family: var(--mono); font-size: 12.5px; color: var(--pal-muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
}
.pal .sw i {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(128, 128, 128, .4);
}
.pal .pal-hero { padding: 32px 20px 6px; text-align: center; }
.pal .pal-hero h1 { color: var(--pal-ink); }
.pal .pal-hero .sub { color: var(--pal-muted); font-size: 17px; margin: 0 0 12px; }
.pal .pal-body { padding: 10px 20px 30px; }
.pal p { color: var(--pal-muted); }
.pal .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.pal .logo { display: block; width: 104px; height: 104px; margin: 0 auto; border-radius: 24px;
             box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.pal .btn { border-color: var(--line); background: rgba(255, 255, 255, .045); color: var(--pal-ink); }
.pal .btn.primary { background: var(--pal-accent); border-color: var(--pal-accent); color: var(--pal-accent-ink); }
.pal .btn.primary:hover { background: var(--pal-accent); filter: brightness(1.08); }
.pal .card { background: rgba(255, 255, 255, .045); border-color: var(--line); }
.pal .card h3 { color: var(--pal-ink); }
.pal .pill { background: var(--pal-pill-bg); border-color: var(--pal-pill-line); color: var(--pal-pill-ink); }
.pal .lead { color: var(--pal-lead); }
.pal a { color: var(--pal-accent-2); }
.pal .cap-line { font-size: 13px; color: var(--pal-muted); }

.pal-a {
  --pal-bg: #121417; --pal-ink: #ECEEF1; --pal-muted: #9AA1A9; --pal-lead: #C2C7CD;
  --pal-accent: #E6E9ED; --pal-accent-ink: #101215; --pal-accent-2: #DDE1E6;
  --pal-pill-bg: rgba(255, 255, 255, .08); --pal-pill-line: rgba(255, 255, 255, .26);
  --pal-pill-ink: #DDE1E6;
  --pal-glow: radial-gradient(900px 380px at 50% -150px, rgba(255, 255, 255, .07), transparent 70%);
}
.pal-b {
  --pal-bg: #0F1416; --pal-ink: #E6EDEA; --pal-muted: #92A09C; --pal-lead: #BCC9C5;
  --pal-accent: #3FB9A0; --pal-accent-ink: #04140F; --pal-accent-2: #57C7AF;
  --pal-pill-bg: rgba(63, 185, 160, .14); --pal-pill-line: rgba(63, 185, 160, .38);
  --pal-pill-ink: #8ED8C7;
  --pal-glow: radial-gradient(900px 380px at 50% -150px, rgba(63, 185, 160, .16), transparent 70%);
}
.pal-c {
  --pal-bg: #141210; --pal-ink: #EFEAE2; --pal-muted: #A69C8E; --pal-lead: #CBC1B3;
  --pal-accent: #D8A657; --pal-accent-ink: #1A1206; --pal-accent-2: #E0B36B;
  --pal-pill-bg: rgba(216, 166, 87, .14); --pal-pill-line: rgba(216, 166, 87, .38);
  --pal-pill-ink: #E0C08A;
  --pal-glow: radial-gradient(900px 380px at 50% -150px, rgba(216, 166, 87, .15), transparent 70%);
}
.pal .note-ink { color: var(--pal-muted); font-size: 13.5px; }

/* ── 窄屏 ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid.g4, .dl { grid-template-columns: repeat(2, 1fr); }
  footer .cols { grid-template-columns: 1fr 1fr; }
  /* 两栏的功能区块在这宽度下每栏只剩三百来像素，终端样机会挤成一团 ⇒ 提前并成一栏 */
  .feat { grid-template-columns: 1fr; gap: 26px; }
  .feat.flip .feat-text { order: 0; }
  .feat.flip .feat-vis { order: 1; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  section { padding: 44px 0; }
  .grid.g2, .grid.g3, .grid.g4, .dl { grid-template-columns: 1fr; }
  .nav nav { margin-left: 0; width: 100%; }
  .nav nav a { padding: 6px 9px; font-size: 14px; }
  .hero { padding: 56px 0 40px; min-height: 0; }
  .sec { padding: 56px 20px; }
  .device { width: min(240px, 74vw); }
  .reel figure { width: 86vw; }
  .reel .shot, .games .shot { height: 300px; padding: 18px; }
  .reel img, .games img { max-height: 264px; }
  .stage { padding: 14px; min-height: 300px; }
  .stage img { max-height: 340px; }
  .thumb { width: 96px; }
  .thumb img { height: 118px; }
  footer .cols { grid-template-columns: 1fr; }
}

/* ── 降低动效偏好：所有"自己会动"的东西都停下 ─────────────────
 * 放在文件最后，覆盖上面所有动画 / 过渡 / 平滑滚动。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint i { animation: none; }
  .rv-prep, .rv-in { transition: none; }
  .rv-prep { opacity: 1; transform: none; }
}

/* 软件墙（3 行 3 列）——**这一节通栏**，其余各节仍按 1120px。
   ⚠ 尺寸摆过六轮，别再从头试：420 → 200 → 150 → 104 → 176 → 360 → **500**
   （用户每次都说方向，记下来省得重来）。通栏宽度 1680px ⇒ 3 列每格约 533px。 */
.wrap.games-wide { width: min(1680px, 100% - 48px); }
.games { margin-top: 34px; }
.games figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.games .shot { height: 500px; padding: 18px; border-radius: 22px; }
.games img { max-height: 462px; }
@media (max-width: 1200px) {
  .games .shot { height: 360px; padding: 14px; }
  .games img { max-height: 332px; }
}
@media (max-width: 900px) {
  .games .shot { height: 260px; padding: 12px; }
  .games img { max-height: 236px; }
}
@media (max-width: 560px) {
  .games .shot { height: 150px; padding: 8px; }
  .games img { max-height: 134px; }
}

/* ── 软件墙的「大图预览」浮层（悬停 / 点开 / 键盘聚焦）──────────────
 * 三条（每条都对应一个具体的坑）：
 *
 * 1) **必须是浮层**：预览图 720px 高，比网格里那张（462px）大得多，按普通流插进去会把 3×3
 *    网格撑开、整节跳一下 ⇒ `position: fixed` + `inset: 0`，完全不参与布局。
 *
 * 2) **两种摆法**，由 JS 加 `.follow` / `.pin` / `.dim` 决定：
 *    - 跟随光标（悬停）：JS 算好 `left/top` 写进行内样式，并把整层设成 `pointer-events: none`
 *      —— 否则浮层会盖住缩略图、把 hover 抢走（预览一出现，鼠标底下就不是那张图了）。
 *    - 居中（点开 / 键盘聚焦）：走 CSS 的 `left/top: 50%` + `translate(-50%,-50%)`；
 *      JS 这时会**清掉行内 left/top**，否则行内样式压过这条规则（居中对不齐）。
 *      「点开」再多一层暗底（`.dim`）并让整层可以收事件 —— "点空白处关掉"就是它。
 *
 * 3) **尺寸照着母版定**：大图正好 720px 高 ⇒ `max-height: min(82vh, 720px)` 在常见窗口下
 *    就是 1:1 显示（既不像素化也不缩糊），窄窗口才往下缩；`max-width` 只管住将来更宽的图。
 */
.shot-zoom {
  position: fixed; inset: 0; z-index: 90;
  opacity: 0; transition: opacity .16s ease;
  pointer-events: none;
}
.shot-zoom.on { opacity: 1; }
.shot-zoom.dim { background: rgba(4, 7, 8, .74); pointer-events: auto; cursor: zoom-out; }
.shot-zoom-box { position: absolute; left: 0; top: 0; }
.shot-zoom.pin .shot-zoom-box { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.shot-zoom img {
  display: block; width: auto; height: auto;
  max-width: min(56vw, 560px); max-height: min(82vh, 720px);
  border-radius: 16px; border: 1px solid var(--line); background: #080C0D;
  box-shadow: 0 40px 90px -22px rgba(0, 0, 0, .9);
}
.shot-zoom.dim img { box-shadow: 0 46px 110px -22px rgba(0, 0, 0, .95); }
@media (prefers-reduced-motion: reduce) {
  .shot-zoom { transition: none; }        /* 淡入也关掉（本节在文件末尾，别把这行挪到上面去） */
}

/* ── 应用图标墙：**例程自带的图标**（每个例程目录下 `.resource` 里的图标 png），不是截图 ─
   ⚠⚠ 注释里**绝不能出现 `*` 紧挨 `/`** —— 路径写成带 `**` 通配的那种样子时，
     那两个字符**会提前闭合这段注释**，整块 `.appwall` 规则当场全废
     （实测症状：墙上只剩一个撑满全宽的巨图）。本仓 E161 记的是同一条坑（C 注释版）。
   一格一个程序，**固定一行 4 个**（用户 2026-10-06 定）—— 44 个例程 = 11 行。
   ⚠ **图标一律 480×480**：它们是从各例程目录下 `.resource` 里那张 480×480 的原图**直接拷**来的。
     **别为了"省体积"把它缩到 128/256** —— 实测缩完**反而更糊**（格子约有 290 CSS px 宽，
     128 的图被放大 2 倍多 ⇒ 用户一眼看出"不太清晰"），而体积省不下多少：
     480 共 331 KB、128 共 248 KB（缩放引入了中间色，PNG 压缩反而更差）。
   ⚠ 早先用的是 `auto-fill`（列数随宽度自己定），桌面宽屏下会排到十几列、
     图标小得像豆子，所以改成写死 4 列。改回 `auto-fill` 前先问用户。 */
.appwall { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.appwall figure { margin: 0; text-align: center; }
.appwall .tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 6px; overflow: hidden;
}
.appwall img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 12px; }
.appwall figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.2; }