:root {
  color-scheme: light dark;
  --bg: #F5F4F2; --fg: #2B2A27; --muted: #6C6A64; --accent: #A82438;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161618; --fg: #ECE9E3; --muted: #A6A39C; --accent: #C93A4C; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: var(--bg);
  color: var(--fg);
  font: 16.5px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
main { max-width: 46ch; position: relative; }
main::before {
  content: "";
  position: absolute;
  inset: -40% -60% auto;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%,
              color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  pointer-events: none;
}
svg { position: relative; width: 76px; height: auto; color: var(--accent); }
h1 {
  position: relative;
  margin: 22px 0 12px;
  font-size: clamp(30px, 7vw, 42px);
  font-weight: 680;
  letter-spacing: -0.03em;
}
p { position: relative; margin: 0 0 10px; color: var(--muted); text-wrap: pretty; }
a { color: var(--accent); font-weight: 550; text-underline-offset: 3px; }
.links { position: relative; margin-top: 26px; font-size: 14.5px; }
.links a { margin: 0 9px; }

.org {
  position: relative;
  margin-top: 30px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.org strong { color: var(--fg); font-weight: 600; }
