:root{
  --bg:#0D1117;
  --surface:#161B22;
  --border:#30363D;
  --text:#C9D1D9;
  --muted:#8B949E;
  --dim:#6E7681;
  --accent:#3FB950;
  --link:#58A6FF;
  --orange:#F0883E;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  line-height:1.6;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}

.muted{color:var(--muted)}
.dim{color:var(--dim)}
.accent{color:var(--accent)}
.orange{color:var(--orange)}

header.site{
  border-bottom:1px solid var(--border);
  padding:22px 0;
}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
header.site .brand{font-size:15px}
header.site nav{display:flex;gap:22px;font-size:13px;flex-wrap:wrap}

main{padding:0 0 80px}

.hero{padding-top:88px;padding-bottom:64px}
.hero h1{font-size:40px;line-height:1.3;margin:14px 0;font-weight:500}
.hero p.lede{font-size:15px;line-height:1.8;color:var(--muted);max-width:640px}
.hero .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--border);border-radius:8px}
.btn{display:inline-block;padding:10px 20px;border-radius:8px;font-size:14px;border:1px solid var(--border)}
.btn.primary{color:var(--accent)}
.btn.ghost{color:var(--text)}

section{padding:48px 0;border-top:1px solid var(--border)}
section .label{color:var(--dim);font-size:13px;margin-bottom:20px}
section h2{font-size:20px;font-weight:500;margin:0 0 20px}

.grid{display:flex;flex-wrap:wrap;gap:20px}
.grid > div{flex:1 1 260px}

.pad{padding:20px}

table.exp{width:100%;border-collapse:collapse;font-size:14px}
table.exp td{padding:12px 0;border-top:1px solid var(--border);vertical-align:top}
table.exp td.when{color:var(--dim);width:150px;white-space:nowrap}

.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 14px;font-size:13px;color:var(--accent)}

.book-card h3{font-size:15px;color:var(--text);margin:10px 0;font-weight:500}

footer.site{border-top:1px solid var(--border);padding:40px 0}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:14px}

.avatar{
  position:relative;
  width:120px;height:120px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;color:var(--accent);flex-shrink:0;
}
.avatar img{position:absolute;inset:0}

.book-hero{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;padding-top:72px;padding-bottom:48px}
.book-cover{
  width:220px;height:300px;flex-shrink:0;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;color:var(--dim);font-size:13px;
}
.book-meta{font-size:14px;color:var(--muted);line-height:2}
.book-meta b{color:var(--text);font-weight:500}

ul.toc{columns:2;column-gap:40px;font-size:14px;color:var(--muted);padding-left:20px}
ul.toc li{break-inside:avoid;margin-bottom:6px}

@media (max-width:640px){
  .wrap{padding:0 20px}
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  header.site nav{gap:14px 18px;font-size:12px}
  .hero{padding-top:56px;padding-bottom:40px}
  .hero h1{font-size:28px}
  .hero > div:first-child{order:2}
  .avatar{width:96px;height:96px;font-size:28px;order:1}
  table.exp,table.exp tbody,table.exp tr,table.exp td{display:block;width:auto}
  table.exp tr{padding:12px 0;border-top:1px solid var(--border)}
  table.exp td{padding:2px 0;border:none}
  table.exp td.when{color:var(--dim);font-size:12px}
  .book-hero{padding-top:56px;padding-bottom:32px}
  .book-cover{width:100%;max-width:260px;margin:0 auto}
  ul.toc{columns:1}
  footer.site .wrap{flex-direction:column;align-items:flex-start}
}