/* EngAixt shared stylesheet (index.html + 子页面共用) */
/* ==========================================================================
     EngAixt site stylesheet.

     Direction: engineering documentation, not a marketing page. Flat surfaces
     (1px rules and solid fills), a single accent colour, no gradients on
     controls, no shadows, no hover lift, no ambient glow layer, no entrance
     animation. Numbers use tabular figures so columns line up; anything
     technical (hashes, sizes, flags, identifiers) uses the monospace stack.

     The tonal steps between --bg / --bg-2 / --panel are deliberately small:
     structure comes from borders, not from elevation.
     ========================================================================== */

  :root {
    --bg: #0a0b0e;
    --bg-2: #0e1014;
    --panel: #121419;
    --panel-2: #171a20;
    --line: #23262e;
    --line-2: #2f333c;
    --text: #e8eaee;
    --dim: #a2a8b4;
    --dim-2: #767d8a;
    --accent: #4c8dff;
    --accent-dim: #2f5da8;
    --ok: #46c07a;
    --warn: #d9a441;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Noto Sans SC", -apple-system, sans-serif;
    --wide: 1280px;
    --radius: 4px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Defensive: long unbreakable strings (engine lists, terminal commands, hashes)
     otherwise widen the document past a narrow viewport and the whole page gets
     clipped. Everything is allowed to wrap; wide tables scroll instead. */
  * { min-width: 0; }
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, pre, table { max-width: 100%; }
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }
  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.62;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: rgba(76, 141, 255, 0.28); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .container { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
  .mono { font-family: var(--mono); }
  .num { font-variant-numeric: tabular-nums; }

  /* ---------- top bar ---------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 11, 14, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  nav {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    max-width: var(--wide); margin: 0 auto; padding: 0 24px; height: 56px;
  }
  /* Set by the header scroll script. The border is the only feedback: the bar
     gains separation from the page without gaining elevation. */
  header.scrolled { border-bottom-color: var(--line-2); }
  .logo {
    display: flex; align-items: center; gap: 9px;
    font-weight: 650; font-size: 16px; letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 3px;
    background: var(--accent); color: #06070a;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
  }
  .logo-sub { color: var(--dim-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
  .nav-actions { display: flex; align-items: center; gap: 8px; }
  .lang-switch {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: 5px 8px; font-size: 12.5px; font-family: var(--mono);
    cursor: pointer;
  }
  .lang-switch:hover { border-color: var(--dim-2); }
  .menu-btn {
    width: 34px; height: 30px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; cursor: pointer;
  }
  .menu-bar { display: block; width: 18px; height: 1.5px; background: var(--dim); }
  .menu-btn.open .menu-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-btn.open .menu-bar:nth-child(2) { opacity: 0; }
  .menu-btn.open .menu-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ---------- menu overlay ---------- */
  .menu-overlay {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(10, 11, 14, 0.98);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    overflow-y: auto; padding: 72px 24px 40px;
  }
  .menu-overlay.open { opacity: 1; visibility: visible; }
  .menu-panel { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 320px; margin: auto; }
  .menu-panel-title {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--dim-2); text-transform: uppercase; margin: 18px 0 6px;
  }
  .menu-link {
    font-size: 15px; color: var(--text); padding: 9px 10px;
    border: 1px solid transparent; border-radius: var(--radius);
  }
  .menu-link:hover { background: var(--panel); border-color: var(--line); }
  .menu-divider { height: 1px; background: var(--line); margin: 16px 0; }
  .menu-cta {
    background: var(--accent); color: #06070a;
    padding: 11px 16px; border-radius: var(--radius);
    font-size: 14px; font-weight: 650; text-align: center;
  }
  .menu-cta:hover { background: #6ba0ff; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: var(--radius);
    border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
    white-space: nowrap;
  }
  .btn:hover { border-color: var(--dim-2); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: #06070a; font-weight: 650; }
  .btn-primary:hover { background: #6ba0ff; border-color: #6ba0ff; }
  .btn-primary:disabled { opacity: 0.65; cursor: progress; }
  .btn-ghost { background: transparent; }
  .btn-icon { width: 15px; height: 15px; flex: none; }
  .btn-sm { padding: 6px 11px; font-size: 13px; }

  /* ---------- hero ---------- */
  .hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
  .hero-top { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: start; }
  .hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .tag {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
    color: var(--dim); border: 1px solid var(--line-2); border-radius: 3px;
    padding: 3px 7px; background: var(--panel);
  }
  .tag-ok { color: var(--ok); border-color: rgba(70, 192, 122, 0.35); }
  .hero h1 { font-size: 38px; line-height: 1.24; font-weight: 680; letter-spacing: -0.02em; margin-bottom: 16px; }
  .hero h1 .accent { color: var(--accent); }
  .hero-lede { color: var(--dim); font-size: 15.5px; max-width: 620px; margin-bottom: 14px; }
  .hero-lede code, .inline-code {
    font-family: var(--mono); font-size: 13px; color: var(--text);
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 3px; padding: 1px 5px;
  }
  .hero-engines {
    font-family: var(--mono); font-size: 12px; color: var(--dim-2);
    border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 24px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .hero-engines .k { color: var(--dim); }
  /* The engine list is one long run of proper nouns with no spaces to break on. */
  .hero-engines span, .hero h1, .hero-lede { overflow-wrap: anywhere; }
  .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ---------- usage terminal ---------- */
  .terminal { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
  .terminal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 11.5px; color: var(--dim-2); letter-spacing: 0.04em;
  }
  /* Commands wrap instead of scrolling sideways, so a long example is readable
     on a phone. Wrapped continuations land under the command text. */
  .terminal-body {
    padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.85;
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .terminal-body .c { color: var(--dim-2); }
  .terminal-body .p { color: var(--accent); }
  .terminal-body .a { color: var(--text); }
  .terminal-body .k { color: var(--ok); }
  .terminal-body .n { color: var(--warn); }
  .terminal-foot {
    border-top: 1px solid var(--line); padding: 10px 16px;
    font-size: 12.5px; color: var(--dim);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  }

  /* ---------- before / after slider ---------- */
  .hero-shot { margin-top: 44px; }
  .shot-label {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--mono); font-size: 11.5px; color: var(--dim-2);
    border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px;
  }
  .compare-slider {
    --pos: 50%;
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: min(1180px, 76vw);
    margin: 0 auto;
    user-select: none;
  }
  .compare-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .compare-top { position: absolute; inset: 0; width: var(--pos); overflow: hidden; }
  .compare-top .compare-img { height: 100%; object-fit: cover; object-position: left center; }
  .compare-tag {
    position: absolute; top: 12px; left: 12px;
    background: rgba(10, 11, 14, 0.82);
    border: 1px solid var(--line-2);
    border-radius: 3px; padding: 3px 8px;
    font-family: var(--mono); font-size: 11px; color: var(--dim);
  }
  .compare-tag.accent { background: var(--accent); border-color: var(--accent); color: #06070a; }
  .compare-tag.right { left: auto; right: 12px; }
  .compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; background: #fff; transform: translateX(-1px); cursor: ew-resize; }
  .compare-knob {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; color: #0a0b0e;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }
  .compare-caption { color: var(--dim-2); font-size: 12.5px; margin-top: 12px; text-align: center; font-family: var(--mono); }

  /* ---------- brand intro（首屏：品牌文字置中，滚动过场到引擎矩阵） ---------- */
  .brand-hero {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 57px);
    padding: 40px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  @supports (height: 100svh) { .brand-hero { min-height: calc(100svh - 57px); } }
  .brand-hero .container { width: 100%; }
  .brand-mark {
    font-size: clamp(46px, 10.5vw, 124px);
    font-weight: 650; line-height: 1; letter-spacing: -0.03em;
    color: var(--text);
  }
  .brand-mark .brand-accent { color: var(--accent); }
  .brand-sub {
    margin: 18px auto 0; max-width: 660px;
    color: var(--dim); font-size: 16px;
  }
  .brand-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 22px; }
  .brand-cue {
    display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
    margin-top: 40px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--dim-2);
  }
  .brand-cue svg { width: 16px; height: 16px; animation: cue-bob 2.2s ease-in-out infinite; }
  @keyframes cue-bob {
    0%, 100% { transform: translateY(-1px); opacity: 0.5; }
    50% { transform: translateY(3px); opacity: 1; }
  }
  /* 过场：透明度由脚本按滚动进度逐帧驱动，这里只做合成层提示 */
  #brand { will-change: opacity; }
  #engines { will-change: opacity; }
  #engines tbody tr { will-change: opacity; }

  /* ---------- sections ---------- */
  section { padding: 68px 0; }
  .sec-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sec-head { margin-bottom: 28px; }
  .kicker {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--dim-2); text-transform: uppercase; margin-bottom: 10px;
  }
  .section-title { font-size: 25px; font-weight: 660; letter-spacing: -0.015em; line-height: 1.3; }
  .section-sub { color: var(--dim); font-size: 14.5px; margin-top: 10px; max-width: 780px; }
  .inline-link { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
  .inline-link:hover { border-bottom-color: var(--accent); }

  /* ---------- tables ---------- */
  .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--panel); }
  /* The capabilities table cannot fit four readable columns on a phone, so below
     this width each row becomes a stacked record. Scroll was the alternative and
     it left the first column one character per line. */
  @media (max-width: 900px) {
    .table-wrap { border: none; background: none; overflow: visible; }
    .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
    .table-wrap thead { display: none; }
    .table-wrap tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; overflow: hidden; }
    .table-wrap td { border-bottom: 1px solid var(--line); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
    .table-wrap td[data-label]::before {
      content: attr(data-label);
      font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--dim-2);
    }
    .table-wrap td:not([data-label])::before { display: none; }
    .table-wrap td.k, .table-wrap td.c { font-size: 13.5px; }
  }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  thead th {
    text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--dim-2); font-weight: 500;
    padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--panel-2);
    white-space: nowrap;
  }
  tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--dim); }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
  td.k { color: var(--text); font-weight: 550; }
  td.c { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
  td .sub { display: block; color: var(--dim-2); font-size: 12px; margin-top: 3px; }
  .state { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
  .state-ok { color: var(--ok); }
  .state-exp { color: var(--warn); }
  .table-note { color: var(--dim-2); font-size: 12.5px; margin-top: 12px; }

  /* ---------- pipeline ---------- */
  .pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .pipe-cell { background: var(--panel); padding: 18px 16px; }
  .pipe-stage { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dim-2); text-transform: uppercase; margin-bottom: 8px; }
  .pipe-name { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .pipe-desc { font-size: 13px; color: var(--dim); line-height: 1.55; }
  .pipe-note { margin-top: 16px; color: var(--dim-2); font-size: 12.5px; font-family: var(--mono); }

  /* ---------- changelog ---------- */
  .changelog-list { display: flex; flex-direction: column; gap: 6px; }
  .release-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .release-card.open { border-color: var(--line-2); }
  .release-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 13px 16px;
    background: none; border: none; color: inherit; cursor: pointer;
    font-family: inherit; text-align: left;
  }
  .release-toggle:hover { background: rgba(255, 255, 255, 0.02); }
  .release-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .release-version { font-family: var(--mono); font-size: 13px; font-weight: 650; color: var(--accent); }
  .release-title { font-size: 14.5px; color: var(--text); }
  .release-meta { font-family: var(--mono); font-size: 12px; color: var(--dim-2); }
  .release-icon {
    flex: none; width: 22px; height: 22px;
    border: 1px solid var(--line-2); border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 13px; color: var(--dim);
  }
  .release-card.open .release-icon { color: var(--text); border-color: var(--dim-2); }
  .release-body { display: none; padding: 0 16px 16px; }
  .release-card.open .release-body { display: block; }
  .release-points { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  .release-points li { position: relative; padding-left: 15px; color: var(--dim); font-size: 13.5px; }
  .release-points li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 4px; height: 1px; background: var(--dim-2); }

  /* ---------- FAQ ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 6px; max-width: 940px; }
  .faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .faq-item.open { border-color: var(--line-2); }
  .faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 16px; font-size: 14.5px; font-weight: 550; cursor: pointer;
  }
  .faq-q:hover { background: rgba(255, 255, 255, 0.02); }
  .faq-q .icon { flex: none; font-family: var(--mono); font-size: 15px; color: var(--dim-2); }
  .faq-a { display: none; padding: 0 16px 16px; color: var(--dim); font-size: 13.5px; max-width: 880px; }
  .faq-item.open .faq-a { display: block; }

  /* ---------- fact lists (requirements, repository facts) ---------- */
  .oss { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: start; }
  .oss-facts { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .oss-fact { background: var(--panel); padding: 12px 14px; display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
  .oss-fact span:first-child { color: var(--dim); }
  .oss-fact span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--text); text-align: right; overflow-wrap: anywhere; }

  /* ---------- download ---------- */
    .dl-panel { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); padding: 28px 26px; }
  .dl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 4px; }
  .dl-panel h2 { font-size: 22px; font-weight: 660; letter-spacing: -0.015em; margin-bottom: 8px; }
  .dl-panel p { color: var(--dim); font-size: 14px; max-width: 640px; }
  .dl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .dl-progress { height: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; margin-top: 20px; display: none; }
  .dl-progress-bar { width: 0; height: 100%; background: var(--accent); transition: width 0.15s linear; }
  .dl-status { font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin-top: 10px; min-height: 18px; }
  .dl-status.error { color: #ff8a76; }
  .dl-specs { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 24px; }
  .dl-spec { display: flex; flex-direction: column; gap: 3px; }
  .dl-spec-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }
  .dl-spec-v { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
  .dl-spec-v.mono { font-family: var(--mono); font-size: 12.5px; }
  .dl-note { color: var(--dim-2); font-size: 12.5px; margin-top: 18px; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 28px 24px; }
  .foot-inner {
    max-width: var(--wide); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    color: var(--dim-2); font-size: 13px;
  }
  .footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .footer-links a { color: var(--dim); }
  .footer-links a:hover { color: var(--text); }
  .mail { font-family: var(--mono); }

  /* ---------- responsive ---------- */
  @media (max-width: 1040px) {
    .pipe { grid-template-columns: repeat(2, 1fr); }
    .oss { grid-template-columns: 1fr; gap: 22px; }
  }
  @media (max-width: 920px) {
    .hero-top { grid-template-columns: 1fr; gap: 32px; }
    .hero h1 { font-size: 30px; }
  }
  @media (max-width: 720px) {
    section { padding: 48px 0; }
    .hero { padding: 44px 0 40px; }
    .pipe { grid-template-columns: 1fr; }
    .compare-slider { max-width: 100%; }
    .dl-panel { padding: 20px 16px; }
    .foot-inner { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- 翻页（多页幻灯片） ---------- */
  body.deck-mode { overflow: hidden; }
  body.deck-mode .deck-slide {
    position: fixed; left: 0; right: 0; top: 57px; bottom: 0;
    margin: 0; background: var(--bg);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; pointer-events: none; z-index: 10;
    transform: translateY(62px);
    transition: opacity 0.55s ease, transform 0.62s cubic-bezier(0.16, 0.9, 0.3, 1);
    will-change: opacity, transform;
  }
  body.deck-mode .deck-slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 20; }
  body.deck-mode .deck-slide.is-above { transform: translateY(-58px); }

  /* 进入一页时，页内元素逐项弹出 */
  body.deck-mode .pop-item { opacity: 0; }
  body.deck-mode .deck-slide.is-active .pop-item.in { animation: pop-up 0.7s cubic-bezier(0.16, 0.9, 0.3, 1) both; }
  @keyframes pop-up {
    0%   { opacity: 0; transform: translateY(38px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(-7px) scale(1.006); }
    82%  { opacity: 1; transform: translateY(2px) scale(1); }
    100% { opacity: 1; transform: none; }
  }
  body.deck-mode #brand.is-active .brand-inner { animation: deck-in 0.7s cubic-bezier(0.16, 0.9, 0.3, 1) both; }
  @keyframes deck-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.deck-mode .deck-slide { transition: none; }
    body.deck-mode .brand-inner { animation: none; }
    body.deck-mode .pop-item { opacity: 1; }
  }

  /* ---------- 引擎横向排布：泳道 + 卡片，一眼看全 ---------- */
  .engine-lanes { display: flex; flex-direction: column; gap: 12px; }
  .engine-lane {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); padding: 12px 14px 14px;
  }
  .engine-lane-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .engine-lane-head .route-static { color: var(--accent); }
  .engine-lane-head .route-runtime { color: var(--ok); }
  .engine-lane-head .count { color: var(--dim-2); }
  .engine-lane-head .rule { flex: 1; height: 1px; background: var(--line); }
  .engine-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .engine-chip {
    flex: 1 1 152px; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--line-2); border-left: 3px solid var(--line-2);
    border-radius: var(--radius); background: var(--bg); padding: 9px 11px;
  }
  .engine-lane.static .engine-chip { border-left-color: var(--accent); }
  .engine-lane.runtime .engine-chip { border-left-color: var(--ok); }
  .engine-chip .name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
  .engine-chip .sub { font-family: var(--mono); font-size: 11px; color: var(--dim-2); overflow-wrap: anywhere; }
  .engine-chip .meta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
  .engine-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--dim-2);
  }
  .engine-legend .k { color: var(--dim); }
  .engine-legend .swatch { display: inline-flex; align-items: center; gap: 6px; }
  .engine-legend .bar { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
  .engine-legend .bar.static { background: var(--accent); }
  .engine-legend .bar.runtime { background: var(--ok); }
  .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
  .dot.ok { background: var(--ok); }
  .dot.beta { background: var(--warn); }
  .engine-note { margin-top: 14px; color: var(--dim); font-size: 13px; }
  body.deck-mode #engines { padding: 22px 0 26px; }
  body.deck-mode #engines .sec-head { margin-bottom: 14px; }
  body.deck-mode #engines .section-title { font-size: 26px; }
  body.deck-mode #engines .section-sub { font-size: 13.5px; }

  /* ---------- 下载页 ---------- */
  .dl-page {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%; padding-top: 26px; padding-bottom: 26px;
  }
  .dl-page .kicker { margin-bottom: 12px; }
  .dl-panel .dl-note { margin-top: 16px; color: var(--dim-2); font-size: 12.5px; }
  .dl-status { min-height: 20px; }
  .dl-status.error { color: #e07a6a; }

  /* 第三页：通往「使用方法 / 常见问题」页面的入口按钮 */
  .dl-pages {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .dl-pages .k {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--dim-2);
  }
  .dl-pages .btn .arrow { font-family: var(--mono); color: var(--dim-2); }
  .dl-pages .btn:hover .arrow { color: var(--text); }

  /* ---------- 使用方法页：左侧卡片目录 + 右侧独立滚动内容区 ---------- */
  body.deck-mode #usage {
    display: flex; flex-direction: column;
    padding: 20px 0 22px;
  }
  body.deck-mode #usage > .container {
    /* .container 自带 margin:0 auto，在 flex 列里 auto 外边距会让它按内容宽度收缩而不是拉伸，
       必须显式 width:100% 才能撑满整屏。 */
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    width: 100%;
  }
  body.deck-mode #usage .sec-head { flex: none; margin-bottom: 14px; }
  body.deck-mode #usage .section-title { font-size: 26px; }
  body.deck-mode #usage .section-sub { font-size: 13.5px; }

  .docs-body {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: 252px 1fr; gap: 14px;
    align-items: stretch;
  }

  /* 左栏：卡片式条目，比之前高、圆角更大，不再是一条条扁方框 */
  .docs-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    justify-content: flex-start;   /* 顶栏 nav 规则带 space-between，必须显式覆盖 */
    height: auto; max-width: none; margin: 0; padding: 10px;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .docs-tab {
    display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px;
    width: 100%; min-height: 58px; padding: 11px 13px;
    text-align: left; cursor: pointer;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--bg); color: var(--dim);
    font-family: inherit; font-size: 14px; line-height: 1.4;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .docs-tab .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--panel-2); border: 1px solid var(--line-2);
    font-family: var(--mono); font-size: 12px; color: var(--dim-2);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .docs-tab:hover { border-color: var(--line-2); background: var(--panel); color: var(--text); }
  .docs-tab:hover .n { color: var(--text); }
  .docs-tab.is-on {
    background: var(--panel-2); border-color: var(--accent-dim); color: var(--text);
  }
  .docs-tab.is-on .n {
    background: var(--accent); border-color: var(--accent); color: #06070a; font-weight: 700;
  }

  /* 右栏：独立滚动区（以后往里加教程图片就靠这条滑动条） */
  .docs-panes {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    padding: 20px 22px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .docs-panes::-webkit-scrollbar { width: 10px; }
  .docs-panes::-webkit-scrollbar-track { background: transparent; }
  .docs-panes::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 6px;
    border: 2px solid transparent; background-clip: content-box;
  }
  .docs-panes::-webkit-scrollbar-thumb:hover { background: var(--dim-2); background-clip: content-box; }
  .docs-nav::-webkit-scrollbar { width: 10px; }
  .docs-nav::-webkit-scrollbar-track { background: transparent; }
  .docs-nav::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 6px;
    border: 2px solid transparent; background-clip: content-box;
  }

  .docs-pane { display: none; }
  .docs-pane.is-on { display: block; animation: pane-in 0.32s ease both; }
  @keyframes pane-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .docs-pane h3 {
    font-size: 19px; font-weight: 660; letter-spacing: -0.015em;
    margin-bottom: 10px;
  }
  .docs-lead {
    color: var(--dim); font-size: 14px; line-height: 1.78;
    margin-bottom: 18px; max-width: 720px;
  }
  .docs-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .docs-list li {
    position: relative; padding-left: 18px;
    color: var(--dim); font-size: 13px; line-height: 1.75; max-width: 760px;
  }
  .docs-list li::before {
    content: ""; position: absolute; left: 2px; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dim);
  }

  /* 教程图片：以后往 pane 里放 figure 即可，尺寸/圆角/间距已就绪 */
  .docs-fig { margin: 18px 0 0; }
  .docs-fig img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--bg);
  }
  .docs-fig figcaption {
    margin-top: 8px; color: var(--dim-2);
    font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  }
  .docs-fig.small img { max-width: 520px; }

  .docs-foot { flex: none; margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

  @media (max-width: 860px) {
    body.deck-mode #usage { display: block; padding: 18px 0 20px; }
    .docs-body { display: block; }
    .docs-nav {
      flex-direction: row; flex-wrap: wrap; gap: 8px;
      margin-bottom: 12px; overflow: visible;
    }
    .docs-tab { grid-template-columns: 28px 1fr; width: auto; min-height: 48px; }
    .docs-tab .n { width: 28px; height: 28px; border-radius: 7px; }
    .docs-panes { padding: 16px 16px 18px; }
  }

  @media (max-width: 700px) {
    .engine-chip { flex: 1 1 100%; }
    body.deck-mode #engines .section-title { font-size: 22px; }
  }

  /* ---------- 第三页：居中的下载卡（一屏看全，不需要滚动） ---------- */
  .dl-page {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 100%; padding: 10px 0;
  }
  .dl-card {
    width: 100%; max-width: 860px;
    border: 1px solid var(--line-2); border-radius: 14px;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    padding: 18px 24px 16px;
  }
  .dl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .dl-mark {
    flex: none; width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #06070a;
    font-size: 21px; font-weight: 700;
  }
  .dl-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .dl-id .name { font-size: 19px; font-weight: 660; letter-spacing: -0.015em; line-height: 1.12; }
  .dl-id .sub { color: var(--dim-2); font-family: var(--mono); font-size: 11px; }
  .dl-ver { margin-left: auto; text-align: right; white-space: nowrap; color: var(--dim-2); font-size: 10.5px; letter-spacing: 0.06em; }
  .dl-ver b { display: block; color: var(--text); font-size: 14px; font-weight: 650; letter-spacing: 0; }
  .dl-title { font-size: 18px; font-weight: 660; letter-spacing: -0.015em; margin-bottom: 5px; }
  .dl-desc { color: var(--dim); font-size: 12.5px; line-height: 1.7; max-width: 640px; }

  .dl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
  .dl-primary { flex: 1 1 300px; justify-content: center; min-height: 42px; font-size: 14.5px; }
  .dl-sponsor { min-height: 42px; }

  .dl-progress { margin-top: 11px; }
  .dl-status { margin-top: 6px; min-height: 16px; font-size: 11.5px; }

  .dl-specs {
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px;
  }
  .dl-spec { display: flex; flex-direction: column; gap: 2px; }
  .dl-spec.wide { grid-column: 1 / -1; }
  .dl-spec-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }
  .dl-spec-v { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
  .dl-spec-v.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

  .dl-pages {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .dl-pages .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }
  .dl-pages .btn { padding: 6px 11px; font-size: 13px; }
  .dl-pages .btn .arrow { font-family: var(--mono); color: var(--dim-2); }
  .dl-pages .btn:hover .arrow { color: var(--text); }

  .dl-note { margin-top: 9px; color: var(--dim-2); font-size: 11.5px; line-height: 1.65; }

  @media (max-width: 700px) {
    .dl-card { padding: 16px 16px 14px; border-radius: 12px; }
    .dl-top { flex-wrap: wrap; }
    .dl-ver { margin-left: 0; text-align: left; }
    .dl-specs { grid-template-columns: 1fr; }
  }
  @media (max-height: 700px) {
    /* 矮屏再收一档，保证一屏装下 */
    .dl-page { padding: 6px 0; }
    .dl-card { padding: 14px 20px 12px; }
    .dl-top { margin-bottom: 10px; }
    .dl-mark { width: 38px; height: 38px; font-size: 18px; border-radius: 9px; }
    .dl-id .name { font-size: 17px; }
    .dl-title { font-size: 17px; }
    .dl-actions { margin-top: 10px; }
    .dl-primary, .dl-sponsor { min-height: 38px; }
    .dl-specs { margin-top: 10px; padding-top: 10px; gap: 8px 20px; }
    .dl-pages { margin-top: 10px; padding-top: 10px; }
    .dl-note { display: none; }
  }

  /* ---------- 图标：用 engaixt.png 替代原来的「文」字块 ---------- */
  .logo-mark {
    background: none; box-shadow: none; padding: 0;
    width: 24px; height: 24px; border-radius: 6px; overflow: hidden;
  }
  .logo-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .dl-mark { background: none; padding: 0; overflow: hidden; }
  .dl-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }