:root{
  --bg:#101114; --side:#0b0c0e; --fg:#e8e9ec; --dim:#7f838d;
  --indigo:#8b9cf7; --line:#1d1f24;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 15.5px/1.8 "Inter",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  display:flex; min-height:100vh;
}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--indigo)}
aside{width:244px; flex:0 0 244px; background:var(--side); border-right:1px solid var(--line);
  padding:38px 26px; position:sticky; top:0; height:100vh}
aside .me{font-size:14px; letter-spacing:.03em; margin-bottom:4px}
aside .role{color:var(--dim); font-size:12px; line-height:1.7; margin-bottom:34px}
aside nav{display:flex; flex-direction:column; gap:2px}
aside nav a{font-size:13.5px; color:var(--dim); padding:7px 0; letter-spacing:.04em}
aside nav a:hover{color:var(--indigo)}
aside nav a.cur{color:var(--fg)}
aside nav a.cur::before{content:"▏"; color:var(--indigo); margin-right:7px}
aside .foot{position:absolute; bottom:34px; left:26px; right:26px; color:var(--dim); font-size:11.5px; line-height:1.9}
aside .foot .dot{color:var(--indigo)}
main{flex:1; padding:52px 46px 80px; max-width:760px}
h1{font-size:25px; font-weight:600; letter-spacing:-.01em; margin:0 0 14px}
.lead{color:var(--dim); font-size:14.5px; margin:0 0 46px; max-width:52ch}
.items{margin:0; padding:0; list-style:none}
.items li{padding:24px 0; border-top:1px solid var(--line)}
.items li:last-child{border-bottom:1px solid var(--line)}
.items .m{font-size:11.5px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px}
.items .m b{color:var(--indigo); font-weight:400}
.items h2{font-size:17px; font-weight:600; margin:0 0 7px; line-height:1.55}
.items p{margin:0; color:var(--dim); font-size:14px}
article h1{font-size:23px; margin-bottom:8px}
article .m{font-size:11.5px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:30px}
article p{margin:0 0 19px}
article h2{font-size:16.5px; font-weight:600; margin:34px 0 12px}
pre{background:var(--side); border:1px solid var(--line); padding:15px 16px; overflow:auto; font-size:13px; line-height:1.65}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; color:var(--indigo)}
.nf h1{font-size:46px; color:var(--indigo)}
@media(max-width:820px){
  body{display:block}
  aside{width:auto; flex:none; height:auto; position:static; padding:22px 22px 18px; border-right:0; border-bottom:1px solid var(--line)}
  aside nav{flex-direction:row; gap:18px; margin-top:14px; flex-wrap:wrap}
  aside .foot{position:static; margin-top:18px}
  main{padding:34px 22px 60px; max-width:none}
}