/* ════════════════════════════════════════════════════════════════════════
   Rano 官网设计系统 v2（2026-10-05 首页产品页改版）

   唯一色源 = LOGO 母版三色 + 客户端落地实测色阶
     harness/rano-desktop/src/style.css  @theme  --brand-* / --warm-*

   纪律（抄客户端，规格见 openspec/changes/composer-and-brand-tokens）：
     · 色相预算 ≤ 2（不含中性）：品牌青只承载「当前/生效/选中/焦点」；
       警示暖只承载「越阈值/需确认/失败」。**绿色不作为状态色存在。**
     · 主操作无彩化：墨实心 #F2F4F5 + 字 #1A1D1F（青不做大面积实心）
     · 文字三级 = 同一基色的 alpha 阶梯（不引入新颜色）
     · 字号阶梯收窄；正文 ≥ 4.5:1，图形 ≥ 3:1

   本文件不含 Tailwind 工具类依赖（static 构建里没有新类），全部自持。
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 底与面（深色 Graphite 高对比档：官网比客户端更深一档，为沉浸让位） ── */
  --base: #03070e;
  --panel: #13181B;
  --surface: #1B2226;
  --hover: #232B30;
  --sel: #263038;

  /* ── 边框 ── */
  --bd: rgba(255, 255, 255, .10);
  --bd-dim: rgba(255, 255, 255, .05);

  /* ── 文字三级（alpha 阶梯） ──
     fg-2 = 客户端落地值 rgb(232 236 239 / .60) 逐位照搬。
     fg-3 = **刻意不从客户端照搬**：客户端在 #0E1113 上取 .40，本页底更深（#03070e）
     且卡片底更浅（#1B2226），实测 .40 只有 3.32–3.41:1，不过 AA 正文门槛 4.5。
     核算后取 .56 —— 最差底（卡片 #1B2226）5.20:1 达标，与 fg-2 的 6.31 保持可辨。
     alpha → 对比度：.40=3.4 / .50=4.4 / .54=4.9 / .56=5.2 / .60=5.8（最差底实测） */
  --fg1: #E8ECEF;
  --fg2: rgb(232 236 239 / .60);
  --fg3: rgb(232 236 239 / .56);

  /* ── 品牌锚（与客户端逐位一致） ── */
  --brand: #5EB3BF;        /* LOGO 断口点原值 · 深底 7.83:1 */
  --brand-strong: #7CC6D1; /* hover / 强调加强 · 深底 9.79:1 */
  --brand-line: rgba(94, 179, 191, .28);

  /* ── 警示暖（红已并入本族，不占独立色相） ── */
  --warm: #FB923C;         /* 深底 8.37:1 */
  --warm-2: #FDBA74;       /* 深底 11.24:1 */

  /* ── 主操作（无彩墨实心） ── */
  --ink: #F2F4F5;
  --ink-fg: #1A1D1F;

  /* ── 字体 ── */
  --sans: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "SF Mono", monospace;

  /* ── 圆角三级（客户端语义：钮 6 / 卡 8 / 弹窗 12 / 气泡 14） ── */
  --r-btn: 6px;
  --r-card: 8px;
  --r-win: 12px;
  --r-bub: 14px;

  --maxw: 1120px;
}

/* ══ 基础 ══ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--fg1);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 防 FOUC（各页 <head> 内联脚本加 tw-ready；本页保留同一契约） */
body { visibility: hidden; }
body.tw-ready { visibility: visible; }

