:root { --bg: #0f1222; --card: #1b2038; --line: rgba(255,255,255,.1); --text: #f4f5fb; --muted: #a3a8c3; --accent: #ff4f1f; }
:root[data-theme="light"] { --bg: #f3f4f9; --card: #fff; --line: rgba(22,26,46,.11); --text: #161a2e; --muted: #5d6380; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.wrap { width: min(860px, 100% - 32px); margin: 0 auto; padding: 24px 0 48px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 18px 'Unbounded', sans-serif; }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
.logo b { color: var(--accent); font-weight: 700; }
.back { color: var(--muted); text-decoration: none; font-weight: 600; }
.back:hover { color: var(--text); }
article { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 40px); }
h1 { font: 700 clamp(24px, 4vw, 32px)/1.2 'Unbounded', sans-serif; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 28px 0 8px; }
p, li { color: var(--text); } .muted { color: var(--muted); }
ul { padding-left: 22px; }
a { color: var(--accent); }