:root {
color-scheme: light dark;
--bg: #f7f4ff;
--card: #ffffff;
--text: #1f1633;
--muted: #5b4f78;
--accent: #5a38b0;
--border: #d9d0f0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #120f1d;
--card: #1b162a;
--text: #f3efff;
--muted: #c5bcdf;
--accent: #b39aff;
--border: #3b3158;
}
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
main {
max-width: 820px;
margin: 0 auto;
padding: 32px 20px 64px;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 24px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
h1, h2 {
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 2rem;
}
h2 {
margin-top: 2rem;
font-size: 1.25rem;
color: var(--accent);
}
p, li {
font-size: 1rem;
}
.muted {
color: var(--muted);
}
a {
color: var(--accent);
}