:root {
  --bg: #101314;
  --fg: #e9ece6;
  --muted: #8d958f;
  --accent: #9fc58a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 80% at 50% 110%, #1d2a22 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--fg);
  font: 1.05rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { flex: 1; display: grid; place-items: center; padding: 48px 16px; }
.card { text-align: center; max-width: 34rem; }
.mark { width: 64px; height: 64px; color: var(--accent); margin-bottom: 1.5rem; }
h1 {
  margin: 0 0 .6rem;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
h1 span { color: var(--muted); font-weight: 400; }
p { margin: 0 0 .5rem; color: var(--fg); }
.more { color: var(--muted); font-size: .95rem; margin-top: 1.5rem; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--fg); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.foot { display: flex; gap: 1.5rem; justify-content: center; padding: 16px 16px 24px; font-size: .82rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #000; padding: .4em .8em; }
.skip:focus { left: 8px; }