:root { --bg:#fff8f1; --ink:#1b1d3a; --muted:#585d7a; --coral:#c2410c; --line:#eadfd3; --card:#ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14152b; --ink:#f6efe7; --muted:#b4b8d0; --coral:#ff8a5c; --line:#2b2d4d; --card:#1c1e3a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 ui-serif, Georgia, "Times New Roman", serif; }
header, main, footer { max-width:42rem; margin:0 auto; padding:1rem; }
header { display:flex; justify-content:space-between; align-items:baseline; padding-top:1.5rem; }
header a.brand { font-size:1.4rem; font-weight:700; color:var(--ink); text-decoration:none; }
nav a { margin-left:1rem; font:15px/1 ui-sans-serif, system-ui, sans-serif; color:var(--coral); }
h1 { font-size:2rem; line-height:1.2; margin:1.5rem 0 .5rem; }
h2 { font-size:1.25rem; margin:2rem 0 .25rem; }
p, li { color:var(--ink); }
.muted { color:var(--muted); font-size:.95rem; }
a { color:var(--coral); }
footer { color:var(--muted); font:14px/1.5 ui-sans-serif, system-ui, sans-serif; border-top:1px solid var(--line); margin-top:3rem; }

label { font:15px/1.4 ui-sans-serif, system-ui, sans-serif; }
input, textarea { width:100%; font:inherit; padding:.6rem .75rem; margin-top:.25rem; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; }
button { font:600 16px/1 ui-sans-serif, system-ui, sans-serif; min-height:44px; padding:0 1.5rem; color:#1b1d3a; background:#ff6a4d; border:0; border-radius:999px; cursor:pointer; }
:focus-visible { outline:3px solid var(--coral); outline-offset:2px; }