:root { color-scheme: light dark; --orange: #ff8a3d; --ink: #2b1b3d; --bg: #fff6ec; --card: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --ink: #f3ecff; --bg: #1b1238; --card: #2a1f4d; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
header.hero { text-align: center; padding: 24px 0 8px; }
header.hero img { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
h1 { font-size: 2.2rem; margin: 16px 0 4px; }
h2 { font-size: 1.3rem; margin: 2rem 0 .4rem; }
a { color: #d9541c; }
@media (prefers-color-scheme: dark) { a { color: #ffb36b; } }
.card { background: var(--card); border-radius: 16px; padding: 4px 20px 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.lead { text-align: center; font-size: 1.15rem; }
nav.links { text-align: center; margin: 24px 0; }
nav.links a { display: inline-block; margin: 4px 8px; padding: 10px 18px; border-radius: 14px; background: var(--orange); color: #fff; text-decoration: none; font-weight: 700; }
footer { margin-top: 40px; text-align: center; font-size: .9rem; opacity: .75; }