:root { color-scheme: light dark; --bg: #fff; --fg: #111; --muted: #555; --accent: #111; --accent-fg: #fff; }
@media (prefers-color-scheme: dark) { :root { --bg: #111; --fg: #f2f2f2; --muted: #aaa; --accent: #f2f2f2; --accent-fg: #111; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 16px; }
main { width: 100%; max-width: 360px; text-align: center; }
h1 { font-size: 28px; margin: 0 0 8px; }
p { margin: 0 0 20px; }
.hint { color: var(--muted); font-size: 14px; }
button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-fg);
  font: inherit; font-weight: 600; cursor: pointer; margin-bottom: 20px; }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible { outline: 3px solid var(--muted); outline-offset: 2px; }
.error { color: #c62828; }
@media (prefers-color-scheme: dark) { .error { color: #ff8a80; } }