:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #5b6474;
  --line: #dfe4ec;
  --surface: #ffffff;
  --page: #f6f8fb;
  --accent: #7047eb;
}

* { box-sizing: border-box; }
html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--page); color: var(--ink); }
body { margin: 0; line-height: 1.65; }
a { color: var(--accent); text-underline-offset: 3px; }
.shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; }
header { background: var(--surface); border-bottom: 1px solid var(--line); }
header .shell { padding: 28px 0 22px; }
.brand { margin: 0; font-size: clamp(1.65rem, 6vw, 2.25rem); letter-spacing: -.035em; }
.tagline { margin: 4px 0 0; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
nav a { font-weight: 650; text-decoration: none; }
main { padding: 30px 0 48px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 5vw, 34px); box-shadow: 0 8px 28px rgba(23,32,51,.05); }
h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.2; letter-spacing: -.025em; }
h2 { margin: 28px 0 8px; font-size: 1.12rem; line-height: 1.35; }
p { margin: 0 0 14px; }
.meta { color: var(--muted); font-size: .94rem; margin-bottom: 24px; }
.links { display: grid; gap: 14px; margin-top: 24px; }
.links a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-weight: 700; text-decoration: none; }
footer { color: var(--muted); font-size: .88rem; padding: 0 0 32px; }
@media (max-width: 520px) { .shell { width: min(100% - 22px, 760px); } header .shell { padding-top: 22px; } main { padding-top: 20px; } }