:root{--max-w:1100px;--accent:#0b5fff;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Arial, sans-serif;margin:0;background:#fafafa;color:#111;line-height:1.7}
.header{background:#0b1220;color:#fff;padding:18px 0;position:sticky;top:0;z-index:50}
.container{max-width:var(--max-w);margin:0 auto;padding:0 16px}
.brand{font-weight:700;font-size:20px}
.nav{margin-top:8px}
.nav a{color:#cbd5e1;text-decoration:none;margin-right:16px;font-size:14px}
.hero{background:#fff;padding:20px;border-bottom:1px solid #e6e6e6}
.hero h1{font-size:26px;margin:0 0 8px}
.lead{color:var(--muted);margin-bottom:12px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:18px}
.card{background:#fff;padding:14px;border-radius:4px;border:1px solid #ececec;margin-bottom:12px}
.article-title{font-size:18px;font-weight:700;color:#0b1220;text-decoration:none}
.meta{color:var(--muted);font-size:13px;margin-top:6px}
.excerpt{margin-top:8px;color:#222}
.aside .card{padding:12px}
.footer{background:#fff;padding:18px;border-top:1px solid #e6e6e6;margin-top:20px;text-align:center;color:#666;font-size:14px}
.article-body{background:#fff;padding:18px;border-radius:4px;border:1px solid #ececec}
pre.code-chart{background:#f3f4f6;padding:12px;border-radius:4px;overflow:auto;font-family:monospace;color:#111}
@media(max-width:920px){.grid{grid-template-columns:1fr}}