:root {
  --ink-0:#1E0635;
  --ink-1:#280A42;
  --ink-2:#320D50;
  --ink-4:#130320;
  --line:#7B5EA7;
  --line-soft:#3A1860;
  --fg-0:#F2EEFF;
  --fg-1:#CDBFEB;
  --accent:#FF7BAC;
  --accent-hi:#FFB3CD;
  --shell:920px;
  --pad:clamp(20px,5vw,56px);
  --radius:16px;
}
*,
*::before,
*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:
    radial-gradient(ellipse 70% 45% at 15% -5%, rgba(200,80,200,.13) 0%, transparent 58%),
    var(--ink-0);
  color:var(--fg-0);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.7;
}
a { color:var(--accent-hi); text-underline-offset:3px; }
a:hover { color:#fff; }
:focus-visible { outline:3px solid var(--accent-hi); outline-offset:4px; border-radius:4px; }
.skip-link {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:20;
  padding:10px 14px;
  background:var(--ink-2);
  color:var(--fg-0);
  border:2px solid var(--accent);
  border-radius:10px;
}
.skip-link:focus { top:16px; }
.shell { width:min(100%, var(--shell)); margin-inline:auto; padding-inline:var(--pad); }
.site-header {
  border-bottom:1px solid var(--line-soft);
  background:rgba(30,6,53,.94);
}
.site-header__inner {
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand {
  color:var(--fg-0);
  font-weight:800;
  text-decoration:none;
}
.site-header nav { display:flex; gap:18px; flex-wrap:wrap; }
.site-header nav a { color:var(--fg-1); font-weight:600; }
main { padding-block:clamp(48px,8vw,96px); }
.breadcrumbs {
  margin:0 0 28px;
  color:var(--fg-1);
  font-size:.9375rem;
}
.hero-guide { padding-bottom:clamp(44px,7vw,72px); border-bottom:1px solid var(--line-soft); }
.kicker {
  margin:0 0 14px;
  color:var(--accent);
  font-family:ui-monospace,"Cascadia Code",monospace;
  font-size:.8125rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1,h2,h3 { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.12; }
h1 {
  max-width:15ch;
  margin:0 0 24px;
  font-size:clamp(2.5rem,7vw,5rem);
  letter-spacing:-.04em;
}
h2 { margin:0 0 18px; font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.025em; }
h3 { margin:0 0 10px; font-size:1.25rem; }
.lede {
  max-width:64ch;
  margin:0;
  color:var(--fg-1);
  font-size:clamp(1.05rem,2vw,1.25rem);
}
.updated { display:block; margin-top:18px; color:var(--fg-1); font-size:.875rem; }
.content-section {
  padding-block:clamp(38px,6vw,64px);
  border-bottom:1px solid var(--line-soft);
}
.content-section p,
.content-section li { max-width:72ch; color:var(--fg-1); }
.content-section strong { color:var(--fg-0); }
.content-section ul { padding-left:1.3rem; }
.callout {
  margin-top:28px;
  padding:22px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  background:var(--ink-1);
}
.related {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.related a {
  display:block;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--ink-1);
  color:var(--fg-0);
  font-weight:700;
  text-decoration:none;
}
.related a:hover { border-color:var(--accent); background:var(--ink-2); }
.site-footer {
  padding-block:36px;
  border-top:1px solid var(--line-soft);
  background:var(--ink-4);
  color:var(--fg-1);
}
.site-footer p { margin:0; }
@media (max-width:640px) {
  .site-header__inner { align-items:flex-start; flex-direction:column; padding-block:16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

.guide-toc {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-1);
}
.guide-toc h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.guide-toc ul {
  margin: 0;
  padding-left: 1.2rem;
}
.guide-toc li + li { margin-top: 6px; }

.checklist {
  margin-top: 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.checklist li {
  position: relative;
  padding: 14px 16px 14px 42px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--ink-1);
  color: var(--fg-1);
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 13px;
  color: var(--accent);
  font-weight: 800;
}

.faq {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-1);
  padding: 0 16px;
}
.faq summary {
  cursor: pointer;
  padding: 16px 0;
  color: var(--fg-0);
  font-weight: 700;
}
.faq details p {
  margin: 0 0 16px;
}

.content-section[id] { scroll-margin-top: 24px; }