:root { --bg: #fbfbfd; --card: #fff; --text: #1d1d1f; --sub: #6e6e73; --line: #e5e5ea; --link: #0066cc; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --card: #1c1c1e; --text: #f5f5f7; --sub: #a1a1a6; --line: #38383a; --link: #4da3ff; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text); line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
}
a { color: var(--link); }
.in { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.head { border-bottom: 1px solid var(--line); }
.head .in { padding-top: 14px; padding-bottom: 14px; }
.brand { font-weight: 700; font-size: 20px; color: var(--text); text-decoration: none; }
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.4; }
.hero p { margin-top: 12px; color: var(--sub); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 16px 0 32px; }
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--text); text-decoration: none; }
.card:hover { border-color: var(--link); }
.card h2 { font-size: 19px; }
.card p { margin-top: 8px; font-size: 15px; color: var(--sub); }
.card .go { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--link); }
.about, .doc { padding: 16px 0 40px; }
.about h2, .doc h2 { font-size: 20px; margin: 24px 0 8px; }
.about p, .doc p, .doc li { margin-top: 8px; }
.doc h1 { font-size: 28px; margin-top: 32px; }
.doc ul { padding-left: 1.4em; }
.doc dl { display: grid; grid-template-columns: 8em 1fr; gap: 8px 12px; margin-top: 16px; }
.doc dt { color: var(--sub); }
.foot { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 13px; color: var(--sub); }
.foot nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }