/* Installation stays available without JavaScript. The browser owns the native prompt. */
.brand-mascot .khatu { width: 34px; height: 34px; }
.brand:focus-visible .k-body { animation: k-hop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1; }
@media (hover: hover) {
  .brand:hover .k-body { animation: k-hop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1; }
}
.home-install { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r-full); color: var(--text-2); font-size: 13px; font-weight: 600; }
.home-install:hover { background: var(--card); color: var(--text); text-decoration: none; }
.home-install[aria-busy="true"] { cursor: progress; }
.home-install-text { display: none; }
.install-entry { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.install-page { max-width: 960px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.install-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.install-nav .btn { min-height: 44px; }
.install-main { display: grid; gap: 28px; margin: 40px auto 0; max-width: 720px; }
.install-main > *, .install-intro > *, .install-preview > * { min-width: 0; }
.install-intro { display: grid; gap: 24px; }
.install-mascot { display: grid; justify-items: start; align-content: center; gap: 12px; }
.install-mascot .khatu { width: 112px; }
.install-mascot button { min-height: 44px; white-space: normal; text-align: left; }
.install-copy h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.2; text-wrap: balance; }
.install-copy > p { margin: 16px 0; color: var(--text-2); }
.install-copy .btn { min-height: 44px; white-space: normal; text-align: center; }
.install-copy .install-status { margin-bottom: 0; }
.install-preview { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-block: 1px solid var(--line-strong); }
.install-preview img { flex: none; border-radius: 14px; }
.install-preview p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.install-steps { display: grid; gap: 12px; scroll-margin-top: 24px; }
.install-steps details { padding: 4px 16px; background: var(--surface); border-radius: var(--r); }
.install-steps summary { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 600; }
.install-expand { margin-left: auto; }
.install-steps details[open] .install-expand { transform: rotate(90deg); }
.install-steps summary::-webkit-details-marker { display: none; }
.install-steps ol { padding-left: 24px; margin: 8px 0 16px; color: var(--text-2); }
.install-steps li + li { margin-top: 12px; }
.install-steps details > p { margin: 8px 0 16px; color: var(--text-2); }
.install-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.install-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 640px) {
  .install-page { padding-inline: 32px; }
  .install-main { margin-top: 64px; }
  .install-intro { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .install-mascot .khatu { width: 144px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .khatu *, .install-mascot .khatu * { animation: none !important; transition: none !important; }
}