:root { --bg: #fffdf8; --fg: #2b2622; --muted: #6f665e; --accent: #b85a2e; --line: #ece4da; --soft: #fbf3ea; --todo-bg: #fff1a8; --todo-fg: #5a4600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1d1a17; --fg: #f1ebe4; --muted: #b3a89c; --accent: #f0a07a; --line: #3a332d; --soft: #27221e; --todo-bg: #5a4a10; --todo-fg: #fff3c2; } }
:root[data-theme="dark"] { --bg: #1d1a17; --fg: #f1ebe4; --muted: #b3a89c; --accent: #f0a07a; --line: #3a332d; --soft: #27221e; --todo-bg: #5a4a10; --todo-fg: #fff3c2; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif; overflow-wrap: break-word; }
html:lang(zh-Hant) body { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Noto Sans TC", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--accent); }
header.site { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
header.site .brand { color: var(--accent); text-decoration: none; font-weight: 600; }
nav.lang { font-size: 0.9rem; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 24px 0 4px; }
.meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 24px; }
h2 { font-size: 1.15rem; line-height: 1.4; margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
h3 { font-size: 1rem; margin: 20px 0 4px; scroll-margin-top: 16px; }
p, ul, ol { margin: 8px 0; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 4px; }
.box { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
.box h2 { border-top: 0; padding-top: 0; margin-top: 0; font-size: 1.05rem; }
.callout { border-left: 4px solid var(--accent); }
nav.toc ol { columns: 1; font-size: 0.95rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 8px 0 12px; }
th, td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--line); }
thead th { border-top: 0; border-bottom: 2px solid var(--line); color: var(--muted); font-weight: 600; }
td { overflow-wrap: anywhere; }
mark.todo { background: var(--todo-bg); color: var(--todo-fg); border-radius: 4px; padding: 0 3px; }
dl.faq dt { font-weight: 600; margin-top: 20px; }
dl.faq dd { margin: 4px 0 0; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
footer p { margin: 4px 0; }
@media (min-width: 600px) { nav.toc ol { columns: 2; } }
/* Narrow screens: each table row becomes a small card; columns after the first get their header as a label. */
@media (max-width: 560px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-top: 1px solid var(--line); padding: 8px 0; }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td:first-child { font-weight: 600; }
  table.stack td[data-label]:not(:first-child)::before { content: attr(data-label) "："; color: var(--muted); }
  :lang(en) table.stack td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; }
}