:root { --bg:#F6F1E7; --ink:#22263A; --muted:#5D5A52; --accent:#A8321F; --tomato:#C8402B; --card:#FFFFFF; --line:#EFE9DC; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 "Work Sans", system-ui, -apple-system, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
h1, h2, .logo { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
h1 { font-style: italic; font-size: 40px; line-height: 1.1; margin: 8px 0 12px; }
h2 { font-size: 24px; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); font-size: 16px; }
a { color: var(--accent); }
.logo { font-size: 26px; text-decoration: none; color: var(--ink); }
.logo i { color: var(--tomato); }
.card { background: var(--card); border-radius: 20px; padding: 20px; box-shadow: 0 1px 2px rgba(34,38,58,.06); margin: 20px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 14px;
  background: var(--tomato); color: #fff; font-weight: 600; text-decoration: none; font-size: 17px; }
.btn.secondary { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 28px; letter-spacing: .12em; font-weight: 700; }
footer { margin-top: 48px; font-size: 15px; color: var(--muted); }