\
.pwa-install-notice {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 5000;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    width: min(430px, calc(100vw - 40px));
    padding: 14px 44px 14px 14px;

    border: 1px solid rgb(148 163 184 / 28%);
    border-radius: 16px;

    background: rgb(255 255 255 / 97%);
    color: #172033;
    box-shadow: 0 18px 48px rgb(15 23 42 / 22%);
    backdrop-filter: blur(14px);

    font-family: inherit;
}

.pwa-install-notice[hidden] {
    display: none;
}

.pwa-install-notice.is-visible {
    animation: pwa-notice-enter 220ms ease-out;
}

.pwa-install-notice-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: color-mix(
        in srgb,
        var(--color-primary, var(--public-primary, #c62828)),
        white 88%
    );
    color: var(--color-primary, var(--public-primary, #c62828));
}

.pwa-install-notice-icon svg {
    width: 21px;
    height: 21px;

    fill: currentColor;
}

.pwa-install-notice-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pwa-install-notice-copy strong {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.pwa-install-notice-copy span {
    margin-top: 3px;

    color: #647084;
    font-size: 11px;
    line-height: 1.45;
}

.pwa-install-notice-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pwa-install-primary,
.pwa-install-secondary {
    min-height: 36px;
    padding: 8px 12px;

    border-radius: 10px;

    font: inherit;
    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}

.pwa-install-primary {
    border: 1px solid transparent;

    background: var(--color-primary, var(--public-primary, #c62828));
    color: #ffffff;
}

.pwa-install-primary:hover {
    filter: brightness(.94);
}

.pwa-install-secondary {
    border: 1px solid #d9e0e8;

    background: #ffffff;
    color: #42506a;
}

.pwa-install-secondary:hover {
    border-color: #c4ccd6;
    background: #f7f9fb;
}

.pwa-install-close {
    position: absolute;
    top: 8px;
    right: 8px;

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;
    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #7b8798;

    cursor: pointer;
}

.pwa-install-close:hover {
    background: #f2f5f8;
    color: #253047;
}

.pwa-install-close svg {
    width: 16px;
    height: 16px;

    fill: currentColor;
}

.pwa-install-primary:focus-visible,
.pwa-install-secondary:focus-visible,
.pwa-install-close:focus-visible {
    outline: 3px solid rgb(198 40 40 / 18%);
    outline-offset: 2px;
}

@keyframes pwa-notice-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .pwa-install-notice {
        right: 12px;
        bottom: 12px;
        left: 12px;

        grid-template-columns: auto minmax(0, 1fr);

        width: auto;
        padding: 13px 42px 13px 13px;
    }

    .pwa-install-notice-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-notice.is-visible {
        animation: none;
    }
}