::selection { background: rgba(94, 179, 191, .28); color: #fff; }

/* Firefox / WebKit 滚动条统一克制样式 */
* { scrollbar-width: thin; scrollbar-color: #1e2c31 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--base); }
::-webkit-scrollbar-thumb { background: #1e2c31; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #274046; }

a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--mono); }
img, svg { display: block; max-width: 100%; }

/* 背景层：深海垂直渐变（静态，无 canvas 依赖 —— 动效下一步加） */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 76% 52% at 50% -8%, rgba(22, 66, 98, .55), transparent 66%),
    radial-gradient(ellipse 58% 42% at 86% 104%, rgba(10, 40, 70, .50), transparent 70%),
    linear-gradient(180deg, var(--base) 0%, #04101c 56%, #020609 100%);
}
/* 原子像素底纹 */
.sky::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(94, 179, 191, .14) 1px, transparent 1.6px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 94% 76% at 50% 16%, #000 24%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 94% 76% at 50% 16%, #000 24%, transparent 74%);
}

/* 内容层 */
.page { position: relative; z-index: 2; padding-top: 56px; }   /* 56 = 导航高 */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ══ 导航（site.js 注入；类名契约保持 nav-blur / nav-link / nav-logo） ══ */
.nav-blur {
  background: rgba(3, 7, 14, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd-dim);
}
.nav-link { color: var(--fg2); transition: color .18s, background .18s; }
.nav-link:hover { color: var(--brand-strong); background: rgba(94, 179, 191, .08); }
.nav-link.active { color: var(--brand-strong); background: rgba(94, 179, 191, .16); font-weight: 600; }

/* 断环点 logo 动画（保留原类名，site.js 注入的 SVG 直接生效） */
@keyframes markSpin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes dotGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(94,179,191,.75)) } 50% { filter: drop-shadow(0 0 16px rgba(127,199,211,.95)) } }
@keyframes ringBreath { 0%,100% { stroke-opacity: .82 } 50% { stroke-opacity: 1 } }
.logo-mark { transform-box: fill-box; transform-origin: center; }
.logo-ring { animation: ringBreath 4.2s ease-in-out infinite; }
.logo-dot { animation: dotGlow 3.6s ease-in-out infinite; }
.nav-logo:hover .logo-mark { animation: markSpin 1.1s cubic-bezier(.4,.1,.2,1); }

/* ══ 按钮（唯一主操作 = 墨实心；青不做大面积） ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1;
  border-radius: var(--r-btn); border: 1px solid transparent;
  padding: 12px 22px; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background .18s, border-color .18s, color .18s;
}
.btn-primary { background: var(--ink); color: var(--ink-fg); }
.btn-primary:hover { background: #fff; }
.btn-ghost { border-color: var(--bd); color: var(--fg1); background: transparent; }
.btn-ghost:hover { border-color: var(--fg2); background: rgba(255, 255, 255, .04); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.magnetic { will-change: transform; }

/* ══ 区块通用 ══ */
section { padding: 96px 0; }
section.tight { padding: 72px 0; }

/* 区块标签（ASCII 感，保留原 sec-tag 契约） */
.sec-tag {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--brand);
}
.sec-tag::before { content: '> '; color: rgba(94, 179, 191, .45); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
/* WCAG 1.4.12：区块大标题是长句，行高按段落门槛给（1.25 会让两行标题贴在一起） */
.h-sec { font-size: 30px; margin-top: 12px; line-height: 1.4; }
.h-sub { font-size: 15px; color: var(--fg2); margin-top: 12px; max-width: 640px; line-height: 1.75; }

/* 入场揭示（IO 驱动；site.js 已有 revealAll 兜底，本页保留同一契约） */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s } .rv-d2 { transition-delay: .14s } .rv-d3 { transition-delay: .21s }

/* 卡片 */
.card {
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--bd-dim);
  border-radius: var(--r-card);
  padding: 20px;
  transition: border-color .22s, background .22s;
}
.card:hover { border-color: var(--bd); background: rgba(255, 255, 255, .035); }
.card h3 { font-size: 15px; margin-bottom: 8px; }
.card p { font-size: 13px; color: var(--fg2); line-height: 1.7; margin: 0; }
.card .cap { font-family: var(--mono); font-size: 12px; color: var(--fg2); letter-spacing: .06em; }

