:root { color-scheme: light dark; --fg: #111; --bg: #f6f6f4; --muted: #666; --ok: #0a7d32; --bad: #b3261e; --btn: #111; --btnfg: #fff; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #121212; --muted: #9a9a9a; --ok: #4cc276; --bad: #ff7a70; --btn: #eee; --btnfg: #111; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.45 -apple-system, system-ui, sans-serif; }
main { max-width: 30rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.3rem; margin: 0 0 1.2rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
button { width: 100%; padding: .9rem; border: 0; border-radius: .6rem; background: var(--btn); color: var(--btnfg); font: inherit; font-weight: 600; }
button:disabled { opacity: .5; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.done { font-size: 3rem; line-height: 1; color: var(--ok); margin: 1rem 0 .5rem; }
a.button { display: block; text-align: center; padding: .9rem; border-radius: .6rem; background: var(--btn); color: var(--btnfg); font-weight: 600; text-decoration: none; margin-top: 1.5rem; }