/* Direction C · 开发者文档 (Stripe / Vercel / Linear / Josh Comeau) */
:root{
  --bg:#FFFFFF;--ink:#16181C;--ink-2:#30343B;--soft:#5E6573;--rule:#E7E9EE;--rule-strong:#CDD1D9;--panel:#F6F7F9;
  --accent:#3451D1;--accent-soft:#EEF1FD;--accent-line:#A9B6EE;--link:#2A44BE;--link-line:#B4C0F0;--sel:#DCE3FC;--focus:#3451D1;
  --font-body:"Inter Variable","PingFang SC","Noto Sans SC",system-ui,sans-serif;--font-head:var(--font-body);--font-ui:var(--font-body);
  --font-mono:"JetBrains Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-body:17px;--lh-body:1.8;--fs-h2:25.5px;--fs-h3:20.5px;--fs-small:14px;--fs-code:14px;--para:1em;
  --code-bg:#1B1E24;--code-tint:#F0F2F5;--code-soft:#9AA3B2;--code-ink:#E9ECF1;--code-rule:#2C313A;--code-radius:12px;
  --img-radius:8px;--callout-radius:10px;--scroll-pad:80px;
  --note-bg:#F1F4FE;--note-line:#DCE3FB;--note-ink:#2A44BE;
  --imp-bg:#F6F1FD;--imp-line:#E6DBFA;--imp-ink:#6533C4;
  --tip-bg:#EFF8F2;--tip-line:#D3EDDC;--tip-ink:#1E7343;
  --warn-bg:#FDF6EA;--warn-line:#F4E2BF;--warn-ink:#8A5A0B;--mark:#FCE9B4;--ext-line:#CDD1D9;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#101216;--ink:#E7E9ED;--ink-2:#C9CDD5;--soft:#959CA9;--rule:#242830;--rule-strong:#373C46;--panel:#171A20;
  --accent:#8EA2FF;--accent-soft:#1B2140;--accent-line:#4A5899;--link:#A7B6FF;--link-line:#4A5899;--sel:#2B3566;--focus:#8EA2FF;
  --code-bg:#16191E;--code-tint:#1F232A;--code-rule:#2A2F38;
  --note-bg:#151B30;--note-line:#25305A;--note-ink:#A7B6FF;
  --imp-bg:#1E1730;--imp-line:#342758;--imp-ink:#C6A8FF;
  --tip-bg:#122219;--tip-line:#1F3F2B;--tip-ink:#7FD3A0;
  --warn-bg:#241C0E;--warn-line:#44351A;--warn-ink:#E9C27A;--mark:#5A4712;--ext-line:#4A505C;
  color-scheme:dark;
}
body{font-feature-settings:"cv11","ss01"}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
.topbar-in{height:60px;padding:0 24px;display:flex;align-items:center;gap:24px;font-size:14.5px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:15.5px;text-decoration:none;color:var(--ink)}
.brand-mark{width:22px;height:22px}
.topbar nav{display:flex;gap:4px}
.topbar nav a{padding:6px 10px;border-radius:7px;text-decoration:none;color:var(--soft)}
.topbar nav a:hover{color:var(--ink);background:var(--panel)}
.topbar nav a[aria-current]{color:var(--ink)}
.topbar .spacer{flex:1}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);color:var(--ink-2);cursor:pointer}
.iconbtn:hover{border-color:var(--rule-strong);color:var(--ink)}
.iconbtn svg{width:18px;height:18px}
.gh{font-size:14px;color:var(--soft);text-decoration:none}
.gh:hover{color:var(--ink)}

.shell{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:1440px;margin:0 auto}
.side{position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto;border-right:1px solid var(--rule);padding:28px 20px 40px 24px;font-size:14px;line-height:1.45;scrollbar-width:thin}
.side-group{margin:0 0 22px}
.side-label{font-size:12.5px;font-weight:600;color:var(--soft);margin:0 0 8px;padding-left:10px}
.side-posts{list-style:none;margin:0;padding:0}
.side-posts>li>a{display:block;padding:7px 10px;border-radius:7px;text-decoration:none;color:var(--ink-2)}
.side-posts>li>a:hover{background:var(--panel);color:var(--ink)}
.side-posts>li>a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side .toc-list{margin:6px 0 10px 10px;padding-left:12px;border-left:1px solid var(--rule)}
.side .toc-list a{padding:5px 8px;border-radius:6px;font-size:13.5px}
.side .toc-list a:hover{background:var(--panel)}
.side .toc-list a[aria-current]{color:var(--accent);font-weight:550}
.side .t2>ul{display:none;padding-left:10px}
.side .t2.is-open>ul{display:block}
.side .t3 a{font-size:13px}
.side .tnum{color:var(--soft);margin-right:.45em;font-variant-numeric:tabular-nums}
.side .t2>a[aria-current] .tnum,.side .t3>a[aria-current] .tnum{color:inherit}

