/* ==========================================================================
   LianT · 联T —— 与主站（博客）共用同一套设计系统
   令牌、排版、材质、动效规则、无障碍覆盖全部对齐；
   这里只额外定义 LianT 自己的组件（下载卡片、格式链接、步骤卡）。

   依据 emilkowalski/skills：
     emil-design-eng  缓动/时长/按压反馈/半透明材质
     apple-design     尺寸相关字距、浮动 chrome、reduced-motion 三信号
     mobile-native    dvh/svh、点击高亮、touch-action、安全区、theme-color
   ========================================================================== */
@layer reset, tokens, base, layout, comp, motion, a11y;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; }
  p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
  html { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"], summary, label { touch-action: manipulation; }
  button, .nav-links a, .brand, .btn, .icon-btn, .formats a, .pill, .to-top {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    --font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC",
                 "Source Han Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --font-serif: "Instrument Serif", "Songti SC", "Noto Serif SC", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs--1: clamp(0.775rem, 0.755rem + 0.09vw, 0.82rem);
    --fs-0:  clamp(0.945rem, 0.92rem + 0.14vw, 1.01rem);
    --fs-1:  clamp(1.05rem, 1.0rem + 0.28vw, 1.16rem);
    --fs-2:  clamp(1.22rem, 1.13rem + 0.46vw, 1.45rem);
    --fs-3:  clamp(1.5rem, 1.32rem + 0.9vw, 1.95rem);
    --fs-5:  clamp(2.7rem, 1.7rem + 4.4vw, 4.6rem);

    --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    --sp-6: 32px; --sp-7: 48px;

    --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-full: 999px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --d-press: 120ms; --d-hover: 180ms; --d-pop: 200ms;

    --maxw: 1080px;
    --gut: clamp(20px, 4.6vw, 40px);
    --nav-h: 60px;
  }

  :root, [data-theme="light"] {
    --bg: #FAFAFB;
    --surface: #FFFFFF;
    --surface-2: #F7F8FA;
    --ink: #0C0D11;
    --ink-2: #4E5462;
    --ink-3: #6B7180;
    --line: rgba(12, 13, 17, 0.08);
    --line-2: rgba(12, 13, 17, 0.15);
    --accent: #4B3EF0;
    --accent-ink: #FFFFFF;
    --teal: #0B7F76;
    --warm: #B8451A;
    --hair: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    --glass: rgba(250, 250, 251, 0.7);
    --sh-1: 0 1px 2px rgba(12, 13, 17, 0.06), 0 0 0 1px rgba(12, 13, 17, 0.02);
    --sh-2: 0 1px 2px rgba(12, 13, 17, 0.05), 0 14px 30px -14px rgba(12, 13, 17, 0.18);
    --sh-3: 0 2px 6px rgba(12, 13, 17, 0.05), 0 40px 80px -28px rgba(12, 13, 17, 0.3);
    --grain: 0.021;
    --glow-a: 0.16;
    --glow-b: 0.13;
    /* 品牌图标永远坐在同一块浅色底座上：Windows 蓝、Android 绿、
       Linux 的深灰、macOS 的黑，都要靠浅底才读得出 */
    --icon-chip-1: #FFFFFF;
    --icon-chip-2: #F1F2F5;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #08090C;
      --surface: #0F1116;
      --surface-2: #14161C;
      --ink: #F3F4F7;
      --ink-2: #A2A7B4;
      --ink-3: #7C8189;
      --line: rgba(255, 255, 255, 0.09);
      --line-2: rgba(255, 255, 255, 0.17);
      --accent: #8F83FF;
      --accent-ink: #08090C;
      --teal: #3ED9C8;
      --warm: #FB923C;
      --hair: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      --glass: rgba(8, 9, 12, 0.64);
      --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
      --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 34px -16px rgba(0, 0, 0, 0.75);
      --sh-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 44px 88px -32px rgba(0, 0, 0, 0.9);
      --grain: 0.035;
      --glow-a: 0.3;
      --glow-b: 0.22;
    }
  }

  [data-theme="dark"] {
    --bg: #08090C;
    --surface: #0F1116;
    --surface-2: #14161C;
    --ink: #F3F4F7;
    --ink-2: #A2A7B4;
    --ink-3: #7C8189;
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.17);
    --accent: #8F83FF;
    --accent-ink: #08090C;
    --teal: #3ED9C8;
    --warm: #FB923C;
    --hair: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --glass: rgba(8, 9, 12, 0.64);
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 34px -16px rgba(0, 0, 0, 0.75);
    --sh-3: 0 2px 8px rgba(0, 0, 0, 0.5), 0 44px 88px -32px rgba(0, 0, 0, 0.9);
    --grain: 0.035;
    --glow-a: 0.3;
    --glow-b: 0.22;
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  html {
    background: var(--bg);
    color-scheme: light dark;
    scroll-padding-top: calc(var(--nav-h) + 24px);
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-0);
    line-height: 1.65;
    font-synthesis-weight: none;
    min-height: 100svh;
    overflow-x: clip;
    transition: background-color var(--d-pop) var(--ease), color var(--d-pop) var(--ease);
  }

  ::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  .skip {
    position: fixed; top: 8px; left: 50%; z-index: 200;
    transform: translate(-50%, -160%);
    padding: 10px 18px; border-radius: var(--r-full);
    background: var(--accent); color: var(--accent-ink);
    font-size: var(--fs--1); font-weight: 600;
    transition: transform var(--d-pop) var(--ease-out);
  }
  .skip:focus-visible { transform: translate(-50%, 0); }

  /* 环境层：把渐变的「塑料感」磨掉 */
  .noise {
    position: fixed; inset: 0;
    z-index: 200; pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    transform: translateZ(0);
    will-change: transform;
  }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .container {
    width: 100%; max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  .section { padding-block: clamp(48px, 7vw, 84px) 0; }
  .section:first-child { padding-top: clamp(28px, 4vw, 48px); }
  .page-section { padding-bottom: var(--sp-7); }

  /* 章节头：编号 + 标题 + 一条细线（和主站同一套） */
  .sec-head {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
  .sec-num {
    font-family: var(--font-mono); font-size: var(--fs--1);
    color: var(--accent); font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em; flex: none;
  }
  .sec-title {
    font-size: var(--fs-3); font-weight: 700;
    letter-spacing: -0.028em; line-height: 1.15;
    text-wrap: balance;
  }
  .sec-rule {
    flex: 1; height: 1px; align-self: center;
    background: linear-gradient(to right, var(--line-2), transparent 92%);
  }

  .muted {
    color: var(--ink-2); font-size: var(--fs-1);
    max-width: 34em; line-height: 1.6;
    text-wrap: pretty;
  }

  .footer {
    margin-top: var(--sp-7);
    padding: var(--sp-6) var(--gut) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
  .foot-inner {
    max-width: var(--maxw); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    font-family: var(--font-mono); font-size: var(--fs--1); color: var(--ink-3);
  }
  .foot-inner a { color: var(--ink-2); transition: color var(--d-hover) var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .foot-inner a:hover { color: var(--accent); }
  }
  .to-top {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--r-full);
    border: 1px solid var(--line); color: var(--ink-2);
    transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease),
                transform var(--d-press) var(--ease-out);
  }
}

