/* ==========================================================================
   MTBOX 官网（GitHub Pages）
   --------------------------------------------------------------------------
   变量取自 ttread.cn 主站同一套令牌，页面观感与主站一致。
   字体全走系统栈，零网络请求；深浅两版靠 CSS 变量，不挂 JS 类。
   ========================================================================== */

:root{
  --wrap:1080px;
  --pad:clamp(18px,5vw,40px);
  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",
              "Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,
              "Segoe UI",Roboto,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;

  --bg:#f7f5f0;
  --bg-2:#fffdf8;
  --panel:rgba(255,253,248,.78);
  --panel-solid:#ffffff;
  --line:rgba(24,26,32,.12);
  --line-2:rgba(24,26,32,.2);
  --ink:#16181e;
  --ink-2:#4a5060;
  --faint:#646a79;
  --acc:#b33420;
  --acc-2:#d4573c;
  --on-acc:#ffffff;
  --acc-rgb:179,52,32;
  --shadow:0 1px 2px rgba(24,26,32,.05),0 10px 26px -18px rgba(24,26,32,.24);
  --shadow-lift:0 2px 6px rgba(24,26,32,.06),0 22px 44px -24px rgba(24,26,32,.32);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1017;
    --bg-2:#141926;
    --panel:rgba(233,237,245,.055);
    --panel-solid:#171d2b;
    --line:rgba(233,237,245,.11);
    --line-2:rgba(233,237,245,.19);
    --ink:#e9edf5;
    --ink-2:#a5adc0;
    --faint:#838ba0;
    --acc:#ff7a63;
    --acc-2:#ffb08a;
    --on-acc:#0b0e14;
    --acc-rgb:255,122,99;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px -18px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 22px 44px -24px rgba(0,0,0,.8);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.75 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc-2); }
h1,h2,h3{ line-height:1.25; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
code{
  font-family:var(--font-mono); font-size:.92em;
  background:rgba(var(--acc-rgb),.09); color:var(--acc);
  padding:.12em .42em; border-radius:6px;
}
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; gap:14px; min-height:62px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; color:var(--ink); font-weight:800; letter-spacing:.02em; }
.brand:hover{ color:var(--ink); }
.brand-mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(var(--acc-rgb),.13); color:var(--acc);
  font:800 14px/1 var(--font-mono);
}
.nav{ display:flex; gap:2px; }
.nav a{
  padding:7px 12px; border-radius:99px; font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:.22s var(--ease);
}
.nav a:hover{ color:var(--ink); background:var(--line); }
.nav a.lang{ color:var(--acc); background:rgba(var(--acc-rgb),.12); }
.nav a.lang:hover{ color:var(--acc); background:rgba(var(--acc-rgb),.2); }

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:99px; border:1px solid var(--line-2);
  background:var(--panel-solid); color:var(--ink);
  font-weight:650; font-size:15px; transition:.22s var(--ease);
}
.btn:hover{ border-color:rgba(var(--acc-rgb),.45); color:var(--acc); translate:0 -1px; }
.btn.solid{
  background:var(--acc); border-color:transparent; color:var(--on-acc);
  box-shadow:0 8px 20px -12px rgba(var(--acc-rgb),.8);
}
.btn.solid:hover{ color:var(--on-acc); filter:brightness(1.06); }

