:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: #101114; color: #e8e9ed; }
main { width: min(100% - 3rem, 22rem); text-align: center; }
button { width: 100%; min-height: 3.25rem; padding: .85rem 1.4rem; border: 1px solid #42454e; border-radius: .65rem; background: #24262c; color: inherit; font: inherit; font-weight: 550; cursor: pointer; }
button:hover { background: #30333b; }
button:focus-visible { outline: 3px solid #c4ceff; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .65; }
#status { min-height: 3rem; margin: 1rem 0 0; font-size: .9rem; line-height: 1.5; color: #b8bbc5; }
@media (prefers-color-scheme: light) {
  body { background: #f7f7f8; color: #23252a; }
  button { background: #fff; border-color: #d0d2d8; }
  button:hover { background: #eceef2; }
  #status { color: #555b68; }
}