:root{
  --bg:#FAF8F5;
  --fg:#2B2A28;
  --muted:#5B5854;
  --accent:#B35A3C;
  --rule:#E6DED6;
  --callout:#F3ECE4;
  --max: 860px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{opacity:.85}
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(150%) blur(6px)}
nav{max-width:var(--max);margin:0 auto;padding:14px 18px;display:flex;gap:18px;flex-wrap:wrap}
main{max-width:var(--max);margin:0 auto;padding:28px 18px 64px}
h1{font-size:2.0rem;line-height:1.15;margin:0 0 14px}
h2{font-size:1.25rem;margin:28px 0 10px}
p{margin:0 0 12px}
ul{margin:0 0 12px;padding-left:20px}
hr{border:none;border-top:1px solid var(--rule);margin:28px 0}
.small{color:var(--muted);font-size:.95rem}
.callout{background:var(--callout);border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:12px;padding:16px 16px;margin:18px 0}
.footer{border-top:1px solid var(--rule);padding-top:18px;margin-top:32px}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em}

main{animation:fadein .4s ease-out}
@keyframes fadein{from{opacity:.96}to{opacity:1}}