/* ============================================================ 机宇Agent · 视觉系统 v4 方向：把散落的东西编成一条路 —— 编号、序列、满幅细线 参照 vercel.com 的「强度」（留白、字距、明暗交替）， 不复用它的标识与图形语言：这里的标记是三条渐次对齐的线。 ============================================================ */ :root{ --r-s:6px; --r-m:10px; --r-l:18px; --e-out:cubic-bezier(.16,1,.3,1); --t-fast:.18s; --t:.4s; --nav:60px; --pad:clamp(20px,4.6vw,64px); --max:1360px; } *,*::before,*::after{box-sizing:border-box} html{background:var(--paper);-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; font-size:15.5px;line-height:1.7;letter-spacing:-.006em; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} img{display:block;max-width:100%} ::selection{background:var(--ink);color:var(--paper)} :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px} /* ── 版心与满幅线 ── */ .shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .hair{height:1px;background:var(--hair);border:0;margin:0} .band{border-top:1px solid var(--hair)} .band-dark{background:var(--void);color:var(--void-ink)} .band-dark .hair{background:var(--void-hair)} /* ── 字阶 ── */ h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.055em;line-height:.98;text-wrap:wrap} .d1{font-size:clamp(26px,3.4vw,46px)} .d2{font-size:clamp(23px,2.9vw,38px);line-height:1.02} .d3{font-size:clamp(21px,2.5vw,32px);line-height:1.06;letter-spacing:-.045em} .h-s{font-size:clamp(17px,1.7vw,21px);line-height:1.2;letter-spacing:-.035em} .lead{color:var(--ink-2);font-size:clamp(16px,1.35vw,19px);line-height:1.62;letter-spacing:-.012em} .band-dark .lead{color:var(--void-ink-2)} .mono,.meta,.idx{ font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;letter-spacing:.02em; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--hair-2)} .band-dark .eyebrow{color:var(--void-ink-2)} .band-dark .eyebrow::before{background:var(--void-hair)} /* ── 标记：三条渐次对齐的线 ── */ .mark{display:inline-flex;flex-direction:column;gap:2.5px;width:16px;flex:none} .mark i{display:block;height:2px;background:currentColor;border-radius:1px} .mark i:nth-child(1){width:8px} .mark i:nth-child(2){width:12px} .mark i:nth-child(3){width:16px} .wordmark{display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:-.03em} /* ── 顶栏 ── */ .nav{ position:sticky;top:0;z-index:80;height:var(--nav);display:flex;align-items:center; background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;transition:border-color var(--t) var(--e-out); } .nav.is-stuck{border-bottom-color:var(--hair)} .nav-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .nav-links{display:flex;align-items:center;gap:4px;min-width:0;scrollbar-width:none} .nav-links::-webkit-scrollbar{display:none} .nav-links a{ position:relative;flex:none;height:30px;display:inline-flex;align-items:center;padding:0 10px; border-radius:var(--r-s);color:var(--ink-2);font-size:13.5px;white-space:nowrap; transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out); } .nav-links a:hover{color:var(--ink);background:var(--hover-surface)} .nav-links a[aria-current]{color:var(--ink);font-weight:500} /* ── 顶栏下拉：必看资源 ── 照 lovable.dev 的下拉量着做的：一个 20px 圆角的外壳铺浅色底， 左半边盖一块 19px 圆角的卡片色 —— 两区的深浅差就这么来的，不画分隔线。 阴影是七层很紧的叠加（不是一团大模糊），条目之间只留 2px， 悬浮只变字色、不加底色。 选择器都带 .nav-links 前缀：上面 `.nav-links a` 是 inline-flex + 定高， 权重比单个 class 高，不压住的话标题和说明会挤成一行。 */ .nav-drop{position:relative;flex:none} .nav-links .nav-drop-t{ /* 旁边几项是 ，这个是