:root { --bg: #F3ECDF; --ink: #18211C; --muted: #56615A; --forest: #2E5E3E; --line: #E6DCC8; }
@media (prefers-color-scheme: dark) { :root { --bg: #141A16; --ink: #E9EDE6; --muted: #A3AEA6; --forest: #7DB38A; --line: #2C3830; color-scheme: dark; } }
body { background: var(--bg); color: var(--ink); font: 17px/1.6 "Figtree", system-ui, -apple-system, sans-serif; margin: 0; }
main { max-width: 42em; margin-inline: auto; padding: 40px max(16px, env(safe-area-inset-left, 0px)) 64px; }
a { color: var(--forest); }
h1 { font-size: 34px; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: 20px; margin-top: 2em; }
p, li { color: var(--muted); }
.back { font-weight: 700; text-decoration: none; }
.todo { background: #FFF3D6; color: #6B4A10; padding: 2px 6px; border-radius: 4px; }
.done { text-align: center; padding-top: 64px; }
.done .badge { display: block; margin: 0 auto 8px; width: 160px; height: 160px; }
.done .btn { display: inline-block; margin-top: 8px; background: var(--forest); color: var(--bg); text-decoration: none; font-weight: 700; padding: 13px 22px; border-radius: 999px; }