:root {
  color-scheme: light dark;
  --ink: #2d2427;
  --muted: #655b60;
  --accent: #d9313b;
  --paper: #fffaf5;
  --panel: rgba(255, 255, 255, 0.78);
  --line: rgba(87, 64, 68, 0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(145deg, #fff6ec, #edf4fb 72%);
  min-height: 100vh;
  line-height: 1.62;
}
main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 80px; }
.hero, article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 6vw, 48px);
  box-shadow: 0 20px 70px rgba(78, 55, 58, 0.10);
  backdrop-filter: blur(18px);
}
article { margin-top: 20px; border-radius: 18px; padding: 24px; }
.mark { font-size: 44px; }
h1 { font-size: clamp(38px, 9vw, 68px); line-height: 1.04; letter-spacing: -0.045em; margin: 14px 0; }
h2 { margin: 0 0 8px; font-size: 24px; }
p, li { color: var(--muted); }
.lead { font-size: 20px; max-width: 34em; }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(217, 49, 59, 0.10); color: var(--accent); font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
a { color: var(--accent); font-weight: 650; }
nav a { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; text-decoration: none; background: rgba(255,255,255,.6); }
.lang { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
footer { margin-top: 28px; color: var(--muted); font-size: 14px; text-align: center; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #fff7f4; --muted: #d4c7c9; --paper: #1e181a; --panel: rgba(42, 33, 36, .82); --line: rgba(255,255,255,.13); }
  body { background: linear-gradient(145deg, #2b2022, #152332 72%); }
  nav a { background: rgba(255,255,255,.06); }
}