.main{min-width:0;padding:44px 56px 96px}
.doc{max-width:1000px;margin:0 auto}
.doc>*:not(.doc-head){max-width:720px}
.crumbs{font-size:13.5px;color:var(--soft);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--soft)}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:14px;height:14px;opacity:.6}
.doc h1{font-size:42px;line-height:1.25;font-weight:700;letter-spacing:-0.01em;margin:14px 0 0;text-wrap:pretty}
.doc-head{max-width:1000px}
.doc-head .deck{max-width:720px}
.doc .deck{font-size:19px;line-height:1.7;color:var(--soft);margin:14px 0 0}
.metarow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:22px 0 0;padding-bottom:26px;border-bottom:1px solid var(--rule);font-size:14px;color:var(--soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--rule);color:var(--ink-2)}
.schematic{margin:28px 0 0;border:1px solid var(--rule);border-radius:12px;background-color:var(--panel);background-image:radial-gradient(var(--rule-strong) 1px,transparent 1px);background-size:16px 16px;padding:18px 12px}
.schematic svg{display:block;width:100%;height:auto;max-height:230px}
.doc .prose{margin-top:36px}
.prose h2{padding-top:.2em}
.prose h2 .anchor,.prose h3 .anchor{position:absolute;left:-1.1em;margin:0;padding-right:.3em}
.prose .figure{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:14px}
.prose .figure img{background:#fff}
.prose .figure figcaption{margin:.6em 2px 0}
.figure--diagram{background:var(--panel)}
:root[data-theme=dark] .figure--diagram svg{filter:invert(.88) hue-rotate(180deg)}
.code-head{background:#22262D;min-height:40px}
:root[data-theme=dark] .code-head{background:#1C2026}
.code-tab{color:var(--code-ink);font-family:var(--font-mono);font-size:12.5px;padding:10px 2px 9px;border-bottom:2px solid var(--accent-line)}
.code-lang{text-align:right;padding-right:6px;font-size:12.5px}
.code-head .copy{color:var(--code-soft);border-color:#3A404B}
.code-head .copy:hover{color:var(--code-ink);border-color:#5A6170}
.codeblock .code-tab+.copy{margin-left:auto}
.prose .table-wrap{border:1px solid var(--rule);border-radius:10px}
.prose .table-wrap table{margin:0}
.prose .table-wrap tr:last-child td{border-bottom:0}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.pager a{display:block;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;text-decoration:none}
.pager a:hover{border-color:var(--accent-line)}
.pager span{display:block;font-size:13px;color:var(--soft)}
.pager strong{font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.5}
.pager .next{text-align:right}
.editrow{margin-top:28px;font-size:14px;color:var(--soft)}
.editrow a{color:var(--soft)}

/* home: an index list, not a card grid */
.home{max-width:880px;margin:0 auto;padding:12px 0}
.home h1{font-size:40px;line-height:1.25;font-weight:700;letter-spacing:-0.01em;margin:0}
.home .lede{font-size:19px;color:var(--soft);margin:12px 0 0;max-width:620px}
.cards{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--rule)}
.card{border-bottom:1px solid var(--rule)}
.card a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;padding:24px 0;text-decoration:none;color:inherit}
.card .schem{border:1px solid var(--rule);border-radius:10px;background-color:var(--panel);background-image:radial-gradient(var(--rule-strong) 1px,transparent 1px);background-size:12px 12px;padding:6px}
.card .schem svg{display:block;width:100%;height:auto}
.card h2{font-size:19px;line-height:1.45;font-weight:650;margin:0}
.card a:hover h2{color:var(--accent)}
.card p{font-size:15px;line-height:1.7;color:var(--soft);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:13px;margin-top:10px;display:block}
.recent{margin-top:48px}
.recent h2{font-size:15px;font-weight:650;margin:0 0 6px}
.recent ul{list-style:none;padding:0;margin:0}
.recent li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.recent a{text-decoration:none;color:var(--ink-2)}
.recent a:hover{color:var(--accent)}
.recent time{color:var(--soft);font-size:13.5px;font-variant-numeric:tabular-nums}
.recent .ext{width:12px;height:12px;margin-left:6px;color:var(--soft);vertical-align:-1px}
.foot{border-top:1px solid var(--rule);margin-top:72px;padding-top:20px;font-size:13px;color:var(--soft)}

@media (max-width:1100px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:32px 32px 80px}
  details.toc-mobile{display:block;margin:24px 0 0;padding:4px 16px;border:1px solid var(--rule);border-radius:12px;background:var(--panel)}
}
@media (max-width:640px){
  :root{--fs-body:16px;--fs-h2:22px;--fs-h3:18.5px;--code-radius-m:10px}
  .topbar-in{padding:0 16px;gap:12px}.topbar nav{display:none}.gh{display:none}
  .main{padding:24px 20px 64px}
  .doc h1,.home h1{font-size:29px;line-height:1.3}
  .doc .deck,.home .lede{font-size:17px}
  .prose h2 .anchor,.prose h3 .anchor{display:none}
  .prose .figure{padding:8px;border-radius:10px}
  .codeblock{margin-left:-4px;margin-right:-4px}
  .card a{grid-template-columns:1fr;gap:12px}.card .schem{max-width:260px}
  .pager{grid-template-columns:1fr}.pager .next{text-align:left}
  .recent li{grid-template-columns:1fr;gap:2px}
}