:root {
  color-scheme: light dark;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #5c6672;
  --line: #dce2e8;
  --brand: #ec5b32;
  --brand-dark: #b9381c;
  --accent: #2877b9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.75; }
a { color: var(--accent); }
.wrap { width: min(100% - 32px, 780px); margin-inline: auto; }
header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { color: var(--text); font-size: 17px; font-weight: 800; text-decoration: none; }
nav { display: flex; gap: 16px; font-size: 14px; font-weight: 700; }
nav a { text-decoration: none; }
main { padding-block: 44px 64px; }
.eyebrow { margin: 0 0 8px; color: var(--brand-dark); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 0 0 14px; font-size: clamp(30px, 7vw, 46px); line-height: 1.2; letter-spacing: -.03em; }
.lead { margin: 0 0 32px; color: var(--muted); font-size: 18px; }
.card { margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
h3 { margin: 26px 0 8px; font-size: 18px; }
p { margin: 0 0 14px; }
ol, ul { margin: 0; padding-left: 24px; }
.button { display: inline-block; margin-top: 8px; padding: 12px 18px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; text-decoration: none; }
.language { scroll-margin-top: 20px; }
.language + .language { margin-top: 28px; }
.meta { color: var(--muted); font-size: 14px; }
footer { padding: 26px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: 14px; }
  nav { flex-wrap: wrap; gap: 10px 16px; }
  main { padding-block: 32px 48px; }
  .card { padding: 20px; border-radius: 14px; }
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #10151b; --surface: #19212a; --text: #f4f6f8; --muted: #b8c0c8; --line: #34404c; --brand: #f06a45; --brand-dark: #ff9375; --accent: #78bdf2; }
}