:root {
  color-scheme: light dark;
  --background: #fff;
  --foreground: #14171d;
  --secondary: #66707c;
  --accent: #005eff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--foreground); background: var(--background); }
main { width: min(100%, 450px); min-height: 100svh; margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 32px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.wordmark { margin: 0; font-size: 44px; line-height: 1.15; font-weight: 750; letter-spacing: -2px; }
h1 { font-size: 21px; line-height: 1.3; font-weight: 400; color: var(--secondary); letter-spacing: -.5px; margin: 8px 0 10px; }
.welcome-art { display: block; width: min(100%, 340px); height: auto; margin: 22px 0 24px; }
.description { max-width: 310px; margin: 0; color: var(--secondary); font-size: 17px; line-height: 1.55; letter-spacing: -.25px; }
.action { width: 100%; padding-top: 34px; margin-top: auto; }
button { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 600; padding: 16px 22px; cursor: default; }
button:focus-visible { outline: 3px solid var(--foreground); outline-offset: 5px; }
#availability { color: var(--secondary); font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
@media (min-width: 700px) {
  main { min-height: min(900px, 100svh); padding-top: 42px; padding-bottom: 36px; }
  .welcome-art { width: 340px; }
}
@media (max-height: 780px) {
  main { padding-top: 24px; }
  h1 { margin-top: 8px; }
  .welcome-art { width: min(100%, 280px); margin: 18px 0; }
  .action { padding-top: 26px; }
}
@media (prefers-color-scheme: dark) {
  :root { --background: #101114; --foreground: #f4f5f8; --secondary: #a8aeb8; --accent: #1268ff; }
}