.install-banner {
  margin-block-start: 14px;
  background: #fdfcf9;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgb(30 28 24 / .04), 0 6px 16px rgb(30 28 24 / .04);
}

@supports (transition-behavior: allow-discrete) {
  :is(.install-banner, .install-guide) {
    --flow-enter: 200ms;
    --flow-exit: 130ms;
    --flow-offset: -6px;
    --flow-duration: var(--flow-enter);
    --flow-easing: cubic-bezier(.2, .7, .25, 1);
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--flow-duration) var(--flow-easing),
      transform var(--flow-duration) var(--flow-easing),
      display var(--flow-duration) allow-discrete;
  }

  .install-guide {
    --flow-enter: 185ms;
    --flow-exit: 120ms;
    --flow-offset: -5px;
  }

  :is(.install-banner, .install-guide)[hidden] {
    --flow-duration: var(--flow-exit);
    opacity: 0;
    transform: translateY(var(--flow-offset));
    pointer-events: none;
  }

  @starting-style {
    :is(.install-banner, .install-guide):not([hidden]) {
      opacity: 0;
      transform: translateY(var(--flow-offset));
    }
  }

  :is(.install-banner, .install-guide)[data-instant] { transition: none; }

  @media (prefers-reduced-motion: reduce) {
    :is(.install-banner, .install-guide) {
      --flow-enter: 110ms;
      --flow-exit: 110ms;
      --flow-offset: 0px;
    }
  }
}

.refresh-indicator {
  --pull-progress: 0;
  position: fixed;
  z-index: 4;
  inset-block-start: max(8px, env(safe-area-inset-top));
  inset-inline-start: 50%;
  transform: translate(-50%, calc(30px * var(--pull-progress)));
  opacity: var(--pull-progress);
  color: var(--muted);
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 180ms cubic-bezier(.2, .7, .25, 1);
}

.refresh-indicator[data-pulling] { transition: none; }
.refresh-indicator[data-refreshing] { --pull-progress: 1; }
.refresh-spinner {
  display: block;
  transform: rotate(calc(180deg * var(--pull-progress)));
}

@media (prefers-reduced-motion: no-preference) {
  .refresh-indicator[data-refreshing] .refresh-spinner {
    animation: refresh-spin 840ms steps(12) infinite;
  }
  @keyframes refresh-spin {
    from { transform: rotate(180deg); }
    to { transform: rotate(540deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .refresh-indicator { transform: translateX(-50%); }
  .refresh-spinner { transform: none; }
}

.install-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 10px 12px;
}

.push-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding-inline-end: 12px;
}

.push-row .install-action { max-inline-size: 110px; }

.push-status {
  margin-block-start: 10px;
  color: var(--muted);
  font-size: 13px;
}

.install-icon {
  display: block;
  border-radius: 10px;
}

.install-copy h2 {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.025em;
}

.install-copy p {
  margin-block-start: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.install-action,
.install-close,
.install-footer-link {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.install-action {
  padding-inline: 11px;
  background: var(--red);
  border-radius: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.install-action:disabled { opacity: .75; cursor: wait; }

.app-update {
  position: fixed;
  z-index: 5;
  inset-inline: 0;
  inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 6px;
  width: min(360px, calc(100% - 24px));
  margin-inline: auto;
  padding: 6px 4px 6px 16px;
  background: #fdfcf9;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgb(30 28 24 / .06), 0 10px 30px rgb(30 28 24 / .13);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.app-update .install-action { padding-inline: 15px; }
.app-update .install-close { font-size: 22px; font-weight: 400; }

@media (prefers-reduced-motion: no-preference) {
  .app-update:not([hidden]) { animation: app-update-in 190ms cubic-bezier(.2, .7, .25, 1); }
  @keyframes app-update-in {
    from { opacity: 0; transform: translateY(6px); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.install-action, .install-close) {
    transition: transform 145ms cubic-bezier(.25, .46, .45, .94);
  }

  :is(.install-action, .install-close):active:not(:disabled):not(:focus-visible) {
    transform: scale(.97);
  }
}

.install-close {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border-radius: 9px;
  color: var(--muted);
}

.install-guide {
  border-block-start: 1px solid var(--line);
  margin-inline: 12px;
  padding-block: 11px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.install-guide p { margin-block-end: 8px; }
.install-guide ol { margin: 0; padding-inline-start: 23px; }
.install-guide li + li { margin-block-start: 6px; }
.install-guide li::marker { color: var(--red); font-weight: 750; }
.install-share { vertical-align: -.2em; color: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .install-guide:not([hidden], [data-instant]) ol:not([hidden]) > li:not([hidden]) {
    animation: install-step-in 165ms cubic-bezier(.2, .7, .25, 1) backwards;
    animation-delay: calc(var(--flow-enter, 0ms) + var(--step-delay, 0ms));
  }

  .install-guide li:nth-child(2) { --step-delay: 34ms; }
  .install-guide li:nth-child(3) { --step-delay: 68ms; }
  .install-guide li:nth-child(4) { --step-delay: 102ms; }

  @keyframes install-step-in {
    from { opacity: 0; transform: translateY(5px); }
  }
}

.install-footer-link {
  padding: 0;
  background: transparent;
  color: var(--red);
  font-size: inherit;
  font-weight: 650;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (max-width: 360px) {
  .install-row { gap: 5px; padding-inline-start: 8px; }
  .install-action { padding-inline: 8px; }
}