:root {
  --night: #0b1045;
  --night-soft: #171a56;
  --ink: #17182f;
  --muted: #5c627c;
  --paper: #f7f6fb;
  --white: #fff;
  --violet: #6f5fd3;
  --coral: #e97482;
  --line: #dcdde8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
a { color: var(--violet); text-underline-offset: 3px; }
img { max-width: 100%; }
.wrap { width: min(calc(100% - 40px), 920px); margin: 0 auto; }

.site-header {
  color: var(--white);
  background: linear-gradient(145deg, #090e43, #1c205f 62%, #3c306b);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.brand img {
  width: 35px;
  height: 35px;
  margin-right: -2px;
  object-fit: contain;
  image-rendering: pixelated;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: #e8e9ff; text-decoration: none; font-size: 14px; font-weight: 650; }
.nav-links a:hover { color: var(--white); }
.nav-links .download {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 7px;
}

.guide-head {
  padding: 76px 0 72px;
  color: var(--white);
  background: linear-gradient(145deg, #090e43, #171b58 60%, #342b67);
}
.eyebrow {
  margin: 0 0 14px;
  color: #c9c7ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(39px, 7vw, 66px);
  line-height: 1.06;
  letter-spacing: -.05em;
}
.lede {
  max-width: 720px;
  margin: 22px 0 0;
  color: #d9daf4;
  font-size: clamp(18px, 2.5vw, 21px);
  line-height: 1.6;
}

.article { padding: 64px 0 84px; }
.article-body { max-width: 760px; }
.meta { margin: 0 0 42px; color: #81859c; font-size: 14px; }
.article h2 {
  margin: 48px 0 13px;
  font-size: clamp(27px, 4vw, 36px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.article h3 { margin: 30px 0 8px; font-size: 20px; line-height: 1.3; }
.article p { margin: 0 0 18px; }
.article ol, .article ul { margin: 12px 0 24px; padding-left: 27px; }
.article li { margin: 9px 0; padding-left: 5px; }
.article code {
  padding: 2px 6px;
  border-radius: 5px;
  background: #eae9f4;
  color: #2a2c55;
  font-size: .9em;
}
.note {
  margin: 28px 0;
  padding: 20px 22px;
  border-left: 4px solid var(--coral);
  background: #eeedf6;
  color: #42465f;
}
.note strong { color: var(--ink); }
.steps { counter-reset: guide-step; list-style: none; padding-left: 0!important; }
.steps li {
  position: relative;
  min-height: 46px;
  margin: 18px 0;
  padding: 0 0 0 58px;
  counter-increment: guide-step;
}
.steps li::before {
  content: counter(guide-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--coral);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .05em;
}
.guide-links {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.guide-links strong { display: block; margin-bottom: 8px; }
.guide-links a { display: inline-block; margin: 5px 18px 5px 0; font-weight: 700; }
.cta {
  margin-top: 54px;
  padding: 28px;
  border-radius: 12px;
  color: var(--white);
  background: var(--night-soft);
}
.cta h2 { margin: 0 0 8px; color: var(--white); }
.cta p { color: #cfd1ed; }
.buttons { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 21px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 7px;
  color: #181a42;
  background: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}
.button.secondary { color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.42); }

footer { padding: 28px 0; color: #afb2d1; background: #17173f; font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; }
.footer-row a { margin-left: 20px; color: #d9daf1; text-decoration: none; }

@media (max-width: 620px) {
  .wrap { width: min(calc(100% - 28px), 920px); }
  .nav { min-height: 68px; }
  .nav-links a:not(.download) { display: none; }
  .brand { font-size: 21px; }
  .brand img { width: 32px; height: 32px; }
  .guide-head { padding: 57px 0 58px; }
  .article { padding: 48px 0 62px; }
  .cta { padding: 23px 20px; }
  .buttons { flex-direction: column; }
  .footer-row { flex-direction: column; }
  .footer-row a { margin: 0 18px 0 0; }
}