:root{
  --bg:#0d1117; --bg2:#161b22; --card:#161b22; --border:#30363d;
  --fg:#e6edf3; --muted:#9da7b3; --accent:#2f81f7; --accent2:#3fb950;
  --warn:#d29922; --danger:#f85149; --code:#0b0f14;
  --radius:12px; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  line-height:1.65; font-size:16px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* nav */
header.nav{position:sticky; top:0; z-index:10; background:rgba(13,17,23,.85);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.nav .container{display:flex; align-items:center; gap:8px; height:58px; flex-wrap:wrap}
.brand{font-weight:700; font-size:18px; margin-right:auto; display:flex; align-items:center; gap:8px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
.nav a.link{color:var(--muted); padding:6px 10px; border-radius:8px; font-size:14px}
.nav a.link:hover{color:var(--fg); background:var(--bg2); text-decoration:none}
.nav a.link.active{color:var(--fg); background:var(--bg2)}

/* hero */
.hero{padding:48px 0 28px; border-bottom:1px solid var(--border);
  background:radial-gradient(1200px 400px at 20% -10%, rgba(47,129,247,.12), transparent)}
.hero h1{font-size:34px; margin:0 0 8px}
.hero p{color:var(--muted); font-size:17px; margin:0; max-width:760px}
.kicker{color:var(--accent); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px}

section{padding:30px 0}
h2{font-size:22px; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--border)}
h3{font-size:17px; margin:22px 0 8px}
p{margin:8px 0}

/* grid + cards */
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.card h3{margin-top:0}
.card .big{font-size:26px; font-weight:700}
.card .lbl{color:var(--muted); font-size:13px}
a.card{color:inherit; display:block; transition:border-color .15s, transform .15s}
a.card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px)}

/* badges */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid}
.b-ok{color:var(--accent2); border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.1)}
.b-wip{color:var(--warn); border-color:rgba(210,153,34,.4); background:rgba(210,153,34,.1)}
.b-todo{color:var(--muted); border-color:var(--border); background:var(--bg2)}
.b-danger{color:var(--danger); border-color:rgba(248,81,73,.4); background:rgba(248,81,73,.1)}

/* tables */
table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; display:block; overflow-x:auto}
th,td{border:1px solid var(--border); padding:8px 11px; text-align:left; vertical-align:top}
th{background:var(--bg2); font-weight:600}
tr:nth-child(even) td{background:rgba(255,255,255,.015)}

/* code */
code{background:var(--code); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#a5d6ff}
pre{background:var(--code); border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto}
pre code{background:none; border:0; padding:0; color:#c9d1d9}

/* misc */
ul.clean{list-style:none; padding-left:0}
ul.clean li{padding:6px 0 6px 26px; position:relative; border-bottom:1px solid var(--border)}
ul.clean li:before{content:"▸"; color:var(--accent); position:absolute; left:4px}
.note{border-left:3px solid var(--accent); background:var(--bg2); padding:10px 14px; border-radius:0 8px 8px 0; margin:14px 0}
.note.warn{border-color:var(--warn)}
.note.danger{border-color:var(--danger)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* timeline */
.timeline{border-left:2px solid var(--border); margin-left:8px; padding-left:20px}
.timeline .ev{position:relative; padding:4px 0 18px}
.timeline .ev:before{content:""; position:absolute; left:-27px; top:8px; width:11px; height:11px;
  border-radius:50%; background:var(--accent2); border:2px solid var(--bg)}

/* figures + diagram */
figure{margin:16px 0}
figure img{width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius); display:block}
figure.half img{max-width:50%; margin:0 auto}
@media(max-width:760px){figure.half img{max-width:100%}}
figcaption{color:var(--muted); font-size:13px; margin-top:8px; text-align:center}
.diagram{width:100%; height:auto; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius)}

footer{border-top:1px solid var(--border); color:var(--muted); font-size:13px; padding:24px 0; margin-top:20px}