:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: grid; place-items: center; }
#frame { border: 0; width: 100vw; height: 100vh; }
#frame:not([hidden]) { display: block; }
.card { max-width: 34rem; padding: 2rem; text-align: center; }
.card svg { width: 64px; height: 64px; margin-bottom: 1rem; }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
p { margin: 0 0 1rem; line-height: 1.5; }
.muted { opacity: .7; font-size: .9rem; }
.button {
  display: inline-block; padding: .7rem 1.4rem; border-radius: .5rem;
  background: #1c6feb; color: #fff; text-decoration: none; font-weight: 600;
}
.button:hover { background: #1558c0; }