:root { --bg: #f6f7fb; --fg: #12141c; --fg-2: #4b5163; --card: #fff; --line: #e3e6ee; --accent: #7c5cff; font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg: #0c0d12; --fg: #eceef4; --fg-2: #a8aec0; --card: #14161d; --line: #262a36; --accent: #9b82ff; } }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent), var(--bg); color: var(--fg); }
.hero { max-width: 520px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px 28px; }
h1 { margin: 14px 0 6px; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
h1 b { font-weight: 750; color: var(--accent); }
p { color: var(--fg-2); margin: 0 0 18px; }
ul { text-align: left; color: var(--fg-2); padding-left: 20px; line-height: 1.7; }
small { color: var(--fg-2); opacity: .7; }