:root { --bg:#fff; --fg:#111827; --hint:#4b5563; --card:#f3f4f6; --accent:#1d6fb8; --on:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f172a; --fg:#f1f5f9; --hint:#cbd5e1; --card:#1e293b; --accent:#5aa9e6; --on:#0f172a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,sans-serif; }
main, header, footer { max-width: 42rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 2rem; line-height: 1.2; } h2 { margin-top: 2rem; }
a { color: var(--accent); }
.btn { display:inline-block; min-height:44px; padding:.65rem 1.25rem; background:var(--accent); color:var(--on); border-radius:.75rem; font-weight:600; text-decoration:none; }
.card { background:var(--card); border-radius:1rem; padding:1rem; margin:.75rem 0; }
.hint { color:var(--hint); }
details { background:var(--card); border-radius:.75rem; padding:.75rem 1rem; margin:.5rem 0; }
summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
nav a { display:inline-flex; min-height:44px; align-items:center; margin-right:1rem; }