@font-face {
  font-family: "Nunito Local";
  src: url("assets/nunito.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Nunito Local", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8f8fc;
  background: #080b16;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 3px solid #b9f4df; outline-offset: 4px; }
::selection { color: #080b16; background: #c4c5ed; }

.install-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 22%, #191c2e 0, #080b16 68%);
}

.install-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 24px 48px;
}
.install-content { width: 100%; max-width: 32rem; text-align: center; }
.install-intro { min-width: 0; }
h1 { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.install-wordmark { width: 180px; max-width: 85%; height: auto; }
.install-lead { max-width: 27ch; margin: 24px auto 0; color: #c2c6d4; font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.install-facts { margin: 20px 0 0; color: #adb5c9; font-size: .875rem; line-height: 1.5; }
.install-facts span { margin-inline: 8px; }

.store-options { display: grid; grid-template-columns: 1fr; min-width: 0; margin-top: 36px; }
.store-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; padding: 24px 0; text-align: left; }
.store-option:first-child { padding-top: 0; }
.store-option + .store-option { border-top: 1px solid #35394b; }
.store-option__meta { flex: 1 1 5rem; min-width: 0; }
.store-option h2 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.store-option__version { margin: 4px 0 0; color: #adb5c9; font-size: .875rem; line-height: 1.5; }
/* Both original badges have no outer padding. At 48px high, reserve 12px clear space. */
.store-link { display: inline-flex; align-items: center; justify-content: center; min-width: 188px; min-height: 72px; flex: 0 0 auto; margin: 0; padding: 12px; border-radius: 8px; text-decoration: none; }
.store-link:hover { outline: 1px solid #8c95ac; outline-offset: 2px; }
.store-link:focus-visible { outline-width: 3px; outline-color: #b9f4df; outline-offset: 4px; }
.store-badge { width: auto; height: 48px; max-width: none; }

.install-footer { padding: 0 48px max(24px, env(safe-area-inset-bottom)); color: #adb5c9; }
.install-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 24px; max-width: 64rem; margin: 0 auto; }
.install-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; line-height: 1.5; }
.install-footer a:hover { color: #fff; }

@media (max-width: 960px) {
  .install-main { padding: 64px 32px 40px; }
  .install-content { max-width: 30rem; }
  .store-options { border-top: 1px solid #35394b; padding-top: 16px; }
  .store-option { padding-block: 16px; }
  .install-footer { padding-inline: 32px; }
  .install-footer nav { max-width: 30rem; }
}

@media (max-width: 580px) {
  .install-main { padding: 48px 24px 32px; }
  .install-content { max-width: 25rem; }
  .store-options { margin-top: 32px; }
  .install-wordmark { width: 170px; }
  .install-lead { max-width: 26ch; }
  .store-option { column-gap: 12px; }
  .install-footer { padding-inline: 24px; }
  .install-footer nav { max-width: 25rem; column-gap: 16px; }
}

@media (max-width: 350px) {
  .install-main, .install-footer { padding-inline: 16px; }
  .store-option { column-gap: 8px; }
}

@media (max-height: 640px) {
  .install-main { padding-top: 32px; padding-bottom: 24px; }
  .store-options { margin-top: 24px; }
  .install-lead { margin-top: 16px; }
  .install-facts { margin-top: 12px; }
}

@media (forced-colors: active) {
  .install-wordmark { background: #080b16; forced-color-adjust: none; }
  .store-link { background: #080b16; forced-color-adjust: none; }
  .store-link:focus-visible { outline-color: Highlight; forced-color-adjust: auto; }
}