.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* ══════════════════════════════════════════════════════════════════════
   产品窗口（1:1 复刻 Rano Work；真 token / 真命令 / 真数据）
   ══════════════════════════════════════════════════════════════════════ */
.win-holder { display: flex; justify-content: center; }
.win-scale { transform-origin: top center; }
.win {
  width: 1000px; height: 620px;
  background: #0E1113;                                   /* 客户端 bg-base，逐位一致 */
  border: 1px solid var(--bd); border-radius: var(--r-win);
  overflow: hidden; display: flex;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(94, 179, 191, .05);
  font-size: 14px; line-height: 1.5; position: relative;
}

/* 侧栏 */
.win-side {
  width: 196px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--bd-dim);
}
.win-newsess {
  height: 32px; margin: 10px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--fg1);
}
.win-plabel { padding: 9px 12px 5px; font-size: 12px; color: var(--fg2); letter-spacing: .06em; }
.win-prow { display: flex; align-items: center; gap: 5px; padding: 5px 12px 0; font-size: 12px; color: var(--fg2); }
.win-srow {
  height: 26px; margin: 0 8px; padding: 0 7px; border-radius: 5px;
  display: flex; align-items: center; gap: 6px;
}
.win-srow.on { background: var(--sel); }
.win-srow .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgb(232 236 239 / .20); }
.win-srow.on .d { background: var(--brand); }
.win-srow .t { flex: 1; min-width: 0; font-size: 12px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-srow.on .t { color: var(--fg1); }
.win-srow .m { font-size: 12px; color: var(--fg3); flex-shrink: 0; }
.win-srow.on .m { color: var(--brand); }
.win-foot {
  margin-top: auto; padding: 9px 12px; border-top: 1px solid var(--bd-dim);
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg2);
}
.win-foot .d { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.win-foot .ms { margin-left: auto; font-family: var(--mono); color: var(--fg3); }

/* 对话区 */
.win-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.win-flow { flex: 1; padding: 13px 26px 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }

.bub-user {
  align-self: flex-end; max-width: 78%;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-win); border-top-right-radius: 3px;   /* 客户端：右上 2px 切角 */
  padding: 9px 14px; font-size: 14px; color: var(--fg1);
}
.msg-a { align-self: flex-start; max-width: 88%; margin-top: 4px; font-size: 14px; color: var(--fg1); }
.think { display: flex; align-items: center; gap: 6px; font-size: 13px; font-style: italic; color: var(--fg3); margin-bottom: 3px; }
.think .spin {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1.5px solid rgb(232 236 239 / .25); border-top-color: var(--brand);
  animation: spin 1.05s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.trow { display: flex; align-items: center; gap: 8px; height: 20px; }
.trow .ico { width: 14px; text-align: center; font-size: 11px; flex-shrink: 0; color: var(--brand); }
.trow .nm { font-family: var(--mono); font-size: 13px; color: var(--brand-strong); }
.trow .st { font-size: 12px; color: var(--fg2); }

/* 五步骨架卡 */
.skel {
  margin-top: 7px; padding: 7px 11px;
  border: 1px solid var(--bd); border-radius: var(--r-card);
  background: rgba(255, 255, 255, .022);
}
.skel-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--fg1);
  padding-bottom: 5px; margin-bottom: 4px;
  border-bottom: 1px solid var(--bd-dim);
}
.skel-head .meta { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--fg2); }
.skel-row { display: flex; gap: 9px; padding: 3.5px 0; align-items: baseline; }
.skel-row .no { width: 12px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--fg3); }
.skel-row .act { width: 46px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--fg2); }
.skel-row .body { flex: 1; min-width: 0; font-size: 13px; color: var(--fg1); line-height: 1.45; }

.msg-a .verdict { margin-top: 9px; font-size: 14px; line-height: 1.55; }
.msg-a .verify { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--fg2); }
.msg-a .verify code { font-size: 12px; color: var(--fg1); }
.msg-a .act-line { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.msg-a .act-line code { font-family: var(--mono); font-size: 12px; }
.msg-a .ask { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fg2); }

