:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 2.5rem 1.25rem 5rem; max-width: 44rem;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.85; color: #16181d; background: #ffffff;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) { body { color: #e6e8ec; background: #101216; } }
h1 { font-size: 1.6rem; margin-bottom: .25rem; letter-spacing: .01em; }
h2 { font-size: 1.1rem; margin-top: 2.5rem; }
h3 { font-size: .98rem; margin-top: 1.75rem; }
.updated { color: #6b7280; font-size: .85rem; margin-top: 0; }
@media (prefers-color-scheme: dark) { .updated { color: #8b94a5; } }
a { color: #0f8a82; }
@media (prefers-color-scheme: dark) { a { color: #2bc2b7; } }
hr { border: none; border-top: 1px solid #e5e7eb; margin: 3rem 0; }
@media (prefers-color-scheme: dark) { hr { border-top-color: #262c36; } }
.lead { background: #e9f3f1; padding: 1rem 1.25rem; border-radius: .75rem; }
@media (prefers-color-scheme: dark) { .lead { background: #0f2a2c; } }
.note { background: #fff7ed; padding: 1rem 1.25rem; border-radius: .75rem; border: 1px solid #fed7aa; }
@media (prefers-color-scheme: dark) { .note { background: #26190f; border-color: #5a3b1c; } }
ul { padding-left: 1.3rem; }
li { margin: .3rem 0; }
code { background: #f1f3f7; padding: .1rem .35rem; border-radius: .3rem; font-size: .9em; }
@media (prefers-color-scheme: dark) { code { background: #1c2028; } }
footer { margin-top: 4rem; font-size: .85rem; color: #6b7280; }
@media (prefers-color-scheme: dark) { footer { color: #8b94a5; } }