:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.9; margin: 0; padding: 0;
  color: #1d2733; background: #f6f8fb;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
header { border-bottom: 2px solid #d8e3ef; padding-bottom: 16px; margin-bottom: 24px; }
h1 { font-size: 26px; margin: 0 0 4px; }
.app { color: #2f6f9e; font-weight: bold; }
h2 { font-size: 18px; margin: 28px 0 8px; color: #2f6f9e; }
p { margin: 6px 0; white-space: pre-wrap; }
.meta { color: #78849a; font-size: 14px; }
a { color: #2f6f9e; }
.card { display:block; margin:14px 0; padding:18px 20px; border-radius:14px;
        background:#fff; border:1px solid #dde6f0; text-decoration:none;
        color:#1d2733; font-size:18px; font-weight:bold; }
.card span { display:block; font-size:13px; font-weight:normal; color:#78849a; margin-top:4px; }
dl { margin: 0; }
dt { font-weight: bold; margin-top: 18px; color:#2f6f9e; }
dd { margin: 4px 0 0; white-space: pre-wrap; }
footer { margin-top: 40px; border-top: 1px solid #d8e3ef; padding-top: 16px; font-size: 14px; color: #78849a; }
@media (prefers-color-scheme: dark) {
  body { color: #e8eef6; background: #0f1620; }
  header, footer { border-color: #27374a; }
  h2, dt { color: #7fc0e8; }
  .card { background:#17202c; border-color:#27374a; color:#e8eef6; }
}