/* ══════════════════════════ TOKENS ══════════════════════════ */ :root{ --canvas:#fbfbfa; --surface:#fff; --surface-2:#f6f6f4; --surface-3:#efefec; --ink:#18181b; --ink-2:#52525b; --ink-3:#7c7c85; --line:#e6e6e1; --line-2:#d8d8d2; --accent:#0e6e62; --accent-soft:#e9f2f0; --accent-line:#b9d6d0; --accent-ink:#0b574d; --ochre:#96620a; --ochre-soft:#fbf3e2; --ochre-line:#ecd9a8; --brick:#a93226; --brick-soft:#fbedeb; --brick-line:#f0cdc7; --solid:#18181b; --solid-ink:#fbfbfa; --solid-hover:#000; --ring:rgba(14,110,98,.28); --lift:0 1px 2px rgba(24,24,27,.05); --pop:0 4px 6px -2px rgba(24,24,27,.06),0 12px 28px -8px rgba(24,24,27,.14); --r:6px; --r-md:8px; --r-lg:10px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB", "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono", "PingFang SC",monospace; --ease:cubic-bezier(.16,1,.3,1); } :root[data-theme="dark"]{ --canvas:#0c0c0d; --surface:#131315; --surface-2:#17171a; --surface-3:#1f1f23; --ink:#f4f4f2; --ink-2:#a1a1a8; --ink-3:#7a7a82; --line:#232327; --line-2:#2e2e34; --accent:#4cc0a8; --accent-soft:#0f2320; --accent-line:#1f4a41; --accent-ink:#6fd4be; --ochre:#d9a441; --ochre-soft:#231b0c; --ochre-line:#453413; --brick:#e0776b; --brick-soft:#25120f; --brick-line:#492420; --solid:#f4f4f2; --solid-ink:#131315; --solid-hover:#fff; --ring:rgba(76,192,168,.32); --lift:0 1px 2px rgba(0,0,0,.4); --pop:0 4px 8px -2px rgba(0,0,0,.5),0 16px 40px -12px rgba(0,0,0,.7); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--canvas);color:var(--ink);font-size:13.5px; line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer;text-align:left} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} ::selection{background:var(--accent-soft);color:var(--accent-ink)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ══════════════════════════ TYPE ══════════════════════════ */ .display{font-size:40px;font-weight:600;letter-spacing:-.032em;line-height:1.08} .h2{font-size:15px;font-weight:600;letter-spacing:-.012em} .h3{font-size:13.5px;font-weight:600} .lede{font-size:13.5px;color:var(--ink-2);line-height:1.65;max-width:64ch} .micro{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:-.01em} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .dim{color:var(--ink-3)} .tls{font-size:11.5px;color:var(--ink-3);line-height:1.55} /* ══════════════════════════ SHELL ══════════════════════════ */ .app{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100dvh} .rail{border-right:1px solid var(--line);background:var(--surface);position:sticky;top:0; height:100dvh;overflow-y:auto;display:flex;flex-direction:column;padding:14px 10px 12px} /* 窄屏：左栏变抽屉，#menu-btn 拉出、#scrim 收回。以前这里是 display:none —— 页面上不剩任何一个能换页的东西。宽屏下同一颗按钮把左栏收起／放回来。 */ #menu-btn{display:grid} /* 收起来的时候那一栏连格子都不占。只在宽屏生效 —— 窄屏它已经是抽屉了（下面 那条 media），再叠一层 display:none 就等于把抽屉也锁死。 */ @media(min-width:1001px){ html[data-rail="off"] .app{grid-template-columns:minmax(0,1fr)} html[data-rail="off"] .rail{display:none} } .scrim{position:fixed;inset:0;z-index:60;background:rgba(24,24,27,.34)} @media(max-width:1000px){ .app{grid-template-columns:1fr} #menu-btn{display:grid} .rail{position:fixed;left:0;top:0;bottom:0;z-index:70;width:246px; transform:translateX(-102%);transition:transform .18s var(--ease)} .rail.open{transform:none;box-shadow:var(--pop)} } .mark{display:flex;align-items:center;gap:9px;padding:4px 8px 14px} /* 主动作。导航行都是素的，这一颗有边框有底 —— 它是「做一件事」，不是「去一页看看」 */ .rail-new{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;margin-bottom:2px; text-decoration:none;cursor:pointer; border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface); color:var(--ink);font-size:13px;font-weight:550;box-shadow:var(--lift); transition:background .13s var(--ease),border-color .13s var(--ease)} .rail-new svg{width:15px;height:15px;flex:none;opacity:.72} .rail-new:hover{background:var(--surface-2)} .rail-new[aria-current="page"]{background:var(--surface-3);border-color:transparent; box-shadow:none;font-weight:600} .rail-new[aria-current="page"] svg{opacity:1} .mark-sq{width:22px;height:22px;border-radius:5px;background:var(--solid);flex:none; display:grid;place-items:center;color:var(--solid-ink)} .mark-sq svg{width:12px;height:12px} .mark b{font-size:13px;font-weight:600;letter-spacing:-.015em} .rail-sec{padding:13px 8px 5px} /* 导航行是 （各自有地址，见 30-state.js 的 VIEW_PATH）—— 但它读起来是一行 导航，不是正文里的一条链接，所以不带下划线。#rest-btn 还是