/* ----------------------------------------------------------------- comp -- */
@layer comp {
  /* ---- 导航：浮动的一层半透明材质，内容从底下穿过 ---------------------- */
  .nav {
    position: sticky; top: 0; z-index: 100;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .nav-inner {
    padding-block: 10px;
    display: flex; align-items: center; gap: var(--sp-3);
    max-width: var(--maxw); margin-inline: auto;
    padding-inline: var(--gut);
  }
  .nav::before {
    content: ''; position: absolute; inset: 0;
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    pointer-events: none;
  }
  /* 滚动之后才出现分割感：只动 opacity，跑在滚动时间轴上 */
  .nav::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none;
    box-shadow: 0 1px 0 var(--line),
                0 30px 30px -30px color-mix(in srgb, var(--bg) 96%, transparent);
    opacity: 0;
  }
  @supports (animation-timeline: scroll()) {
    .nav::after {
      animation: nav-solid linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 110px;
    }
    @keyframes nav-solid { to { opacity: 1; } }
  }

  .brand {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-0);
    letter-spacing: -0.02em; color: var(--ink);
    padding: 6px 2px; border-radius: var(--r-xs);
    position: relative; z-index: 1; margin-right: auto;
  }
  .brand-mark { width: 22px; height: 22px; flex: none; color: var(--accent); }
  .brand-mark path { fill: currentColor; }

  .nav-links {
    position: relative; z-index: 1;
    --nl-px: 14px; --nl-py: 7px; --nl-fs: var(--fs--1);
    display: flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    box-shadow: var(--hair);
    border: 1px solid var(--line);
  }
  .nav-links a {
    position: relative; display: block;
    padding: var(--nl-py) var(--nl-px);
    border-radius: var(--r-full);
    font-size: var(--nl-fs); font-weight: 500;
    white-space: nowrap;
    color: var(--ink-2);
    transition: color var(--d-hover) var(--ease);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav-links a:hover { color: var(--ink); }
  }
  .nav-links a:active { transform: scale(0.96); }

  /* 当前项：药丸和反色文字是同一层材料，整块一起淡入淡出（不用位移动画）。
     --ease-out 让透明度快速越过 0.5，交叉淡入的两个文字不会长时间停在半透明。 */
  .nav-links a .on {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    background: var(--ink); color: var(--bg);
    opacity: 0;
    transition: opacity var(--d-pop) var(--ease-out);
    pointer-events: none;
  }
  .nav-links a[aria-current="page"] .on { opacity: 1; }

  .icon-btn {
    position: relative; z-index: 1;
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    box-shadow: var(--hair);
    color: var(--ink-2);
    transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease),
                transform var(--d-press) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
  }
  .icon-btn:active { transform: scale(0.92); }
  .icon-btn svg { grid-area: 1 / 1; width: 17px; height: 17px; }
  .icon-btn svg :is(path, circle) {
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .theme-btn .i { transition: opacity var(--d-pop) var(--ease), transform var(--d-pop) var(--ease-out); }
  .theme-btn .i-moon { opacity: 1; transform: none; }
  .theme-btn .i-sun  { opacity: 0; transform: rotate(-45deg) scale(0.6); }
  [data-theme="dark"] .theme-btn .i-moon,
  html:not([data-theme="light"]) .theme-btn .i-moon { opacity: 0; transform: rotate(45deg) scale(0.6); }
  [data-theme="dark"] .theme-btn .i-sun,
  html:not([data-theme="light"]) .theme-btn .i-sun { opacity: 1; transform: none; }
  @media (prefers-color-scheme: light) {
    html:not([data-theme]) .theme-btn .i-moon { opacity: 1; transform: none; }
    html:not([data-theme]) .theme-btn .i-sun { opacity: 0; transform: rotate(-45deg) scale(0.6); }
  }

  /* ---- 卡片通用：表面 + 亮边 + 细描边 --------------------------------- */
  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-2), var(--hair);
    overflow: hidden;
    transition: transform var(--d-hover) var(--ease-out),
                box-shadow var(--d-hover) var(--ease),
                border-color var(--d-hover) var(--ease),
                background-color var(--d-pop) var(--ease);
  }
  .glow {
    position: absolute; left: 0; top: 0;
    width: 420px; height: 420px; margin: -210px 0 0 -210px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
    opacity: 0;
    transition: opacity var(--d-pop) var(--ease);
    pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .glow { will-change: transform; }
    .card:hover { transform: translateY(-3px); box-shadow: var(--sh-3), var(--hair); border-color: var(--line-2); }
    .card:hover .glow { opacity: 1; }
  }

  /* ---- 按钮 ------------------------------------------------------------ */
  .btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--r-full);
    font-size: var(--fs-0); font-weight: 600; letter-spacing: -0.01em;
    transition: transform var(--d-press) var(--ease-out),
                box-shadow var(--d-hover) var(--ease),
                background-color var(--d-hover) var(--ease),
                border-color var(--d-hover) var(--ease),
                color var(--d-hover) var(--ease);
  }
  .btn svg { width: 15px; height: 15px; flex: none; }
  .btn svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .btn:active { transform: scale(0.97); }

  .btn-primary {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: var(--sh-1), inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
      box-shadow: var(--sh-2), inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
    }
  }
  .btn-ghost {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1), var(--hair);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover { border-color: var(--line-2); }
  }
  .btn .arrow { transition: transform var(--d-pop) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover .arrow { transform: translateX(2px); }
  }

  /* ---- Hero ------------------------------------------------------------ */
  .hero {
    position: relative;
    padding-block: clamp(36px, 6vw, 76px) clamp(40px, 6vw, 64px);
    isolation: isolate;
    /* 只裁横向：极光横跨整幅（.hero 是全宽的），纵向越界留给光晕本身。
       两个轴一起裁会把代码窗口的大范围下投影切在底边上。 */
    overflow-x: clip;
    overflow-y: visible;
  }
  .hero-glow {
    position: absolute; inset: -14% 0;
    z-index: -1; pointer-events: none;
    background:
      radial-gradient(34% 40% at 22% 26%, color-mix(in srgb, var(--accent) var(--glow-a), transparent), transparent 70%),
      radial-gradient(30% 38% at 80% 12%, color-mix(in srgb, var(--teal) var(--glow-b), transparent), transparent 72%);
    mask-image: radial-gradient(78% 72% at 50% 44%, #000 44%, transparent 100%);
    -webkit-mask-image: radial-gradient(78% 72% at 50% 44%, #000 44%, transparent 100%);
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-glow { display: none; }
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
  }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: var(--fs--1);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: var(--sp-4);
  }
  .eyebrow .live {
    width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: var(--teal);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent);
    animation: pulse 2.6s var(--ease-in-out) infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent); }
    55%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 0%, transparent); }
  }

  .hero-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
  .hero-name {
    display: block;
    font-size: var(--fs-5); font-weight: 800;
    line-height: 0.98; letter-spacing: -0.05em;
    text-wrap: balance;
  }
  .hero-alias {
    display: block;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem);
    font-weight: 400; line-height: 1;
    letter-spacing: -0.01em;
    color: var(--accent);
    opacity: 0.9;
    padding-left: 2px;
  }
  .hero-copy .lead {
    font-size: var(--fs-1); color: var(--ink-2);
    max-width: 30em; margin-bottom: var(--sp-5);
    text-wrap: pretty;
  }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

  /* ---- 代码窗口 -------------------------------------------------------- */
  .code-window {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3), var(--hair);
    overflow: hidden;
  }
  .code-header {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .code-header .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .code-header .dot.red { background: #FF5F57; }
  .code-header .dot.yellow{ background: #FEBC2E; }
  .code-header .dot.green { background: #28C840; }
  .code-title {
    margin-left: 8px; font-family: var(--font-mono);
    font-size: 0.74rem; color: var(--ink-3); letter-spacing: -0.01em;
  }
  .code-body {
    padding: 18px 20px 20px;
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 2.9vw, 0.86rem);
    line-height: 1.85;
    white-space: pre;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .code-body code { display: block; font-family: inherit; }
  /* 空行也要占住行高：打字机是先空一块再往里填字 */
  .code-line { display: block; min-height: 1.85em; }
  .code-comment { color: var(--ink-3); }
  .code-num { color: var(--accent); margin-right: 8px; }
  .code-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
    font-size: 0.92em;
    margin-right: 6px;
  }
  /* 标签那一行不是文本（是元素），没法逐字打，只做整体淡入。
     默认可见：禁用 JS 或减弱动效时看到的是完整内容；
     只有在打字机跑起来的那段时间才由 .is-typing 把它藏起来。 */
  .code-tags-line { transition: opacity var(--d-pop) var(--ease-out); }
  .code-body.is-typing .code-tags-line { opacity: 0; }
  .caret {
    display: inline-block; width: 7px; height: 1.05em;
    vertical-align: -0.16em; margin-left: 2px;
    background: var(--accent); opacity: 0.85;
    animation: blink 1.1s step-end infinite;
  }
  @keyframes blink { 0%, 50% { opacity: 0.85; } 50.01%, 100% { opacity: 0; } }

  /* ---- 步骤卡片 -------------------------------------------------------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--sp-4);
  }
  .step-card {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: 22px 24px;
  }
  .step-num {
    font-family: var(--font-mono); font-size: var(--fs--1); font-weight: 600;
    color: var(--accent); font-variant-numeric: tabular-nums;
    padding-top: 3px; flex: none;
  }
  .step-card h3 { font-size: var(--fs-1); font-weight: 700; letter-spacing: -0.018em; margin-bottom: 3px; }
  .step-card p { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; }

  /* ---- 下载页 ---------------------------------------------------------- */
  .page-meta {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-6);
  }
  .page-meta .sec-head { margin-bottom: 6px; }
  .page-meta .muted { margin-top: 2px; }

  .pill {
    font-family: var(--font-mono); font-size: var(--fs--1);
    padding: 4px 12px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    color: var(--teal);
    border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
    font-weight: 500;
    white-space: nowrap; flex-shrink: 0;
  }
  .pill-error {
    background: color-mix(in srgb, var(--warm) 13%, transparent);
    color: var(--warm);
    border-color: color-mix(in srgb, var(--warm) 30%, transparent);
  }

  .systems {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--sp-4);
  }
  /* .card 只负责「表面」，内距由各自组件给 —— 下载卡忘了会给成贴边框 */
  .systems .card { padding: clamp(22px, 2.6vw, 28px); }
  .card-head {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    position: relative;
  }
  /* 品牌图标固定坐在浅色底座上，深浅色都不改 —— 品牌色需要稳定的背板 */
  .card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, var(--icon-chip-1), var(--icon-chip-2));
    box-shadow: 0 1px 2px rgba(12, 13, 17, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .card-icon svg { display: block; width: 30px; height: 30px; }
  .card h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -0.022em; margin-bottom: 3px; }
  .card h3 {
    font-family: var(--font-mono); font-size: var(--fs--1);
    font-weight: 400; color: var(--ink-3);
  }
  /* 整卡压暗表示「这个平台暂时没有产物」。
     不要再给里面的灰态药丸叠一层 opacity —— 两层相乘会低到读不出字。 */
  .card-empty { opacity: 0.72; }
  .card-empty .glow { display: none; }

  .formats {
    display: flex; flex-wrap: wrap; gap: 9px;
    position: relative;
  }
  /* 下载直链是这一页的主体动作，用强调色的浅底药丸；
     实心强调色留给 hero 那一个主 CTA，不然一屏全是实心按钮。 */
  .formats a {
    padding: 8px 16px;
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
    font-family: var(--font-mono);
    font-size: var(--fs--1); font-weight: 600;
    transition: transform var(--d-press) var(--ease-out),
                border-color var(--d-hover) var(--ease),
                background-color var(--d-hover) var(--ease);
  }
  @media (hover: hover) and (pointer: fine) {
    .formats a:hover {
      border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
      background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    }
  }
  .formats a:active { transform: scale(0.97); }

  /* 无直链时渲染的是 <span>，不是假链接 —— 选择器不能再写 a.disabled，
     否则既不灰、又仍然像能点（光标还是箭头）。 */
  .formats .disabled {
    color: var(--ink-2);
    background: var(--surface-2);
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
  }
  .formats .disabled:active { transform: none; }
}

