:root {
  color-scheme: light;
  --purple: #8838f6;
  --ink: #35215f;
  --muted: #756b91;
  --surface: #ffffff;
  --background: #f5f0ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  line-height: 1.6;
}

header {
  background: linear-gradient(135deg, #8838f6, #c36cff);
  color: white;
  padding: 48px 24px 42px;
}

header > div, main, footer { max-width: 860px; margin: 0 auto; }

h1 { margin: 0 0 8px; font-size: clamp(32px, 6vw, 52px); }
h2 { margin-top: 34px; color: var(--purple); }
h3 { margin-top: 24px; }
p, li { color: var(--muted); }
a { color: var(--purple); }

main {
  margin-top: 28px;
  margin-bottom: 40px;
  padding: 34px clamp(22px, 5vw, 54px);
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(53, 33, 95, 0.1);
}

nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
nav a { color: white; font-weight: 600; }

footer { padding: 0 24px 34px; color: var(--muted); font-size: 14px; }
code { padding: 2px 6px; border-radius: 6px; background: #eee7ff; color: var(--ink); }