:root { --green:#3F5B47; --mid:#6E9A78; --pale:#DDE8DA; --cream:#F8F6F0; --ivory:#FFFDF8; --gold:#D2AE5C; --ink:#2E3A31; --muted:#5d6a60; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --cream:#151a16; --ivory:#1d241f; --ink:#e7ece6; --muted:#a9b5ab; --pale:#2a3a2e; --green:#9cc5a6; } }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; background:var(--cream); color:var(--ink); line-height:1.85; }
main { max-width:760px; margin:0 auto; padding:24px 16px 64px; }
header { display:flex; align-items:center; gap:12px; padding:16px; max-width:760px; margin:0 auto; }
header img { height:40px; } header a { color:inherit; text-decoration:none; }
h1 { font-size:1.6em; line-height:1.4; margin:.4em 0; } h2 { font-size:1.15em; margin-top:2em; padding-bottom:6px; border-bottom:2px solid var(--pale); }
a { color:var(--green); } .muted { color:var(--muted); } .card { background:var(--ivory); border-radius:16px; padding:16px 20px; margin:12px 0; border:1px solid #0000000d; }
.hero { text-align:center; padding:24px 0; } .hero img.icon { width:112px; border-radius:26px; } .lead { font-size:1.15em; font-weight:700; }
.features { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:24px 0; } .features img { width:100%; max-width:220px; display:block; margin:0 auto; } .features p { text-align:center; font-weight:700; }
table { border-collapse:collapse; width:100%; } th,td { text-align:left; padding:8px; border-bottom:1px solid var(--pale); vertical-align:top; }
footer { max-width:760px; margin:0 auto; padding:24px 16px 48px; font-size:.85em; color:var(--muted); } footer a { margin-right:16px; }
@media (prefers-color-scheme: dark) { header img { background:#F8F6F0; border-radius:12px; padding:6px 10px; } }