:root {
  color-scheme: dark;
  --color-page: #080908;
  --color-surface: #121510;
  --color-raised: #181c15;
  --color-text: #f3f6ef;
  --color-text-secondary: #a9b2a2;
  --color-text-muted: #808b79;
  --color-border: #2a2f25;
  --color-lime: #c8ff3d;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0, rgba(200, 255, 61, 0.08), transparent 32rem),
    var(--color-page);
  color: var(--color-text);
  font: 450 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

a { color: var(--color-lime); }
a:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 4px; }

.shell { width: min(100% - 32px, 720px); margin: 0 auto; padding: 64px 0; }
.brand { margin: 0 0 var(--space-8); color: var(--color-lime); font-size: 12px; font-weight: 700; }
h1 { margin: 0 0 var(--space-3); font-size: 32px; line-height: 1.08; }
.lede { margin: 0 0 var(--space-8); color: var(--color-text-secondary); font-size: 16px; }
.card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: 8px; background: linear-gradient(180deg, var(--color-raised), var(--color-surface)); }
.card + .card { margin-top: var(--space-4); }
h2 { margin: 0 0 var(--space-3); font-size: 20px; line-height: 1.25; }
p, ul { margin: 0; }
p + p, p + ul, ul + p { margin-top: var(--space-3); }
ul { padding-left: var(--space-5); color: var(--color-text-secondary); }
.meta { margin-top: var(--space-8); color: var(--color-text-muted); font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.button { display: inline-flex; min-height: 48px; align-items: center; padding: 0 var(--space-4); border-radius: 8px; background: var(--color-lime); color: var(--color-page); font-weight: 700; text-decoration: none; }

@media (max-width: 480px) { .shell { padding: 40px 0; } .card { padding: var(--space-5); } }