/* 输入条 */
.win-comp { padding: 0 26px 11px; }
.win-comp .box {
  display: flex; align-items: center; gap: 10px; padding: 8px 13px;
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-win);
}
.win-comp .ph { font-size: 13px; color: var(--fg2); }
.win-comp .key { font-family: var(--mono); font-size: 12px; color: var(--fg2); }
.win-comp .send {
  margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-card);
  background: var(--ink); color: var(--ink-fg); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* ══ HERO ══ */
/* 首屏配额（1440×900）：导航 56 + 标题组 + 主操作 + 窗口，必须让主操作落在折叠线内。
   实测基线：主操作 top=734 完整可见；窗口底 900 恰好齐平折叠线（窗口本身是"证明"，
   允许齐平，但**主操作不允许**——访客不该先滚动才知道能下载）。 */
.hero { padding: 34px 0 72px; }
.hero .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--brand);
  text-align: center;
}
.hero h1 { font-size: 42px; text-align: center; margin-top: 12px; letter-spacing: -.02em; }
.hero .lede { font-size: 15px; color: var(--fg2); text-align: center; margin-top: 10px; line-height: 1.7; }
.hero .cta { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.hero .win-holder { margin-top: 26px; }
.hero .stats {
  display: flex; gap: 34px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px; font-size: 13px; color: var(--fg2);
}
.hero .stats b { color: var(--fg1); font-weight: 700; font-size: 16px; }
.hero .stats span { font-family: var(--mono); font-size: 12px; margin-left: 5px; }

/* ══ 工具分组 ══ */
.tool-group + .tool-group { margin-top: 28px; }
.tool-group > .glabel {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--fg1); margin-bottom: 12px;
}
/* 分组副标：12px 小字必须过 AA 4.5:1（fg-3 只有 4.52:1 且实测 3.34 是旧值，统一用 fg-2 更稳） */
.tool-group > .glabel em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--fg2); }
.tool {
  border: 1px solid var(--bd-dim); border-radius: var(--r-card);
  padding: 12px 14px; background: rgba(255, 255, 255, .02);
  transition: border-color .2s, background .2s;
}
.tool:hover { border-color: var(--brand-line); background: rgba(94, 179, 191, .05); }
.tool .nm { font-family: var(--mono); font-size: 13px; color: var(--brand-strong); }
.tool .ds { font-size: 12px; color: var(--fg2); line-height: 1.6; margin-top: 5px; }

/* ══ 分层（客户端 / 服务端） ══ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.layer-col { border: 1px solid var(--bd-dim); border-radius: var(--r-card); padding: 20px; background: rgba(255, 255, 255, .02); }
.layer-col h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.layer-col h3 .tag { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--fg2); }
.layer-col ul { list-style: none; margin: 14px 0 0; padding: 0; }
.layer-col li { font-size: 13px; color: var(--fg2); line-height: 1.6; padding: 6px 0 6px 16px; position: relative; }
.layer-col li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 1px; background: var(--fg3); }
.layer-col li b { color: var(--fg1); font-weight: 600; }
.layer-col .why { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bd-dim); font-size: 12px; color: var(--fg3); line-height: 1.65; }

/* ══ 诊断 SOP ══ */
.sop { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.sop-list { border: 1px solid var(--bd-dim); border-radius: var(--r-card); overflow: hidden; }
.sop-list .item {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-bottom: 1px solid var(--bd-dim); font-size: 13px; color: var(--fg2);
}
.sop-list .item:last-child { border-bottom: none; }
.sop-list .item.on { background: rgba(94, 179, 191, .07); color: var(--fg1); font-weight: 600; }
.sop-list .item .k { font-family: var(--mono); font-size: 12px; color: var(--fg2); }
.sop-list .item.on .k { color: var(--brand); }

.sop-detail { border: 1px solid var(--bd-dim); border-radius: var(--r-card); padding: 18px 20px; background: rgba(255, 255, 255, .02); }
.sop-detail .head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--bd-dim); }
.sop-detail .head b { font-size: 15px; }
.sop-detail .head .meta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--fg2); }
.slot { display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bd-dim); }
.slot:last-child { border-bottom: none; }
.slot .kind { font-family: var(--mono); font-size: 12px; color: var(--fg2); padding-top: 2px; }
.slot .tmpl { font-size: 12px; color: var(--fg3); font-family: var(--mono); }
.slot .real { font-size: 13px; color: var(--fg1); margin-top: 3px; line-height: 1.5; }
.slot .real code { font-size: 12px; color: var(--brand-strong); }

/* ══ 产物 ══ */
.artifacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.artifact { border: 1px solid var(--bd-dim); border-radius: var(--r-card); overflow: hidden; background: rgba(255, 255, 255, .02); }
.artifact .bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--bd-dim);
  font-family: var(--mono); font-size: 12px; color: var(--fg2);
}
.artifact .bar .ext { margin-left: auto; color: var(--fg2); }
.artifact pre {
  margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.8;
  color: var(--fg2); overflow-x: auto; max-height: 168px;
}
.artifact pre .k { color: var(--brand-strong); }
.artifact pre .hi { color: var(--fg1); }

/* ══ 接入 ══ */
.access-primary {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  border: 1px solid var(--bd); border-radius: var(--r-card);
  padding: 26px 28px; background: rgba(94, 179, 191, .05);
}
.access-primary h3 { font-size: 19px; }
.access-primary p { font-size: 13.5px; color: var(--fg2); margin-top: 8px; line-height: 1.7; max-width: 560px; }
.access-minor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.access-minor .card h3 { font-family: var(--mono); font-size: 13px; color: var(--brand-strong); }
.access-minor .card p { font-size: 12.5px; }

/* ══ 页脚 ══ */
footer.site-foot {
  border-top: 1px solid var(--bd-dim); margin-top: 24px;
  background: rgba(3, 7, 14, .6);
}
.site-foot .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 28px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg3);
}
.site-foot .brand { display: flex; align-items: center; gap: 9px; font-family: var(--mono); }
.site-foot nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
/* WCAG 2.5.8：footer 链接是触摸目标，给足 24×24（原 24×19.8 不达标） */
.foot-link {
  color: var(--fg2); display: inline-flex; align-items: center;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-btn);
  transition: color .18s, background .18s;
}
.foot-link:hover { color: var(--brand-strong); background: rgba(94, 179, 191, .08); }

/* ══ 工具类（自持，不依赖 Tailwind） ══ */
.mono { font-family: var(--mono); }
.muted { color: var(--fg2); }
.dim { color: var(--fg3); }
.brand { color: var(--brand-strong); }
.warm { color: var(--warm-2); }
.mt8 { margin-top: 8px } .mt12 { margin-top: 12px } .mt16 { margin-top: 16px }
.mt24 { margin-top: 24px } .mt32 { margin-top: 32px } .mt48 { margin-top: 48px }
.tc { text-align: center }

/* ══════════════════════════════════════════════════════════════════════
   site.js 导航兼容层 —— **必须保留**

   site.js 用 Tailwind 工具类渲染全站导航（w-7 h-7 / md:flex / px-3 …）。
   本页不引 /tailwind-static.css（它是按旧页面静态裁剪的产物，对新页面无意义），
   因此这些类必须在此逐条兑现；否则 SVG 无尺寸约束会撑成视口宽（实测 1440×1440、
   导航高 1510px 把整页顶下去）。

   改 site.js 的导航 markup 时，必须同步核对本段。
   ══════════════════════════════════════════════════════════════════════ */

