[data-install-page] [hidden], [data-install-nav][hidden] { display: none !important; }
.install-page { box-sizing: border-box; width: min(100%, 760px); min-width: 0; margin: 0 auto; padding: clamp(1rem, 3vw, 2.25rem) clamp(.5rem, 2vw, 1.25rem) 3rem; color: var(--mud-palette-text-primary, #f8fafc); overflow-wrap: anywhere; }
.install-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.install-hero img { width: 88px; height: 88px; flex: 0 0 auto; object-fit: contain; }
.install-hero h1 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; }
.install-page p { line-height: 1.65; margin: .8rem 0; }
.install-page h2 { font-size: 1.35rem; margin: 1.5rem 0 1rem; }
.install-platforms { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0; }
.install-platforms button, .install-primary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .7rem 1.15rem; border: 1px solid var(--mud-palette-lines-default, #ffffff30); border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; }
.install-platforms button { flex: 1; min-width: 0; color: inherit; background: var(--mud-palette-surface, #111827); }
.install-platforms button[aria-pressed="true"] { border-color: var(--mud-palette-primary, #60a5fa); box-shadow: inset 0 0 0 1px var(--mud-palette-primary, #60a5fa); }
.install-primary { background: var(--mud-palette-primary, #60a5fa); color: var(--mud-palette-primary-text, #071225); border-color: transparent; }
.install-primary:disabled { opacity: .65; cursor: wait; }
.install-page button:focus-visible, .install-page a:focus-visible { outline: 3px solid var(--mud-palette-primary, #60a5fa); outline-offset: 3px; }
.install-steps { list-style: none; counter-reset: install-step; padding: 0; margin: 1rem 0; display: grid; gap: .9rem; }
.install-steps li { counter-increment: install-step; position: relative; min-height: 44px; padding: .55rem .75rem .55rem 3.5rem; border-radius: 12px; background: var(--mud-palette-surface, #111827); line-height: 1.5; }
.install-steps li::before { content: counter(install-step); position: absolute; inset-inline-start: .7rem; top: .6rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--mud-palette-primary, #60a5fa); border: 1px solid currentColor; font-weight: 700; }
.install-steps li { padding-inline-start: 3.5rem; padding-inline-end: .75rem; }
.install-share { width: 24px; height: 24px; vertical-align: middle; margin-inline-end: .45rem; }
.install-note { color: var(--mud-palette-text-secondary, #cbd5e1); font-size: .94rem; }
.install-complete { padding: 1rem; border: 1px solid var(--mud-palette-primary, #60a5fa); border-radius: 14px; }
.install-status p { padding: .75rem; border-inline-start: 3px solid var(--mud-palette-primary, #60a5fa); }
@media (max-width: 390px) { .install-hero { align-items: flex-start; flex-direction: column; } .install-hero img { width: 64px; height: 64px; } .install-primary { width: 100%; box-sizing: border-box; } }
@media (display-mode: standalone), (display-mode: fullscreen) { [data-install-nav] { display: none !important; } }