:root{
    --bg:#0E0F11; --panel:#17181B; --hover:#1F2125; --hair:#2A2C31; --hairb:#3A3D44;
    --txt:#E8EAED; --sub:#9BA0A8; --muted:#63666D; --acc:#C9CED6; --acch:#E2E5EA;
    --mono:ui-monospace,"SF Mono",Consolas,"Cascadia Mono",monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--txt);
    font:15px/1.75 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
  a{color:var(--acc);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  .top{position:sticky;top:0;background:rgba(14,15,17,.92);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--hair);z-index:9}
  .top .wrap{display:flex;align-items:center;gap:26px;height:58px}
  .brand{font-family:var(--mono);letter-spacing:6px;font-weight:700;font-size:15px}
  .brand small{color:var(--muted);letter-spacing:3px;font-weight:400;font-size:11px;margin-left:8px}
  .nav{display:flex;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:1px}
  .nav a{color:var(--sub)} .nav a:hover{color:var(--acch)}
  .sp{flex:1}
  .pill{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--acc);
    border:1px solid var(--hairb);padding:3px 12px;white-space:nowrap}
  /* 中英切换按钮（2026-09-26）：沿用 .pill 的单色边框语言，不引入新观感。
     nowrap 是必需的：英文状态下「0.3.8 · PUBLIC BETA」比中文长，1280px 下会把
     「0.3.8 ·」与「PUBLIC BETA」折成两行、把按钮折成「中/文」。 */
  .lang{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--acc);
    background:transparent;border:1px solid var(--hairb);padding:3px 12px;cursor:pointer;
    white-space:nowrap;
    transition:border-color .15s,color .15s}
  .lang:hover{border-color:var(--acc);color:var(--acch)}
  .lang:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
  /* hero */
  .hero{padding:74px 0 40px;border-bottom:1px solid var(--hair)}
  .hero h1{font-size:42px;line-height:1.25;margin:0 0 18px;letter-spacing:1px}
  .hero h1 .em{color:var(--acc)}
  .hero p.lead{color:var(--sub);font-size:17px;max-width:640px;margin:0 0 30px}
  .kws{font-family:var(--mono);color:var(--acc);letter-spacing:2px;font-size:12px;margin-bottom:34px}
  .cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn{font-family:var(--mono);letter-spacing:2px;font-size:13px;padding:13px 26px;
    background:var(--acc);color:var(--bg);font-weight:700;border:1px solid var(--acc)}
  .btn:hover{background:var(--acch);text-decoration:none}
  .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--hairb)}
  .btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
  /* sections */
  section{padding:56px 0;border-bottom:1px solid var(--hair)}
  .sect{font-family:var(--mono);color:var(--acc);letter-spacing:4px;font-size:12px;
    font-weight:700;margin:0 0 22px}
  .sect .n{color:var(--muted);margin-right:10px}
  h2{font-size:24px;margin:0 0 26px;font-weight:600}
  /* cards grid */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  .card{background:var(--panel);border:1px solid var(--hair);padding:20px 22px;min-width:0}
  /* 长校验值（64 位十六进制）在窄屏必须能断行：网格项默认 min-width:auto，
     不能收缩到内容以下，于是整串 sha256 会把列撑到 540px，375px 视口横向溢出到 558px。
     2026-09-26 实测发现（download.html 移动端），修：卡片允许收缩 + 长串可断。 */
  .card code,.note{overflow-wrap:anywhere}
  .card .t{font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--acch);margin-bottom:8px}
  .card .d{color:var(--sub);font-size:13px}
  /* 教师入口（首页底部低调条，2026-09-26）：Elon 要求「下面、好找、不喧宾夺主」。
     刻意不用 .sect（那会带编号，与 01–05 主叙事并列）也不做卡片，
     只一条细分隔线 + 一行字 + 一个链接。 */
  .edu-strip{border-top:1px solid var(--hair);margin-top:34px}
  .edu-strip .wrap{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
    padding-top:16px;padding-bottom:16px}
  .edu-strip .k{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--muted);
    border:1px solid var(--hairb);padding:2px 9px;white-space:nowrap}
  .edu-strip .d{color:var(--sub);font-size:13px;flex:1 1 320px;min-width:0}
  .edu-strip a{font-family:var(--mono);font-size:12px;letter-spacing:1px;white-space:nowrap}
  /* 留资卡（批GROW-1）：跨整行，不挤占 .dl 的两列布局 */
  .dl .leadcard{grid-column:1 / -1}
  #leadForm{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
  #leadForm input,#leadForm select{font-family:var(--mono);font-size:13px;padding:11px 13px;
    background:var(--bg);border:1px solid var(--hairb);color:var(--txt)}
  #leadForm input{flex:1 1 240px;min-width:0}
  #leadForm select{flex:1 1 auto;max-width:230px}
  #leadForm input:focus,#leadForm select:focus{outline:1px solid var(--acc)}
  #leadForm button{font-family:var(--mono);letter-spacing:2px;font-size:13px;padding:11px 22px;
    background:var(--acc);color:var(--bg);border:0;cursor:pointer}
  #leadForm button:hover{background:var(--acch)}
  #leadForm button[disabled]{opacity:.5;cursor:default}
  .leadmsg{font-family:var(--mono);font-size:12px;letter-spacing:1px;margin-top:9px;min-height:16px}
  .leadmsg.good{color:var(--acc)}
  .leadmsg.bad{color:#D98C6A}
  /* steps */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
    font-family:var(--mono);font-size:12px}
  .step{border:1px solid var(--hair);padding:14px;color:var(--sub);background:var(--panel)}
  .step b{display:block;color:var(--acc);letter-spacing:1px;margin-bottom:4px}
  /* gallery */
  .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
  figure{margin:0;background:var(--panel);border:1px solid var(--hair)}
  figure img{width:100%;height:auto;display:block;border-bottom:1px solid var(--hair)}
  figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);padding:9px 12px;letter-spacing:1px}
  /* privacy */
  .kb{background:#101114;border:1px solid var(--hair);padding:16px 18px;font-family:var(--mono);
    font-size:12px;color:var(--sub);overflow:auto;line-height:1.7}
  .ok{color:var(--acc)}
  /* download */
  .dl{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}

  /* ================= 英文版字距（2026-09-26） =================
     中文靠 letter-spacing 撑开才透气，但同一套字距用在英文上会显得松散、
     且等宽字体下长单词被拉得很开。i18n.js 切换语言时会写 <html lang>，
     这里据此按语言分别给字距，不改动任何中文侧观感。 */
  html[lang="en"] .brand{letter-spacing:3px}
  html[lang="en"] .brand small{letter-spacing:1.5px}
  html[lang="en"] .nav{letter-spacing:.2px}
  html[lang="en"] .kws{letter-spacing:1px}
  html[lang="en"] .sect{letter-spacing:2px}
  html[lang="en"] .btn{letter-spacing:1px}
  html[lang="en"] .card .t{letter-spacing:1px}
  html[lang="en"] .step{letter-spacing:.2px}
  html[lang="en"] figcaption{letter-spacing:.3px}
  html[lang="en"] footer{letter-spacing:.3px}
  html[lang="en"] .pill,html[lang="en"] .lang{letter-spacing:.4px}
  html[lang="en"] .crumb{letter-spacing:.6px}
  /* 补漏（2026-09-26，MJC 审查指出覆盖不全）：以下元素原先在英文下仍沿用中文的大字距。
     用脚本比对「所有带 letter-spacing 的选择器」与「已有的 html[lang=en] 覆盖」找出的缺口。 */
  html[lang="en"] .hero h1{letter-spacing:.2px}
  html[lang="en"] .page h1{letter-spacing:.2px}
  html[lang="en"] .step b{letter-spacing:.3px}
  html[lang="en"] .faq .q{letter-spacing:.3px}
  html[lang="en"] table.tbl th{letter-spacing:.3px}
  html[lang="en"] .log .v{letter-spacing:1px}
  /* 英文词更长，窄栏里行数暴涨；给卡片文字略增行距、略收字距更耐读 */
  html[lang="en"] .card .d,html[lang="en"] .step,html[lang="en"] ul.tight li{line-height:1.62}

  /* ================= 移动端骨架（2026-09-26） =================
     原先只有一个断点且只管了 .dl 与标题，导致 375px 下：
     顶栏一行塞不下（品牌折行、8 个导航链接被逐字折断、EN 与版本标签被挤出屏幕）。
     下面把顶栏改成「品牌 + 语言/版本」一行、导航独立成一行可横向滑动，
     并把所有多列布局在窄屏收成单列/两列。桌面端不受影响（全部在 @media 内）。 */
  @media (max-width:820px){
    .wrap{padding:0 18px}
    /* 顶栏：允许换行，导航独占一行横向滚动 */
    .top .wrap{flex-wrap:wrap;height:auto;gap:10px;padding:10px 0;row-gap:8px}
    .brand{font-size:13px;letter-spacing:4px}
    /* 手机上隐藏品牌副标题：英文「LOCAL MODELING STUDIO」比中文长得多，
       会把顶栏撑成三行并把版本标签挤到第三行。KVAXIR 字标本身已足够识别。 */
    .brand small{display:none}
    .sp{display:none}                      /* 换行后由 flex 自然分配，占位符不再需要 */
    .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:16px;
      padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
      /* 右侧渐隐：提示「还有更多，可横向滑动」。滚到最右时该提示自然消失
         （mask 跟随滚动容器内容，不影响最后一个链接的可点区域）。 */
      -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
      mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
    .nav::-webkit-scrollbar{display:none}
    .nav a{white-space:nowrap}             /* 关键：防止中文被逐字折断 */
    .pill,.lang{white-space:nowrap}
    /* 布局收列 */
    .grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .shots{grid-template-columns:1fr}
    .dl{grid-template-columns:1fr}
    /* 版式收放 */
    .hero{padding:44px 0 28px}
    .hero h1{font-size:28px;letter-spacing:.5px}
    .hero p.lead{font-size:15px;line-height:1.7}
    .kws{font-size:11px;letter-spacing:1px;line-height:2}
    section{padding:38px 0}
    h2{font-size:20px}
    .sect{letter-spacing:3px}
    .page h1{font-size:24px}
    .page p.lead{font-size:15px}
    .btn{padding:12px 20px}
    .cta{gap:10px}
  }
  @media (max-width:420px){
    .steps{grid-template-columns:1fr}      /* 超窄屏六步也收单列，避免英文挤成窄条 */
    .hero h1{font-size:24px}
    .nav{gap:14px;font-size:11px}
  }
  /* 原 760px 断点（只管 .dl 与 h1 字号）已被上方 820px 移动端骨架完整涵盖，
     且因其位置在后会反向覆盖新字号，故移除。 */
  .note{color:var(--muted);font-size:12px}
  /* 页脚上边线：与正文分隔。
     历史：此处原有一条 .pgnav（相关页面导航）横带样式。Elon 2026-09-26 指出
     pgnav 与页脚链接大量重复（用法与 FAQ / 关于 / 下载 各出现两次）「相同的功能
     堆在一起」，遂**整体移除 pgnav**，只保留页脚一行全站链接 —— 故 .pgnav 样式
     也已删除，不留无对应标记的死规则。 */
  footer{padding:30px 0 60px;border-top:1px solid var(--hair);color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:1px}
  ul.tight{margin:8px 0 0;padding-left:18px;color:var(--sub);font-size:13px}
  ul.tight li{margin:4px 0}
  code{font-family:var(--mono);background:#101114;border:1px solid var(--hair);padding:1px 6px;font-size:12px}

  /* ---- 子页面共享增量（不改动首页既有观感） ---- */
  .crumb{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);margin:26px 0 0}
  .crumb a{color:var(--muted)} .crumb a:hover{color:var(--acc)}
  .page{padding:44px 0 8px;border-bottom:1px solid var(--hair)}
  .page h1{font-size:30px;line-height:1.3;margin:10px 0 14px;letter-spacing:1px}
  .page p.lead{color:var(--sub);font-size:16px;max-width:760px;margin:0 0 6px}
  .faq{border:1px solid var(--hair);background:var(--panel);padding:18px 20px;margin:0 0 12px}
  .faq .q{font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--acch);margin:0 0 8px}
  .faq .a{color:var(--sub);font-size:13px;margin:0}
  table.tbl{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 0}
  table.tbl th,table.tbl td{border:1px solid var(--hair);padding:9px 12px;text-align:left;vertical-align:top}
  table.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--acch);background:#101114;font-weight:400}
  table.tbl td{color:var(--sub)}
  .log{border-left:1px solid var(--hairb);margin:6px 0 0;padding:0 0 0 16px}
  .log .v{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--acc);margin:16px 0 6px}
  .log ul{margin:0;padding-left:18px;color:var(--sub);font-size:13px}
  .log li{margin:4px 0}
  .foot-links{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px}
  .foot-links a{color:var(--sub)}
  .nav a[aria-current="page"]{color:var(--acch)}