:root { --ink: #1f3533; --soft: #4f6a67; --mint: #d4eee9; --teal: #1a8f75; --card: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --ink: #e9f5f2; --soft: #9dbab5; --mint: #0d1e1d; --teal: #3cc5a4; --card: #15282a; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--mint); }
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.card { background: var(--card); border-radius: 22px; padding: 28px 26px; box-shadow: 0 18px 40px -24px rgba(20, 70, 65, .5); }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
header img { width: 72px; height: 72px; border-radius: 18px; }
h1 { font-size: 32px; line-height: 1.15; margin: 0; }
h2 { font-size: 21px; margin: 30px 0 6px; }
p, li { color: var(--soft); }
a { color: var(--teal); }
.meta { font-size: 14px; color: var(--soft); margin: 4px 0 0; }
footer { text-align: center; font-size: 14px; color: var(--soft); margin-top: 22px; }