:root { --bg:#FBF7F2; --text:#1F1A17; --muted:#857A72; --accent:#E8553D; --card:#fff; } @media (prefers-color-scheme: dark) { :root { --bg:#121010; --text:#F6F1EC; --muted:#A69C94; --accent:#FF6B52; --card:#1E1A18; } } * { box-sizing: border-box; } body { margin:0; background:var(--bg); color:var(--text); font: 17px/1.55 ui-rounded, -apple-system, system-ui, sans-serif; } main { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; } h1 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; } h2 { font-size: 1.15rem; margin: 28px 0 6px; } p { margin: 0 0 12px; } a { color: var(--accent); } .muted { color: var(--muted); } .hero { display:flex; gap:20px; align-items:center; margin-bottom: 28px; } .hero img { width: 96px; height: 96px; border-radius: 22px; } nav { display:flex; gap:18px; margin-top: 40px; font-weight:600; } .card { background: var(--card); border-radius: 20px; padding: 20px; margin: 16px 0; }