:root { --mat: #2238D6; --ink: #0A1650; --ink2: #545E99; --earned: #C8246F; --panel: #F2F2F7; --ground: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root { --mat: #2238D6; --ink: #F2F4FF; --ink2: #C3CBFF; --earned: #FF78B8; --panel: #1C1C1E; --ground: #000000; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }
header a { color: inherit; text-decoration: none; font-weight: 800; letter-spacing: 0.06em; }
h1 { font-size: 44px; line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; margin: 48px 0 12px; }
h2 { font-size: 22px; margin: 36px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--ink2); }
a { color: var(--mat); }
@media (prefers-color-scheme: dark) { a { color: #8494FF; } }
.button { display: inline-block; background: var(--mat); color: #fff !important; text-decoration: none; padding: 14px 28px; border-radius: 999px; font-weight: 700; margin-top: 16px; }
.panel { background: var(--panel); border-radius: 24px; padding: 20px 24px; margin: 24px 0; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #FF78B8; vertical-align: middle; margin-left: 6px; }
footer { margin-top: 64px; color: var(--ink2); font-size: 14px; }