:root { --ink: #1d1b2e; --text: #1d1b2e; --bg: #fff6e5; --card: #fff; --muted: #6d6780; --link: #6a4af0; --yellow: #ffd23f; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --text: #f6f2ff; --bg: #1d1934; --card: #2b2650; --muted: #b6addb; --link: #b3a1ff; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Baloo Bhaijaan 2', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.8; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
h1 { font-size: 30px; margin: 0 0 4px; }
h1 span { background: var(--yellow); color: #1d1b2e; border: 3px solid #1d1b2e; border-radius: 14px; padding: 0 12px; box-shadow: 3px 3px 0 #1d1b2e; display: inline-block; }
h2 { font-size: 20px; margin: 28px 0 6px; }
p, li { font-size: 16px; }
.muted { color: var(--muted); font-size: 14px; }
.card { background: var(--card); border: 3px solid #1d1b2e; border-radius: 16px; box-shadow: 3px 3px 0 #1d1b2e; padding: 12px 16px; margin: 14px 0; }
a { color: var(--link); font-weight: 700; }
nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 18px; font-size: 15px; }