/* 布局与定位 */
.fixed { position: fixed; }
.top-0 { top: 0 } .left-0 { left: 0 } .right-0 { right: 0 }
.z-50 { z-index: 50; }
.hidden { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.ml-2 { margin-left: 8px }
.ml-auto { margin-left: auto }
.gap-1 { gap: 4px } .gap-2 { gap: 8px } .gap-2\.5 { gap: 10px } .gap-4 { gap: 16px }
.h-14 { height: 56px; }

/* 导航 logo：site.js 传 class="w-7 h-7"（无 width/height 属性），必须给死尺寸 */
.w-7 { width: 28px; } .h-7 { height: 28px; }
.nav-logo svg { width: 28px; height: 28px; flex-shrink: 0; }

/* 字号字重 */
.text-xs { font-size: 12px; line-height: 1.5 }
.text-sm { font-size: 13px; line-height: 1.5 }
.text-base { font-size: 14px; line-height: 1.5 }
.font-medium { font-weight: 500 } .font-semibold { font-weight: 600 } .font-bold { font-weight: 700 }

/* 圆角 */
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }

/* 内边距 */
.px-3 { padding-left: 12px; padding-right: 12px }
.px-4 { padding-left: 16px; padding-right: 16px }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px }
.py-2 { padding-top: 8px; padding-bottom: 8px }

/* 任意值色 —— Tailwind 会把 [] 转义成 \[\]，这里给出等价选择器 */
.text-\[\#e8ecec\] { color: #e8ecec; }

/* 导航链接的站点覆盖（压过 .text-sm/.text-base，保持 14px 一档） */
.nav-link { font-size: 14px; }
.nav-logo span { font-size: 15px; }

/* md 断点（Tailwind md = 768px） */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:px-4 { padding-left: 16px; padding-right: 16px }
  .md\:px-5 { padding-left: 20px; padding-right: 20px }
  .md\:px-6 { padding-left: 24px; padding-right: 24px }
  .md\:text-sm { font-size: 13px; }
  .md\:text-lg { font-size: 17px; }
  .nav-logo span { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════
   响应式：1440 为设计基准
     1280 → 窗口开始等比缩放
      900 → 侧栏收窄，窗口继续缩
      760 → 单栏降级：窗口换卡片式，去掉侧栏与输入条
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .hero h1 { font-size: 40px; }
  .h-sec { font-size: 27px; }
}
@media (max-width: 1080px) {
  .hero h1 { font-size: 36px; }
  .h-sec { font-size: 24px; }
  section { padding: 76px 0; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .sop { grid-template-columns: 1fr; }
  .sop-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .sop-list .item { border-bottom: 1px solid var(--bd-dim); }
  .artifacts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .win-side { width: 150px; }
  .win-comp { padding: 0 16px 10px; }
  .win-flow { padding: 12px 16px 0; }
  .split, .access-minor { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page { padding-top: 52px; }
  .hero { padding: 34px 0 56px; }
  .hero h1 { font-size: 28px; }
  .hero .lede { font-size: 14px; }
  section { padding: 56px 0; }
  .h-sec { font-size: 21px; }
  .wrap { padding: 0 18px; }
  .g2, .g4 { grid-template-columns: 1fr; }
  .sop-list { grid-template-columns: 1fr; }
  .access-primary { grid-template-columns: 1fr; }
  .access-primary .btn { width: 100%; }
  /* 窗口降级：去侧栏与输入条，骨架卡铺满，字号回落一档 */
  .win { width: 100%; height: auto; }
  .win-side, .win-comp { display: none; }
  .win-flow { padding: 14px 16px 16px; gap: 6px; overflow: visible; }
  .bub-user { max-width: 100%; font-size: 13.5px; }
  .msg-a { max-width: 100%; font-size: 13.5px; }
  .skel-row { flex-wrap: wrap; gap: 6px; }
  .skel-row .act { width: auto; }
  .skel-row .body { flex: 1 0 100%; font-size: 12.5px; }
  .hero .stats { gap: 18px; }
}

/* 动效兜底：降低动态偏好下停掉全部动画，画面停在终帧 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}