:root { color-scheme: light dark; --fg:#111; --bg:#fafafa; --mut:#666; --line:#ddd; --err:#b00020; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#eee; --bg:#111; --mut:#999; --line:#333; --err:#ff6b81; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { width: min(28rem, 90vw); text-align: center; padding: 2rem 0; }
h1 { font-size: 3rem; margin: 0; letter-spacing: -0.03em; font-weight: 650; }
.sub { color: var(--mut); margin: .5rem 0 2rem; }
form { display: flex; flex-direction: column; gap: .75rem; }
input, button {
  font: inherit; padding: .75rem 1rem; border-radius: .5rem;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
}
input { text-align: center; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
button { cursor: pointer; border-color: var(--fg); }
button:hover { background: var(--fg); color: var(--bg); }
#msg { min-height: 1.5em; margin-top: 1rem; color: var(--mut); }
#msg.err { color: var(--err); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}