html { scrollbar-gutter: stable; }
html:has(body.install-overlay-open), body.install-overlay-open { overflow: hidden; }
.install-overlay { position: fixed; inset: 0; z-index: 40; }
.install-overlay-scrim { position: absolute; inset: 0; background: var(--overlay-scrim); animation: install-overlay-fade .25s ease-out; }
.install-overlay-card { position: absolute; top: 156px; right: 64px; width: min(430px, calc(100% - var(--gutter) * 2)); padding: 16px 48px 16px 18px; border: 2px solid var(--on-accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px rgba(242,176,74,.25), 0 12px 32px rgba(0,0,0,.45); font-size: 15px; line-height: 1.5; animation: install-overlay-rise .3s cubic-bezier(.3,1.4,.5,1); }
.install-overlay-card::before { content: ""; position: absolute; top: -9px; right: 214px; width: 14px; height: 14px; border-left: 2px solid var(--on-accent); border-top: 2px solid var(--on-accent); background: var(--accent); transform: rotate(45deg); }
.install-overlay-card[data-step="2"] { top: 410px; right: 44px; width: min(230px, calc(100% - var(--gutter) * 2)); }
.install-overlay-card[data-step="2"]::before { right: 95px; }
.install-overlay-card[data-step="3"] { top: 110px; right: auto; left: var(--gutter); width: min(340px, calc(100% - var(--gutter) * 2)); }
.install-overlay-card[data-step="3"]::before { right: auto; left: 24px; }
.install-overlay-card[data-step="4"] { top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); width: min(260px, calc(100% - var(--gutter) * 2)); max-height: calc(100dvh - var(--gutter) * 2); overflow-y: auto; text-align: center; padding-inline: 28px; background: var(--surface); color: var(--text); border-color: var(--secondary); box-shadow: var(--shadow); }
.install-overlay-card[data-step="4"]::before { display: none; }
.install-overlay-card:focus { outline: none; }
.install-overlay-card:focus-visible { outline: 3px solid var(--secondary); outline-offset: 5px; }
.install-overlay-steps { display: flex; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.install-overlay-card[data-step="4"] .install-overlay-steps { justify-content: center; }
.install-overlay-steps li { width: 22px; height: 4px; border-radius: 2px; background: currentColor; opacity: .3; }
.install-overlay-steps li.is-done { opacity: .6; }
.install-overlay-steps li.is-current { opacity: 1; }
.install-overlay-card strong { display: block; margin: 0; font: 700 26px/1.2 var(--heading); letter-spacing: -.02em; }
.install-overlay-card[data-step="4"] strong { color: var(--primary); }
.install-overlay-loader { display: block; width: 26px; height: 26px; margin: 18px auto 0; border: 3px solid var(--secondary); border-top-color: var(--accent); border-radius: 50%; animation: install-overlay-spin .8s linear infinite; }
.install-overlay-loader[hidden] { display: none; }
.install-overlay-card p { margin: 0; }
.install-overlay-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.install-overlay-close:hover, .install-overlay-close:focus-visible { background: rgba(20,53,43,.12); }
.install-overlay-card[data-step="4"] .install-overlay-close:hover, .install-overlay-card[data-step="4"] .install-overlay-close:focus-visible { background: var(--wash); }
.install-overlay-card[data-step="1"], .install-overlay-card[data-step="2"], .install-overlay-card[data-step="3"] { animation: install-overlay-rise .3s cubic-bezier(.3,1.4,.5,1), install-overlay-nudge 1.6s ease-in-out .4s infinite; }
@keyframes install-overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes install-overlay-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes install-overlay-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes install-overlay-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px), (max-height: 580px) { .install-overlay-card, .install-overlay-card[data-step="2"], .install-overlay-card[data-step="3"] { top: auto; right: var(--gutter); bottom: var(--gutter); left: var(--gutter); width: auto; max-height: calc(100dvh - var(--gutter) * 2); overflow-y: auto; } .install-overlay-card[data-step="4"] { top: 50%; right: auto; bottom: auto; left: 50%; width: min(260px, calc(100% - var(--gutter) * 2)); } .install-overlay-card strong { font-size: 22px; } .install-overlay-card::before, .install-overlay-card[data-step="2"]::before, .install-overlay-card[data-step="3"]::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .install-overlay-scrim, .install-overlay-card, .install-overlay-card[data-step="1"], .install-overlay-card[data-step="2"], .install-overlay-card[data-step="3"], .install-overlay-loader { animation: none; } }