:root {
  --bg: #eef2f6; --surface: #ffffff; --ink: #14213d; --sub: #56627a; --line: #d5dce6;
  --display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --body: "BIZ UDPGothic", "Hiragino Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f1522; --surface: #182031; --ink: #e8edf5; --sub: #9aa6bc; --line: #2a3448; }
}
:root[data-theme="dark"] { --bg: #0f1522; --surface: #182031; --ink: #e8edf5; --sub: #9aa6bc; --line: #2a3448; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.9 var(--body); -webkit-font-smoothing: antialiased; }
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 72px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.back { font-size: .88rem; color: var(--sub); }
h1 { font: 900 1.8rem/1.4 var(--display); margin: 20px 0 6px; }
.meta { color: var(--sub); font-size: .85rem; margin: 0 0 28px; }
article { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 24px 24px; }
h2 { font: 700 1.05rem/1.5 var(--display); margin: 28px 0 8px; }
p, li { margin: 0 0 8px; }
ol, ul { padding-left: 1.4em; margin: 0 0 8px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dt { color: var(--sub); }
dd { margin: 0; }
footer { margin-top: 40px; font-size: .82rem; color: var(--sub); display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 520px) { article { padding: 4px 16px 18px; } dl { grid-template-columns: 1fr; } dd { margin-bottom: 8px; } }