:root {
  --content-max-width: 860px;
  --content-pad: clamp(1rem, 3vw, 3rem);
}

html { font-size: 16px; }
body { font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.72; }
.content { max-width: var(--content-max-width); padding-inline: var(--content-pad); }
.content main { hyphens: auto; }
h1, h2, h3, h4 { line-height: 1.28; text-wrap: balance; }
h1 { margin-block: 1.6rem 1.2rem; font-size: clamp(2rem, 5vw, 2.8rem); }
h2 { margin-top: 2.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--table-border-color); }
p, li { max-width: 78ch; }
pre { border: 1px solid var(--table-border-color); border-radius: 0.4rem; line-height: 1.5; }
code { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
img { display: block; max-height: 72vh; margin: 1.5rem auto 0.5rem; object-fit: contain; }
table { display: block; overflow-x: auto; border-collapse: collapse; }
.language-link { display: inline-flex; align-items: center; height: 50px; padding: 0 0.8rem; color: var(--icons); font-weight: 600; text-decoration: none; }
.language-link:hover { color: var(--icons-hover); }
.book-license { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--table-border-color); color: var(--fg); font-size: 0.82rem; opacity: 0.78; }
@media (max-width: 700px) {
  html { font-size: 15px; }
  .content { padding-inline: 1rem; }
  .language-link { padding-inline: 0.55rem; }
}
@media print {
  .language-link, .book-license { display: none; }
  .content { max-width: none; }
}
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 0.35rem; }