/* --------------------------------------------------------------- motion -- */
/* 这一层是空的：子站换页和主站一样不做任何过场。
   之前用 ghost 克隆层做交叉淡出 + translateY，克隆层是「已经画出来的东西」，
   被打断就会在屏幕上留残影。五页不到的站 + 空闲预取，不加过场反而更快。 */
@layer motion {
}

/* ----------------------------------------------------------------- a11y -- */
@layer a11y {
  /* 减弱动效 ≠ 没有反馈：位移、缩放收掉，靠透明度和颜色说话 */
  @media (prefers-reduced-motion: reduce) {
    .hero-glow { display: none; }
    .card:hover, .step-card:hover { transform: none; }
    .eyebrow .live { animation: none; }
    .caret { animation: none; opacity: 0.85; }
  }

  /* 半透明材质变实心：字要先看得清 */
  @media (prefers-reduced-transparency: reduce) {
    .nav::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
    .nav::after { display: none; }
    .noise { display: none; }
  }

  @media (prefers-contrast: more) {
    :root {
      --line: color-mix(in srgb, var(--ink) 42%, transparent);
      --line-2: color-mix(in srgb, var(--ink) 62%, transparent);
    }
    .noise { display: none; }
  }
}

/* ------------------------------------------------------------- 响应式 -- */
@layer comp {
  @media (max-width: 880px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 40px); }
    .hero-glow { inset: -10% 0; }
  }
  @media (max-width: 560px) {
    .nav-inner { padding-inline: 14px; gap: 8px; }
    .brand span { display: none; }
    .nav-links { --nl-px: 10px; --nl-fs: 0.8rem; }
    .page-meta { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 360px) {
    .nav-links { --nl-px: 7px; }
  }
}