*, #sbl *, #nav, hr, #footer > p, blockquote > :first-child {margin: 0; padding: 0}
html {max-width: 750px; margin: auto; background: #eee; font-family: "Noto Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans CJK TC"}
html, h2, h3, h4 {font-size: 16px}
body {line-height: 1.5em; overflow-x: hidden}
#footer {font-size: 12px; padding: 16px 0}
pre, code, figcaption {font-size: 14px}
pre, code {font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,Courier,monospace}
h1, h2, h3, h4, #footer, pre, code, figcaption {line-height: 1.2em}
h2, h3, h4 {margin: 24px 0 0}
details, pre {padding: 8px}
blockquote {background: #fff9e9; border-left: 10px solid orange; padding: 16px}
hr {text-align: center; margin: auto; border: 0}
hr:before {display: block; text-align: center; content: "∗ ∗ ∗"}
code {display: inline-block; padding: 0 4px}
#main {margin: 0 16px}
#main > h1 {display: block; font-size: calc(1.5rem + 0.5vw)}
li {margin: 0 0 4px 16px; padding-left: 2px}
li:first-of-type {margin-top: 4px}
p, ul, ol, table, blockquote, h1, video {margin: 16px 0}
li > ul {margin: 0}
pre, code, details, .gray {background: #f5f5f5}
pre {overflow-x: scroll}
figure {max-width: 640px; margin: 16px auto}
figcaption {text-align: center; margin: 8px 0}
img, video {width: 100%; max-width: 640px}
table {border-collapse: collapse}
table pre {white-space: pre-wrap}
video {display: block}
@media(max-width: 648px) {
  #footer {margin: 0 16px}
  li {margin-bottom: 4px}}
@media print {#main {margin: 0; max-width: 100%}}
@media(prefers-color-scheme: dark) {
  html {background: #222; color: #eee}
  a {color: #eb0; font-weight: 700; text-decoration: none}
  a:hover {text-decoration: underline}
  a:visited {color: #c72}
  pre, code, details, .gray {background: #333}
  blockquote {background: #431}
}