:root {
  --kumkum: #b0123f;
  --kumkum-dark: #7a0b2b;
  --marigold: #f5a300;
  --marigold-soft: #ffe3a3;
  --peacock: #0b7a75;
  --indigo: #2e1a5c;
  --cream: #fff7ec;
  --ink: #2a1420;
  --muted: #6b5560;
  --card: #ffffff;
  --line: #f0e2cf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1a0f15;
    --card: #24161e;
    --ink: #f6ece6;
    --muted: #c4b0b8;
    --line: #3a2630;
    --marigold-soft: #4a3510;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 2px, transparent 3px) 0 0/28px 28px,
    linear-gradient(135deg, var(--indigo), var(--kumkum-dark) 55%, var(--kumkum));
  color: #fff;
  padding: 40px 16px 56px;
  border-radius: 0 0 32px 32px;
}
.hero .wrap { display: flex; gap: 16px; align-items: center; }
.hero svg { flex: none; width: 64px; height: 64px; }
.hero h1 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1; margin: 0;
}
.hero p { margin: 4px 0 0; color: var(--marigold-soft); font-weight: 600; }
@media (prefers-color-scheme: dark) { .hero p { color: #ffe3a3; } }
.wrap { max-width: 760px; margin: 0 auto; }
main { padding: 0 16px 48px; margin-top: -28px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px clamp(16px, 4vw, 32px);
  margin-bottom: 16px;
}
h2 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 22px; line-height: 1.25; margin: 28px 0 8px; color: var(--kumkum);
}
@media (prefers-color-scheme: dark) { h2 { color: #ff8fa8; } }
h2:first-child { margin-top: 0; }
h3 { font-size: 17px; margin: 18px 0 4px; }
p, li { color: var(--ink); }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--peacock); font-weight: 600; }
@media (prefers-color-scheme: dark) { a { color: #5fd1c9; } }
.meta { color: var(--muted); font-size: 14px; }
.note {
  background: var(--marigold-soft);
  border-radius: 16px; padding: 14px 16px; margin: 16px 0;
}
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li {
  counter-increment: s; position: relative; padding: 10px 0 10px 48px;
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--kumkum), var(--marigold));
  color: #fff; font-weight: 800; display: grid; place-items: center;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.table-scroll { overflow-x: auto; }
nav.links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
footer { text-align: center; color: var(--muted); font-size: 14px; padding: 8px 16px 32px; }