* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  font: 16px/1.75 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #120c19;
  color: #f9f2fd;
}
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 95% 0%, #38204a 0%, transparent 60%);
}
header, main { max-width: 52rem; margin: auto; padding-inline: clamp(1.25rem, 6vw, 3rem); }
header { padding-block: 1.6rem; }
header a { color: #d8bdeb; text-underline-offset: .24em; }
main { padding-block: clamp(2.1rem, 8vw, 6.2rem) 3rem; }
.intro { max-width: 37rem; }
h1 { margin: 0; font-size: clamp(3rem, 9vw, 6rem); line-height: 1.14; font-weight: 650; letter-spacing: -.075em; }
p { color: #e0cce8; }
.intro p { max-width: 29rem; margin: 1.5rem 0; }
.primary {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
  padding: .7rem 1.15rem;
  color: #201028;
  background: #e5c4fb;
  text-decoration: none;
  font-weight: 650;
  border-radius: .45rem;
}
.primary:hover { background: #f2dcff; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
section { margin-top: clamp(2.5rem, 7vw, 4rem); padding-top: 1.3rem; border-top: 1px solid #8c6da0; }
h2 { margin: 0; font-size: 1.18rem; }
ol { color: #e0cce8; padding-left: 1.5rem; }