/* ── 首屏 ─────────────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; padding:clamp(48px,9vw,104px) 0 clamp(34px,6vw,64px); }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg::before{
  content:""; position:absolute; inset:-20% -10% auto; height:120%;
  background:
    radial-gradient(48% 46% at 18% 8%, rgba(var(--acc-rgb),.20), transparent 68%),
    radial-gradient(42% 40% at 86% 22%, rgba(122,63,242,.13), transparent 70%),
    radial-gradient(40% 42% at 62% 96%, rgba(13,148,136,.12), transparent 72%);
  filter:blur(4px);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
  opacity:.7;
}
.hero-in{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; }
.eyebrow{
  font:650 13px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); margin-bottom:16px;
}
.hero h1{ font-size:clamp(38px,7vw,62px); letter-spacing:-.025em; }
.hero h1 .h1-sub{
  display:block; margin-top:10px; font-size:clamp(17px,2.4vw,22px);
  font-weight:600; color:var(--ink-2); letter-spacing:0;
}
.lede{ margin-top:18px; font-size:clamp(16px,1.6vw,18px); color:var(--ink-2); max-width:60ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chip{
  font:600 12.5px/1 var(--font-mono); color:var(--ink-2);
  padding:7px 11px; border-radius:99px; border:1px solid var(--line); background:var(--panel);
}

/* 终端卡 */
.term{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel-solid); box-shadow:var(--shadow-lift);
}
.term-bar{
  display:flex; align-items:center; gap:7px; padding:11px 15px;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.term-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.term-bar i:first-child{ background:#e0625b; } .term-bar i:nth-child(2){ background:#dfae3c; }
.term-bar i:nth-child(3){ background:#5aa85f; }
.term-bar span{ margin-left:6px; font:600 12.5px/1 var(--font-mono); color:var(--faint); }
.term pre{
  margin:0; padding:18px 20px; overflow-x:auto;
  font:13px/1.85 var(--font-mono); color:var(--ink-2);
}
.term pre b{ color:var(--acc); font-weight:700; }

/* ── 分节 ─────────────────────────────────────────────────────────────── */
.sec{ padding:clamp(44px,7vw,82px) 0; }
.sec + .sec{ border-top:1px solid var(--line); }
.sec-hd{ margin-bottom:clamp(22px,3vw,34px); max-width:70ch; }
.sec-no{
  display:inline-block; font:700 12px/1 var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); margin-bottom:12px;
}
.sec-hd h2{ font-size:clamp(24px,3.4vw,32px); }
.sec-hd p{ margin-top:10px; color:var(--ink-2); }

/* 卡片网格 */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; }
.card{
  border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
  background:var(--panel); box-shadow:var(--shadow); transition:.22s var(--ease);
}
.card:hover{ border-color:rgba(var(--acc-rgb),.4); translate:0 -2px; box-shadow:var(--shadow-lift); }
.card h3{ font-size:17.5px; margin-bottom:8px; }
.card p{ color:var(--ink-2); font-size:15px; }
.ftn{ font:700 12px/1 var(--font-mono); color:var(--acc); display:block; margin-bottom:10px; }

/* 步骤条 */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.steps li{
  display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:start;
  border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; background:var(--panel);
}
.sn{ font:800 15px/1.4 var(--font-mono); color:var(--acc); }
.steps h3{ font-size:16.5px; margin-bottom:6px; }
.steps p{ color:var(--ink-2); font-size:15px; }

/* 截图 */
.shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.shots figure{ margin:0; }
.shots img{
  width:100%; border-radius:var(--r); border:1px solid var(--line);
  box-shadow:var(--shadow); background:var(--bg-2);
}
.shots figcaption{ margin-top:10px; font-size:14px; color:var(--faint); }

/* 问答 */
.faq details{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  margin-bottom:10px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:16px 20px; font-weight:650; list-style:none;
  display:flex; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--acc); font:700 19px/1 var(--font-mono); }
.faq details[open] summary::after{ content:"−"; }
.faq summary:hover{ color:var(--acc); }
.faq div{ padding:0 20px 18px; color:var(--ink-2); font-size:15px; }

/* 声明与致谢 */
.box{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  background:var(--panel); box-shadow:var(--shadow);
}
.box h3{ font-size:16px; margin-bottom:14px; }
.box ol{ margin:0; padding-left:22px; color:var(--ink-2); font-size:15px; }
.box ol li{ margin-bottom:10px; }
.box ul{ margin:0; padding:0; list-style:none; }
.box ul li{ margin-bottom:10px; color:var(--ink-2); font-size:15px; }
.box ul li b{ color:var(--ink); }

/* ── 页脚 ─────────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:36px 0 44px; background:var(--bg-2); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px; }
.foot h3{
  font:700 11.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
.foot ul{ margin:0; padding:0; list-style:none; }
.foot li{ margin-bottom:9px; font-size:14.5px; }
.foot p{ color:var(--faint); font-size:14.5px; margin-top:8px; }
.foot-bar{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--faint); font-size:13.5px;
}

/* ── 响应式 ───────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .hero-in{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr; }
  .steps li{ grid-template-columns:1fr; gap:6px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}