:root { --bg:#f5f3ef; --surface:#fff; --accent:#6b5ce7; --text:#1a1a1a; --text-muted:#666; --border:#e0ddd7; --radius:12px; --shadow:0 2px 12px rgba(0,0,0,.06); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.6; }
.container { max-width:960px; margin:0 auto; padding:16px; }
header { text-align:center; padding:20px 16px 12px; }
.brand { color:var(--text); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.site-nav,.site-footer { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; font-size:.9rem; }
.site-nav { margin-top:8px; }
.site-nav a,.site-footer a { color:var(--accent); text-decoration:none; font-weight:600; display:inline-block; padding:11px 9px; }
.site-nav a:hover,.site-footer a:hover { text-decoration:underline; }
main { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(20px,4vw,40px); margin-top:12px; }
h1 { font-size:clamp(1.6rem,4vw,2.25rem); line-height:1.2; margin:0 0 14px; }
h2 { font-size:1.15rem; margin:28px 0 8px; }
p,li { color:var(--text-muted); }
ul { padding-left:20px; }
a { color:var(--accent); overflow-wrap:anywhere; }
.lead { font-size:1.05rem; margin-top:0; }
main { overflow-wrap:break-word; }
code { background:#f1efea; border:1px solid var(--border); border-radius:5px; padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; overflow-wrap:anywhere; }
.site-footer { border-top:1px solid var(--border); margin-top:20px; padding:12px 0 4px; font-size:.85rem; }
@media (max-width:480px) { .container { padding:12px; } main { padding:20px; } .site-nav,.site-footer { gap:12px; } }