.re-install-card {
  --install-accent: #213653;
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 1200;
  box-sizing: border-box;
  width: min(25rem, calc(100% - 2rem));
  padding: 1rem;
  color: #152339;
  background: #fff;
  border: 1px solid #dde3ec;
  border-top: 3px solid var(--install-accent);
  border-radius: 1rem;
  box-shadow: 0 8px 32px #0d1c2b28;
  text-align: left;
  font: 400 .94rem/1.45 system-ui, sans-serif;
}
.re-install-card[data-accent="gold"] { --install-accent: #795412; }
.re-install-card[data-accent="blue"] { --install-accent: #3559a5; }
.re-install-card[data-accent="pink"] { --install-accent: #9a3363; }
.re-install-card[data-accent="purple"] { --install-accent: #5743a6; }
.re-install-card[data-accent="orange"] { --install-accent: #a74313; }
.re-install-card h2 { margin: 0 0 .35rem; color: inherit; font: 700 1.05rem/1.3 system-ui, sans-serif; }
.re-install-card p { margin: 0 0 .65rem; color: inherit; }
.re-install-card ol { margin: .45rem 0 .65rem; padding-inline-start: 1.4rem; color: inherit; }
.re-install-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.re-install-actions button {
  appearance: none;
  min-height: 44px;
  padding: .4rem .6rem;
  background: #f0f3f8;
  border: 1px solid #dce3ed;
  border-radius: .55rem;
  color: #152339;
  font: 650 .84rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.re-install-actions .re-install-primary { background: var(--install-accent); border-color: var(--install-accent); color: #fff; }
.re-install-actions button:focus-visible { outline: 2px solid #223ca1; outline-offset: 2px; }