:root { --bg: #f6f2ec; --fg: #3d332b; --muted: #8a7b6e; --line: #e2d9ce; --accent: #9a6b52; }
@media (prefers-color-scheme: dark) { :root { --bg: #1d1915; --fg: #ece4da; --muted: #a8998b; --line: #3a322b; --accent: #d6a585; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.85 "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  word-break: normal; overflow-wrap: anywhere; line-break: strict; }
main { padding: 24px max(16px, env(safe-area-inset-left)) 48px max(16px, env(safe-area-inset-right)); }
h1 { font-size: clamp(18px, 5cqw, 26px); white-space: nowrap; margin: 0 0 4px; }
header { container-type: inline-size; }
h2 { font-size: 17px; margin: 28px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
p, li { margin: 4px 0; }
ol, ul { padding-left: 1.4em; }
.s { display: block; }
.meta { color: var(--muted); font-size: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { width: 9em; color: var(--muted); font-weight: normal; }
a { color: var(--accent); }
nav { margin-top: 32px; font-size: 14px; }
@media (max-width: 480px) {
  th, td { display: block; width: auto; }
  th { padding-bottom: 0; border-bottom: 0; }
  td { padding-top: 2px; }
}