:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b18;
  color: #f0f2fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 16px 56px;
  background: radial-gradient(ellipse at top, #151b3a 0, #090b18 48rem);
  line-height: 1.65;
}

main {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(22px, 5vw, 48px);
  border: 1px solid #2c3456;
  border-radius: 18px;
  background: #101426;
  box-shadow: 0 24px 70px #0005;
}

header { margin-bottom: 32px; }
.brand { color: #a89dff; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 12px 0 4px; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; }
h2 { margin: 30px 0 8px; font-size: 1.25rem; }
h3 { margin: 22px 0 4px; font-size: 1.05rem; }
p, li { color: #c6cbe0; }
.lead { color: #e4e7f6; font-size: 1.08rem; }
.updated { color: #9ea6c5; font-size: .92rem; }
a { color: #b8b1ff; text-underline-offset: 3px; }
.card { margin: 24px 0; padding: 18px 20px; border: 1px solid #39436f; border-radius: 12px; background: #171d36; }
.card p:last-child { margin-bottom: 0; }
.todo { color: #ffd478; font-weight: 700; }
hr { margin: 42px 0; border: 0; border-top: 1px solid #303856; }
footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid #303856; color: #9ea6c5; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }