:root {
  color-scheme: dark;
  --canvas: #0e2028;
  --surface: #18333d;
  --line: #31515d;
  --ink: #f4fbff;
  --soft: #adc5cf;
  --lime: #8bdc2b;
  --blue: #49c5f6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top right, #163845 0, var(--canvas) 40rem);
  color: var(--ink);
  font-family: ui-rounded, "Avenir Next Rounded", "Avenir Next", system-ui, sans-serif;
  line-height: 1.65;
}
main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0; }
.spark {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 21px; background: var(--lime); color: #16320e;
  font-size: 34px; font-weight: 900; box-shadow: 0 7px 0 #4f9418;
}
.eyebrow { margin: 30px 0 4px; color: var(--blue); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.05; letter-spacing: -.04em; }
.lead { color: var(--soft); font-size: 1.25rem; margin: 24px 0 42px; }
section { margin: 18px 0; padding: 24px; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; }
h2 { margin: 0 0 8px; font-size: 1.35rem; }
h3 { margin: 24px 0 4px; font-size: 1.05rem; color: var(--blue); }
p { margin: 0; }
a { color: var(--blue); font-weight: 800; }
.updated { color: var(--soft); margin: 30px 4px 18px; }
nav a { display: inline-block; padding: 12px 18px; border-radius: 14px; background: var(--lime); color: #16320e; text-decoration: none; box-shadow: 0 5px 0 #4f9418; }
@media (max-width: 520px) { main { padding: 38px 0; } section { padding: 20px; } }