:root { --cream:#fff8f1; --white:#fff; --line:#f0e0cf; --text:#3a2b3d; --muted:#6c5c70; --teal:#178f86; --teal-deep:#12786f; --plum:#3b2a3f; --honey:#ffc25a;
  --display:"Bricolage Grotesque","Segoe UI Variable","Segoe UI",system-ui,sans-serif; --body:"Atkinson Hyperlegible Next","Segoe UI Variable","Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; font:18px/1.7 var(--body); background:var(--cream); color:var(--text); }
a { color:var(--teal-deep); font-weight:700; }
:focus-visible { outline:3px solid var(--honey); outline-offset:3px; }
nav { background:var(--plum); }
nav .in { max-width:760px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; gap:22px; }
nav .brand { margin-right:auto; color:#fff; text-decoration:none; font:800 22px var(--display); letter-spacing:-.03em; }
nav a.l { color:#d9c6d6; text-decoration:none; font-weight:500; font-size:15px; }
nav a.l:hover { color:#fff; }
main { max-width:760px; margin:0 auto; padding:40px 20px 72px; }
h1, h2 { font-family:var(--display); letter-spacing:-.025em; line-height:1.1; }
h1 { font-size:clamp(32px,5vw,44px); font-weight:800; margin:0 0 12px; }
h2 { font-size:28px; font-weight:800; margin:44px 0 10px; }
.meta { color:var(--muted); font-size:15px; margin:0 0 26px; }
.answer { background:var(--white); border:1px solid var(--line); border-left:6px solid var(--teal); border-radius:14px; padding:16px 20px; margin:0 0 8px; }
.answer p { margin:0; }
code, pre { font-family:Consolas,"Cascadia Mono",monospace; font-size:.9em; }
code { background:#f6e9d9; padding:1px 6px; border-radius:6px; }
pre { background:var(--plum); color:#f3e6ef; padding:16px 18px; border-radius:12px; overflow-x:auto; line-height:1.5; }
pre code { background:none; padding:0; }
.warn { background:#fff1d6; border:1px solid #f5d28f; border-radius:12px; padding:12px 16px; }
.cta { background:var(--plum); color:#f3e6ef; border-radius:18px; padding:22px 24px; margin:44px 0 0; }
.cta h2 { color:#fff; margin:0 0 6px; font-size:24px; }
.cta p { margin:0 0 14px; }
.btn { display:inline-block; background:var(--honey); color:var(--plum); padding:11px 24px; border-radius:999px; text-decoration:none; font-weight:700; }
ul.cards { list-style:none; padding:0; display:grid; gap:14px; }
ul.cards li { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 20px; }
ul.cards a { font:800 20px var(--display); text-decoration:none; }
ul.cards p { margin:4px 0 0; color:var(--muted); font-size:16px; }
footer { text-align:center; color:var(--muted); font-size:14px; padding:0 20px 40px; }
table { width:100%; border-collapse:collapse; margin:14px 0; font-size:16px; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:block; overflow-x:auto; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#fbeede; font-weight:700; }
h2 .meta { font:500 15px var(--body); letter-spacing:0; margin-left:8px; }
ol, ul { padding-left:1.3em; }
kbd { font-family:Consolas,monospace; background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:0 6px; font-size:.9em; }
